Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，称为脚手架工具。

使用 Vue CLI 具有以下优点：

• 统一项目的架构风格
• 初始化配置项目依赖
• 提供单文件组件

和 webpack 一样，Vue CLI 也是使用命令行进行操作的。

官方文档 不那么容易看明白，所以让我们简化下吧！

安装

安装之前需要确保安装了 node ，没有安装的可参考 node安装，

然后使用命令行安装命令，我们这里使用 VS Code 终端输入命令操作，

# 安装
npm install –g @vue/cli
# 如果安装报错'源文本中存在无法识别的标记'，则需要加引号
npm install –g '@vue/cli'

因为是全局安装，所以只需安装一次，后续直接使用即可。

查看版本

vue --version
# 升级版本
npm update –g @vue/cli

项目搭建

创建项目：

vue create project-demo

选择Preset：

选择 Manually, 上下选择，按空格键选定自己需要的插件功能，

完成后回车，后面是一系列你选择的插件的相关设置选择，

上面最后一步是保存当前设置，我的命名为demo-preset1，默认保存位置在当前系统用户文件夹的.vuerc文件，比如C:\Users\Administrator\.vuerc，删除或修改文件即可对插件配置进行操作。

设置完成后就是一系列自动化安装，等待许久后，项目创建完成：

运行项目：

# 进入项目目录
cd project-demo
# 运行
npm run serve

按住 Ctrl ，点击链接进行项目访问了

目录与文件

单文件组件可以将组件的功能统一保存在以 .vue 为扩展名的文件中，统一存储在 components 文件夹中。

打包与部署

打包

打包就是将 Vue CLI 项目编译为浏览器可识别的文件。

在 VS Code 终端窗口按 Ctrl + C 退出项目运行，输入命令行命令,

npm run build

打包完成，生成 dist 目录。

部署

部署指的是将 Vue 项目 dist 目录部署到服务器上。

安装静态文件服务器：

npm install –g serve

在 dist 下通过 serve 命令部署

cd dist

serve

成功部署。按住 Ctrl ，点击链接进行打包后的项目访问了：