【vue项目0-1搭建】vue-cli脚手架目录结构及其改造（2）

      本文基于vue版本2.9.6编写。通过npm命令对vue-cli脚手架安装，若未安装，可参考文章https://blog.csdn.net/Myuhua/article/details/106005344

（1）安装完成后默认vue脚手架目录结构

默认脚手架目录结构详细介绍。

|-- build  //项目构建(webpack)相关代码
|   |-- build.js  //bulid.js是webpack的打包文件，通过配置package.json中的script来执行脚本。命令号npm run build即运行node build/build.js
|   |-- check-versions.js  //检查node跟npm版本号
|   |-- logo.png  
|   |-- utils.js  //相关构建工具
|   |-- vue-loader.conf.js  //根据当前的开发环境对webpack中的vue-loader进行配置
|   |-- webpack.base.conf.js  //webpack基础配置
|   |-- webpack.dev.conf.js  //webpack开发环境配置，构建开发本地服务器
|   |-- webpack.prod.conf.js  //webpack生产环境配置

|-- config  //配置目录，包括端口号等。我们初学可以使用默认的
|  |-- dev.env.js  //开发环境变量配置
|  |-- index.js  //项目的一些配置变量。主要涉及dev与build的一些配置
|  |-- prod.env.js  //生产环境变量配置
|  |-- test.env.js  //测试脚本的配置

|-- node_modules  //npm 加载的项目依赖模块

|-- src  //开发代码的目录，基本上要做的事情都在这个目录里。
|  |-- assets  //放置一些图片，如logo等。
|  |  |-- logo.png
|  |-- components  //目录里面默认放了一个HelloWord.vue的组件，可以不用。
|  |  |-- HelloWorld.vue
|  |-- router  //vue的路由插件，在脚手架安装过程中如果选择安装路由就有这个包，如果没有选择就没有这个包。
|  |  |-- index.js
|  |-- App.vue  //项目入口文件，也可以直接将组件写这里，而不使用components 目录。不建议这么做，因为不便于项目维护。 
|  |-- main.js  //项目的核心文件。

|-- static  //静态资源目录，如图片、字体等。
|  |-- .gitkeep  //git无法追踪一个空的文件夹，当用户需要追踪(track)一个空的文件夹的时候，可以把一个称为.gitkeep的文件放在这些文件夹里。

|-- test  //初始测试目录，可删除。
|  |-- e2e  //e2e测试
|  |  |-- custom-assertions
|  |     |-- elementCount.js
|  |  |-- specs
|  |     |-- test.js
|  |  |-- nightwatch.conf.js
|  |  |-- runner.js
|  |-- unit  //单元测试
|  |  |-- specs
|  |     |-- HelloWorld.spec.js
|  |  |-- .eslintrc
|  |  |-- jest.conf.js
|  |  |-- setup.js

|-- .babelrc  //ES6语法编译配置

|-- .editorconfig  //定义代码格式

|-- .eslintignore  //eslint检测代码忽略文件（夹）

|-- .eslintrc.js  //定义eslint的plugins，extends，rules

|-- .gitignore  //git上传忽略文件配置

|-- .postcssrc.js  //postcss配置文件

|-- index.html  //访问的页面

|-- package.json  //项目基本信息，包括依赖信息等 创建一个Node.js项目，意味着创建了一个模块，这个模块的描述文件成为package.json

|-- package-lock.json  //锁定安装时的包的版本号，需要上传到git，保证依赖包一致。package-lock.json 是在 `npm install`时候生成一份文件，用来记录当前状态下实际安装的各个npm package的具体来源和版本号。

|-- README.md  //项目说明，markdown文件

参考文章 https://blog.csdn.net/xiaoyangerbani/article/details/80735310

       作者对默认脚手架目录中核心文件中代码做了详细的注释,请参照项目地址https://github.com/Myuhua/vue-learning.git ，vue-cli-v2.9.6目录。

（2）根据项目需求修改后的目录结构

       本部分的目录修改是基于vue2.9.6版本，在原有包结构的基础上做了删除与添加操作。因作者独立开发，边开发边进行调试，故删除了项目的test模块及相关文件。build目录结构与脚手架默认同。config目录下删除了测试脚本配置文件。改动较大的为src目录，创建了api\common\directive\filters\store\utils\views等目录，注意，xxx.file是为了页面整洁对脚手架默认存在文件进行省略但不是删除，各目录作用介绍如下。

|-- build               //项目构建(webpack)相关代码，与vue-cli初始化目录结构一致
  
|-- config              //配置目录。
|  |-- dev.env.js       //开发环境变量
|  |-- index.js         //项目的一些配置变量。
|  |-- prod.env.js      //生产环境变量

|-- src 
|  |-- api              //与后台交互模块文件夹 
|  |  |-- system        //自定义系统管理模块与后台交互代码放置处，根据自已的业务自定义即可
|  |-- assets           //放置需要经由 Webpack 处理的静态文件。如放置一些图片，如logo等。
|  |-- common           //通用资源文件夹（font，stylus，img）
|  |  |-- font          //字体
|  |  |-- img           //图片
|  |  |-- stylus        // CSS 的预处理框架
|  |-- components       // 组件 主要是全局性的，或通用性很强的组件，具备良好的封装性一般不会涉及到具体的业务逻辑。如面包屑、顶部导航栏等
|  |-- directive        //存放自定义指令包。比如一些权限指令。
|  |-- filters          //自定义过滤器模块文件夹
|  |-- router           //路由
|  |-- store            //状态管理
|  |-- utils            //工具类
|  |-- views            //业务性的页面组件，基本不具备通用性。与路由一一对应（如 /src/views/auth/login.vue 对应着路由 /auth/login） 
|  |  |-- auth          //用户认证模块 可放置登录页，注销页面等
|  |  |-- error         //错误页面
|  |  |-- system        //这个目录名称根据模块功能自定义，比如作者system目录是需要写系统管理的一些内容，故取名为system。
|  |  |-- ...           //下面的包创建根据个人系统需求创建就好了
|  |-- App.vue          //项目入口文件，也可以直接将组件写这里，而不使用components 目录。不建议这么做，因为不便于项目维护。 
|  |-- main.js          //项目的核心文件。

|-- static              // # 放置无需经由 Webpack 处理的静态文件，如图片、字体等。

|-- xxx.file            //这部分表示与第一部分vue-cli初始化创建的文件一样，此处省略且不再做重复解释。

详细情况请参照项目地址https://github.com/Myuhua/vue-learning.git ，vue-remould-base-v.2.9.6目录。