介绍
vue-cli
- 通过 @vue/cli 搭建交互式的项目脚手架
- 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发
- 一个运行时依赖（@vue/cli-service）
- 一个丰富的官方插件集合，集成了前端生态中最好的工具
- 一套完整图形化的创建和管理 Vue.js 项目的用户界面
CLI
- CLI（@vue/cli）：
- 一个全局安装的 npm 包（提供vue命令）
- vue create：快速创建一个新项目的脚手架
- vue serve：构建新想法的原型
- vue ui：通过一套图形化界面管理我们的所有项目
- 一个全局安装的 npm 包（提供vue命令）
- CLI服务（@vue/cli-service）：
- 一个开发环境依赖（包含）
- 加载其他 CLI 插件的核心服务
- 局部安装在每个@vue/cli创建的项目中（包含）
- 优化过的 n 内部 webpack 配置
- 构建于 webpack 和 webpack-dev-server 之上（包含）
- vue-cli-service 命令：提供了 serve 命令、build 命令和 inspect 命令
- 一个开发环境依赖（包含）
- CLI插件：向Vue项目提供可选功能的 npm 包
- 内建插件：@vue/cli-plugin-
- 社区插件：vue-cli-plugin-
- 执行 vue-cli-service 命令时，自动解析并加载 package.json 中列出的所有 CLI 插件
安装
首先安装node，版本要求在8.9或更高版本。
安装命令：
// 局部安装
npm i @vue/cli
yarn add @vue/cli
// 全局安装
npm i -g @vue/cli
yarn add -g @vue/cli
检查安装是否成功：
vue --version
基础
搭建基本项目
-
快速构建命令
vue serve和vue build（必须是在全局安装@vue/cli-service-global 依赖的前提下）npm install -g @vue/cli-service-global -
vue serve命令选项Usage: serve [options] [entry] 在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器 Options: -o, --open 打开浏览器 -c, --copy 将本地 URL 复制到剪切板 -h, --help 输出用法信息 -
vue build命令选项Usage: serve [options] [entry] 在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器 Options: -t, --target <target> // 构建目标（app | lib | wc | wc-async，默认值：app） -n, --name <name> // 库的名字或 Web Components组件的名字（默认值：入口文件名） -d, --dest <dir> // 输出目录（默认值：dist） -h, --help // 输出用法信息 -
快速创建一个项目命令
vue create
插件和preset
- 插件的注册与声明
- Preset
- 一个 Vue CLI preset 是一个包含创建新项目所需预定义选项和插件的 JSON 对象，让用户无需在命令提示中选择它们
CLI 服务
-
vue-cli-service serve 启动一个开发服务器并附带开箱即用的模块热加载（可以通过 devServer 配置开发服务器）
用法：vue-cli-service serve [options] [entry] 选项： --open 在服务器启动时打开浏览器 --copy 在服务器启动时将 URL 复制到剪切版 --mode 指定环境模式 (默认值：development) --host 指定 host (默认值：0.0.0.0) --port 指定 port (默认值：8080) --https 使用 https (默认值：false) -
vue-cli-service build，在输出目录产生一个环境的包，自动进行代码压缩，vendor chunk splitting，内联chunk manifest 在HTML里面。
用法：vue-cli-service build [options] [entry|pattern] 选项： --mode 指定环境模式 (默认值：production) --dest 指定输出目录 (默认值：dist) --modern 面向现代浏览器带自动回退地构建应用 --target app | lib | wc | wc-async (默认值：app) --name 库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名) --no-clean 在构建项目之前不清除目标目录 --report 生成 report.html 以帮助分析包内容 --report-json 生成 report.json 以帮助分析包内容 --watch 监听文件变化 -
vue-cli-service inspect，审查 vue-cli 项目的 webpack 配置
用法：vue-cli-service inspect [options] [...paths] 选项： --mode // 指定环境模式，默认值：development
查看所有可用命令
npx vue-cli-service help
缓存和并行处理
cache-loader：默认为 Vue/Babel/TypeScript 编译开启，文件会缓存在 node_modules/.cache 中。
开发
浏览器的兼容性
HTML 和 静态资源
css相关
webpack相关
环境变量和模式
构建目标
部署
