vue2.x工程目录简介

工程目录简介

上一篇文章写了如何利用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这个文件夹，这个文件夹下面有我们开发的所有业务组件。