21.2、vue-cli文件目录

安装的各个模块

node_modules

(一个或者多个)

存放的是最后编译项目时候的页面模版

1. 把HTML压缩

2. 把编译后的CSS和JS插入到页面模板中

在webpack打包编译的时候，页面模板也会跟着进行编译

1. 单独自己导入一些资源信息，把资源信息放置到当前目录下(public)，基于<%= BASE_URL %>指定相对引入的地址

2. 我们需要在页面中留一个#APP容器，因为最后编译的时候，会把所有的内容插入到这个容器中

1）有一些公共资源，这些公共资源我们不想最后根据webpack都打包在一起，我们想单独导入

2）还有一些模块不支持CommonJS/ES6Module模块规范，这样无法在项目中进行导入导出，此时我们需要单独导入到模板页面中（一般此处导入进来的模块，对应的方法都会暴露到window上）

3）因为模板页面中的东西很少，我们完全可以先自己写一个Loadding等待的效果（防止移动端资源加载过慢导致的白屏）

4）包括一些特殊需要先执行的JS或者样式，最好也是单独写在这里（这样不要最后合并打包到一起），例如：REM等比缩放的计算

......

3. 对于不需要打包合并在一起的资源，   我们可以单独在模板中自己导入

注意事项：

index.html

public

（脚手架生成的webpack配置，只对src目录进行编译处理，其它目录是不处理的）

包含整个项目中所有需要包含的内容和代码

（单页面一个入口，多页面多个入口）

项目的入口

导入需要渲染的组件，在 new Vue 的时候， 把组件进行编译，最后放置在模版页面中#APP容器中

main.js

（文件中包含当前组件自己的结构模板、JS数据状态方法、自己的样式等）

在工程化的项目中，创建组件只需要构建Xxx.vue即可

当前index.html这个页面的主要入口

App.vue

存放多个组件中需要用到的公共组件的

xxx.vue

components

自己创建的文件夹

每一个单独的业务板块或者页面都在这里创建

pages

存放项目需要的静态资源文件

...

lib

css

images

assets

存放axios的二次配置或者一些接口的数据管理

api

管理vuex中的一套信息

store

管理路中的一套信息

router

主组件入口

views

src

babel的配置信息（编译解析JS的）

babel.config.js

当前项目的模块依赖清单（脚手架生成的项目中，我们还会把一些webpack需要用到的配置信息，也写在这里）

配置可执行的脚本命令

开发环境下预览项目

（webpack会打包编译，并且基于dev-server创建一个本地预览服务，并且监听代码变化，一旦有变化会重新编译，自动刷新浏览器看到效果）

$ npm run serve / $ yarn serve

生产环境部署之前，基于这个命令，把项目进行打包

（打包后的内容放到dist或者build目录中，我们把这个目录中的内容整体部署到服务即可）

$ npm run build

\"scripts\"

开发依赖

\"devDependencies\" : {...}

生产依赖

\"dependencies\" : {...}

配置浏览器兼容的列表

\"browserslist\" : {...}

可以在从此处自定义ESLINT词法检测规则

词法解析规则

\"eslintConfig\" : {...}

package.json

vue-cli 的进阶配置

vue.config.js

vue-cli 文件目录