二十二、使用Vue脚手架Vue CLI

（一）说明

• Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）
• Vue Command Line Interface（命令行接口工具 ==> 脚手架）
• 文档

（二）具体步骤

1.全局安装@vue/cli

• 仅首次安装执行

npm install -g @vue/cli

2.切换到你要创建项目的目录，然后使用命令创建项目

vue create xxxx

3.启动项目

npm run serve

（三）备注

• 如出现下载缓慢请配置 npm 淘宝镜像

npm config set registry https://registry.npm.taobao.org

• Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpack 配置，请执行：

vue inspect > output.js

（四）关于不同版本的 Vue

1.vue.js 与 vue.runtime.xxx.js 的区别

• vue.js 是完整版的 Vue，包含：核心功能+模板解析器
• vue.runtime.xxx.js 是运行版的 Vue，只包含：核心功能，没有模板解析器

2.使用

• 因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用 template 配置项
• 需要使用 render 函数接收到的 createElement 函数去指定具体内容

（五）脚手架文件结构

​    |-- .gitignore：git版本管制忽略的配置
​    |-- babel.config.js：babel的配置文件
​    |-- package-lock.json：包版本控制文件
​    |-- package.json：应用包配置文件
​    |-- README.md：应用描述文件
​    |-- node_modules
​    |-- public
​    |   |-- favicon.ico：页签图标
​    |   |-- index.html：主页面
​    |-- src
​        |-- App.vue：汇总所有组件
​        |-- main.js：入口文件
​        |-- assets：存放静态资源
​        |   |-- logo.png
​        |-- components：存放组件
​            |-- HelloWorld.vue

1.生成目录结构

• 在需要生成目录的地方运行 mddir
• 会在文件夹下生成个带目录树的 md 文件

npm install mddir -g

2.vue.config.js 配置文件

• 使用 vue inspect > output.js 可以查看 Vue 脚手架的默认配置
• 修改 vue.config.js 可以对脚手架进行个性化定制
• 详情见：https://cli.vuejs.org/zh/