一、简介
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
通过
@vue/cli搭建交互式的项目脚手架。通过
@vue/cli+@vue/cli-service-global快速开始零配置原型开发。一个运行时依赖 (@vue/cli-service)，该依赖：
可升级；
基于 webpack 构建，并带有合理的默认配置；
可以通过项目内的配置文件进行配置；
可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注写应用，而不必花好几天去纠结配置的问题。
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="csharp" cid="n24" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; color: rgb(184, 191, 198); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">// 进入该项目目录
cd smart-web
// 安装所需依赖
npm install
// 启动服务
npm run dev</pre>
二、目录介绍
1、build：构建脚本目录
build.js ==> 生产环境构建脚本；
check-versions.js ==> 检查npm，node.js版本；
utils.js ==> 构建相关工具方法；
vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；
webpack.base.conf.js ==> webpack基本配置；
webpack.dev.conf.js ==> webpack开发环境配置；
webpack.prod.conf.js ==> webpack生产环境配置；
2、config：项目配置
dev.env.js ==> 开发环境变量；
index.js ==> 项目配置文件；
prod.env.js ==> 生产环境变量；
3、node_modules：
- npm 加载的项目依赖模块
4、src
这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；
components：组件目录，我们写的组件就放在这个目录里面；
router：前端路由，我们需要配置的路由路径写在index.js里面；
App.vue：根组件；
main.js：入口js文件；
5、static
- 静态资源目录，如图片、字体等。不会被webpack构建
6、index.html
首页入口文件，可以添加一些 meta 信息等
7、package.json
npm包配置文件，定义了项目的npm脚本，依赖包等信息``
8、README.md：
项目的说明文档，markdown 格式
9、.xxxx文件：
这些是一些配置文件，包括语法配置，git配置等
