vue-cli脚手架Vue2.x与Vue3.x安装与预设

一、vue安装

（1）cdn:使用html写法的时候可以直接引入，虽然引用起来非常的方便，一旦官方修改内容有可能影响项目部分功能。

<script src="https://unpkg.com/vue@next"></script>//现已更新至3.0

 当然也可以直接下载官方js文件进行引入，这样就可以避免上述问题了。

（2）npm：使用npm需要下载node.js 下载地址：https://nodejs.org/zh-cn/download/

$ npm install vue@next

 （3）命令行工具 (CLI)：本文主要讲述CLI脚手架的创建方式

二、安装VueCLI包

在安装前需要配置全局环境，官方在官网中有关于以前版本的警告

包名称从 更改vue-cli为@vue/cli。如果您vue-cli全局安装了以前的（1.x 或 2.x）软件包，则需要先使用npm uninstall vue-cli -g或卸载它yarn global remove vue-cli。

节点版本要求

Vue CLI 4.x 需要Node.js 8.9 或更高版本（推荐 v10+）。您可以使用n、nvm或nvm-windows在同一台机器上管理多个版本的 Node 。

（1）全局安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

（2）查询版本：可以确认是否安装成功

vue --version

 （3）升级全局

npm update -g @vue/cli
# OR
yarn global upgrade --latest @vue/cli

三、 创建项目

在本地的git文件夹中cmd输入下面代码，vue_demo：是脚手架项目文件夹名称

vue create vue_demo

 文件创建以后会弹出配置选项，如果选择第一个（Vue 2）或第二个（Vue 3）,直接默认配置脚手架，第三个是手动选择要素

 四、手动选择要素（Manually select features）

 1.选择括号带 “ * ” 的即可，上下键移动 “ > ” 光标，空格键选中或取消。选择完成点击回车（enter）

 2.这里选择Vue框架版本，选中回车，2.x与3.x后面步骤都是一样的

 3.路由器历史模式，键盘输入Y,回车

 4.ESLint 是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具,选择严格模式（ESLint + Prettier），当然大家也可以选择标准模式（ESLint + Standard config）

 5.选择语法检查方式，这里选择（Lint on save）回车

 6.配置文件放置位置选择，

In dedicated config files  等同于每个文件单独放置，

In package.json              全部放置package.json 文件中（我们选择package.json）

 7.询问是否将此保存为将来项目的预设？输入y，回车

 8.预设起名（填写保存预设，下次可以按本次选择直接配置。不写直接回车，不保存本次预设记录）

9.安装完毕后根据提示，进入文件夹，启动命令启动项目

cd vue_demo：进入文件夹

npm run serve：启动Vue

 以上是我一步步截屏写的，如有错误大家可以留言指点，有不懂的地方留言我会回答。