Vue CLI

一、简介

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

• 通过 @vue/cli 搭建交互式的项目脚手架。

• 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。

• 一个运行时依赖 (@vue/cli-service)，该依赖：

• 可升级；

• 基于 webpack 构建，并带有合理的默认配置；

• 可以通过项目内的配置文件进行配置；

• 可以通过插件进行扩展。

• 一个丰富的官方插件集合，集成了前端生态中最好的工具。

• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注写应用，而不必花好几天去纠结配置的问题。

image

<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配置等