工程目录简介

上一篇文章写了如何利用vue-cli3.0脚手架快速的搭建一个基于vue2.x的工程 这一篇文章就简单介绍一下工程目录结构。

|--dist                         打包之后的发布目录      |   |--css                          存放打包之后的css文件夹|   |--img                          存放打包之后的img资源文件夹|   |--js                           存放打包之后存放的js文件夹|   |--index.html                   存放打包之后的入口页面||--mock                             本地前端工程mock的一些数据  ||--node_module                  本地项目的第三方依赖||--public               ||--src                          开发目录  |   ||   |--assets                       开发时候存放的一些静态资源|   ||   |--components                   业务开发的组件   |   ||   |--lib                          开发过程中自己写的一些工具库|   ||   |-plugins|   ||   |-router                    前端工程的路由，将其模块化，单独的拿出来|   |   ||   |   |-router.js                 工程的路由配置|   ||   |-vuex                      vuex转态管理|   |   ||   |   |-store.js|   ||   |-App.vue                   工程的入口文件，也是整个工程的根组件  |   |-main.js                   工程的入口文件，用以引入一些全局变量  |   |-.gitignore                提交git仓库忽略的文件|   |-babel.config.js           babel的一些配置|   |-package.json              依赖的第三方配置文件|   |-readMe.md				    项目简单介绍复制代码

其中有一些文件目录不是vue create vue 跑出来的。比如vuex是后续在项目开发过程中添加的，这里一并罗列出各个文件夹下的一些路径，并注释其作用。 在vue-cli3中开发过程已经非常简化了 大体上开发过程中就会用到下面几个命令

• npm install 这个是项目开始的时候根据package.json安装所有的第三方依赖
• npm run serve 开发过程中本地启动一个本地服务调试我们所开发的组件
• npm run build 转移到生产环境上，将开发环境的代码打包。

其中我们关注的最多的就是src/component这个文件夹，这个文件夹下面有我们开发的所有业务组件。