【寒假自学之路】Vue CLI的学习笔记

---

介绍

---

Vue CLI 是一个快速开发的完整系统，有如下功能：

1. @vue/cli 可实现交互式的项目脚手架
2. @vue/cli + @vue/cli-service-global 实现零配置原型开发
3. @vue/cli-service 包含：
   • 可升级
   • 合理配置的webpack
   • 可通过配置文件，进行新的配置
   • 可使用插件拓展
4. 一个丰富的官方插件集合，集成了前端生态的工具
5. 有一套完全图形化的创建、管理Vue.js项目的用户界面

---

vue CLI的构成

---

1. CLI（@vue/cli）

• 可以通过vue create 快速搭建一个新项目
• 可以通过vue serve 构建新想法的原型
• 可以通过vue ui 图形化管理项目

2. CLI服务（@vue/cli-service）

cli-service是构建与webpack和webpack-dev-server之上的，其中包含了：

• 加载cli插件的服务
• 针对大部分应用优化的内部webpack配置
• 项目内部的vue-cli-service命令，提供serve、build、inspect命令

3. CLI插件（@vue/cli-plugin）

---

快速原型开发

---

使用vue serve或vue build 都可以对单个vue文件进行快速原型开发

1. 可以零配置为.js或.vue文件启动一个服务器：

vue serve [options] [entry]

Options:

• -o , --open 打开浏览器
• -c , --copy 将url复制到剪切板
• -h , --help 输入用法信息

2. 可以在生产环境下，零配置构建一个.js或.vue文件

个人理解：使用vue build将入口文件快速打包

vue build [options] [entry]

Options:

• -t , --target <target> 构建目标，默认值为app
• -n , --name <name> 库的名字，或者组件的名字（默认值：入口文件名）
• -d , --dest <dir> 输入目录（默认值：dist）
• -h , --help 输入用法信息

---

创建项目

vue create

图像化管理

vue ui

---

---

插件

---

使用vue add [-option] -pluginName来安装插件

也可以使用vue ui来进行插件的安装和管理

---

Preset（预设置）

---

用于项目创建的时候，自动安装某些插件。（通过package.json）

还可以用于管理插件的版本

---

CLI服务

---

• vue-cli-service serve [options] [entry]
  • –open | 在启动服务器的时候打开浏览器
  • –copy | 在服务器启动时，讲URL复制到剪切板
  • –mode | 指定环境模式（默认值为development）
  • –host | （默认为0.0.0.0）
  • –port | （默认为8080）
  • –https | 是否使用https（默认为false）

开启一个基于webpack-dev-server的服务器，具有HMR功能

除了可以通过命令行参数，还可以使用vue.config.js中的devServer字段进行配置

一般使用方法：vue-cli-service serve --open --copy main.js

• vue-cli-servive build [options] [entry|pattern]

  • –mode | 指定环境模式
  • –dest | 指定输出目录
  • –modern | 面向现代浏览器带自动回退构建应用
  • –targer | app\lib\wc\wc-async(默认app)
  • –name | （默认值：package.json中name的字段或者入口文件名）
  • –no-clean | 在构建项目时，不清除目录
  • –report | 生成report.html以帮助分析包内容
  • –report-json | 生成report.json
  • –watch | 监听文件变化

  相当于根据main.js文件，包含里面import的对象。打包成一个js为文件。

• vue-cli-service inspect [options] [...paths]

  • –mode 指定环境模式（默认值为:development）

用于审查该项目vue-cli的webpack config

• vue-cli-service help

有时候插件会注入额外的命令，所以可以采用该命令来查看所有命令

• vue-cli-service help [command]

学习、查看某一条命令的用法

vue-cli-service help

有时候插件会注入额外的命令，所以可以采用该命令来查看所有命令

• vue-cli-service help [command]

学习、查看某一条命令的用法