Vue CLI 是一个基于Vue.js进行快速开发的完整系统，我们把它称之为脚手架工具
- 统一项目的构架风格
- 初始化配置项目依赖
- 提供单文件组件
-
操作方式：命令行工具
官网
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
成功打开
