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

• 统一项目的构架风格
• 初始化配置项目依赖
• 提供单文件组件
• 操作方式：命令行工具
  官网

https://cli.vuejs.org/zh/

VueCLI本质还是webpack

安装CLI

• 安装

npm install -g @vue/cli

• 升级

npm update -g @vue/cli

查看VueCLI版本号

创建项目

vue create project-demo

• 选择Preset

  
  选择vue 2，稳定

• 选择包管理器

  
  选择npm

• 正在安装

  
  

• 创建完成

  
  创建完成，两条指令，启动项目

搭建项目的其他选项

选择Manually select features手动设置

选择需要的工具
回车后选择vue的版本
选择模式hash或者history
选择css预处理器
选择ESlint风格
什么时候进行代码风格检查？保存的时候就检查
相关配置文件在哪里保存？保存在package文件中或者单独文件中保存，这边推荐单独保存
保存当前项目预设风格？
预设名称设置 如果安装过git，中途会出现这个git提示，选择是
安装完成啦，两条指令启动项目

启动项目成功：

npm run serve 访问项目

另外，我们存储的预设方案，在再一次搭建项目的时候就会出现这个方案了

在哪里找方案存储呢？
基本都在

C:\Users\用户名.vuerc

这个文件内

删除文件就不会存在这些预设了，只会剩下默认的方案

目录与文件

• 文件目录介绍

  
  

通过cli创建的项目内部文件

• 单文件组件可以将组件的功能统一保存在以 .vue 为扩展名的文件中

• App.vue是根组件

• components文件夹里面的vue文件就是组件

  
  

进行单文件组件设置的时候，每一个组件都被看作了模块，核心功能需要被导出，就用到了export default

style标签内部就写入了样式，scoped属性让这些样式都只能被当前组件使用，非常方便

template标签内部就是网页内容，html各种标签

App.vue

import 导入组件，components内部写入组件名，也就是作为子组件使用

main.js入口文件 public文件夹里的index.html的div#app对应的就是main.js的#app，修改了就不能使用了
这样设置的目的是为了将入口文件和根文件相分离

打包与部署

打包

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

npm run build

打包完成 生成一个dist文件夹，里面有很多文件

部署

• 部署指的就是将Vue项目dist目录部署到服务器上
• 安装静态文件服务器

npm install -g serve

检查serve版本号

serve -v

• 在dist文件夹下通过serve命令部署

  
  在dist文件夹使用serve

成功打开