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

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

这样，我们先来说说为什么要划分结构？

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

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

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

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

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

[qzdypre]

|-- 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 文件

[/qzdypre]

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