搜索热点


今天我们就来说说被面试官问的奇葩问题…vue项目结构

运梦 2022-7-14 169 7/14

说下你怎么的vue项目的项目结构,如果是大型项目你是怎么划分结构和划分组件呢?

今天我们就来说说被面试官问的这个奇葩问题---你是怎么规划vue的项目结构的?

这样,我们先来说说为什么要划分结构?

 

大家都知道,做开的发的文件夹很多,什么静态资源啊,css,html,js等等,乱七八糟的文件很多,如果是这样开发的 话,有时候找文件不好找,一旦变动,就全乱套了,更不用说使用vue开发, 组件都很多。所以这时候,也就要划分文件结构,那这样做的好处有什么呢?

 

这样做项目结构会很清晰,能提高开发效率,能更快的熟悉项目的各个组件以及功能的完善,方便后期的开发以及维护。

当然了,也不能随便划分项目结构,里面也要准寻一些基本的原则,比如说最基本的常识:文件夹和文件夹内部文件的语义的一致性。

我们的目录结构都会有一个文件夹都是按照路由模块来划分的。如pages文件夹,这个文件里面应该包含我们的项目的路由模块,而不应该有别的其他的非路由模块的文件夹,这样做的好处在于一眼就从pages文件看出 这个项目的路由有哪些。

这里我就整理看一些文件夹的作用,大概就这些基本够用

|-- ingos.web
|-- node_modules // 项目所引用的前端组件包
|-- public // 项目发布后打包后的目录地址
|-- favicon.ico
|-- index.html
|-- src // 项目源文件路径
|-- assets // 静态存放路径
|-- logo.png
|-- components // 项目中定义的组件存放路径
|-- HelloWorld.vue
|-- plugins // 项目中引用到的第三方 Vue CLI 插件所在路径
|-- element.js
|-- views // 项目中视图所在路径
|-- About.vue
|-- Home.vue
|-- App.vue // 项目的主组件,项目中的页面都是在此进行路由切换
|-- main.js // 主入口文件,初始化 Vue 实例并使用加载项目中需要使用的插件
|-- router.js // 项目中所有的路由定义
|-- store.js
|-- tests // 单元测试文件路径
|-- units // 存放单元测试用例
|-- .eslintrc.js
|-- example.spec.js
|-- .browserslistrc // 指定项目的目标浏览器的范围
|-- .editorconfig // 针对不同的编辑器和 IDE 之间对于代码风格的设定
|-- .eslintrc.js // eslint 的配置文件
|-- .gitignore // git 忽略添加的文件
|-- babel.config.js // Babel 规则配置文件
|-- package-lock.json // 记录安装包的具体版本号
|-- package.json // 项目加载的组件包
|-- postcss.config.js // 针对 postcss 的配置
|-- README.md // 项目 readme 文件

eeeee ,这编译器确实不缩进哈,看着确实有点恼火!!!  将就看看吧

 

- THE END -

运梦

7月14日16:14

最后修改:2022年7月14日
0

非特殊说明,本博所有文章均为博主原创。