本文是对 Vue CLI 官方文档 复习的摘抄笔记（非原创，侵删）

介绍

Vue CLI

• 基于 Vue.js 进行快速开发的系统，提供

1. @vue/cli 交互式项目脚手架
2. @vue/cli + @vue/cli-service-global 零配置原型开发
3. 运行时 runtime 依赖 @vue/cli-service
4. 官方插件合集
5. 图形化创建管理的用户界面
6. 每个工具配置调整灵活，无需 eject

Vue CLI 独立组件

CLI

• CLI( @vue/cli )是全局安装包，提供 vue 命令；
• vue create 项目名 快速搭建新项目；
• vue serve 构建想法的原型；
• vue ui 通过 GUI 进行项目管理

CLI Service

• CLI 服务 ( @vue/cli-service )是开发环境依赖，局部安装在 @vue/cli 创建的项目中
• 构建于 webpack 和 webpack-dev-server 之上，包含：

1. 加载其他 CLI 插件服务；
2. 优化过的内部 webpack 配置；
3. 局部的 vue-cli-service 命令，提供 serve build inspect 命令

CLI 插件

• 向 Vue 项目提供可选功能的插件包，包含 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等；
• 内建插件名 @vue/cli-plugin-, 社区插件名 vue-cli-plugin-
• 在项目内部运行 vue-cli-service 时，会自动解析加载 package.json 列出的所有 CLI 插件

安装

• 安装：npm install -g @vue/cli 或 yarn global add @vue/cli
• 查看版本号： vue --version
• 升级： npm update -g @vue/cli 或 yarn global upgrade --latest @vue/cli

基础

快速原型开发

安装全局扩展： npm install -g @vue/cli-service-global 在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器： vue serve 文件名 在开发环境模式下零配置构建一个 .js 或 .vue 文件： vue build 文件名

创建一个项目

0. 帮助查询：vue create --help
   
1. 创建项目 hello world：vue create hello-world
   
2. 按需选择配置：
   
3. 成功创建后命令行显示如图，按照步骤运行 cd hello-world 和 yarn serve，得到可以访问页面的本地/内网地址：
   
   
4. 得到创建后的 hello-world 项目目录：
   
   
5. 修改 HelloWorld.vue 文件，然后在 8080 端口得到属于自己的 HelloWorld 页面：
   

Reference List
Vue CLI 文档