vue-cli创建vue2或vue3新项目步骤【留底收藏】

vue-cli创建vue2或vue3新项目步骤

一、安装

1. 安装：node

(已安装忽略，命令行：node -v 检查是否成功）

• 方式一： 官网 https://nodejs.org/en/
  一直下一步安装结束（境外资源下载稍慢）
• 方式二： 腾讯管家自带的 【软件管理】或者 https://pc.qq.com/ 搜索node下载安装（很快，其他软件中心自测）

2.cnpm或 yarn安装（非必须，npm也可以的）

yarn安装：npm install -g yarn 查看版本：yarn -v
cnpm安装：npm install -g cnpm -registry=http://registry.npm.taobao.org 查看版本：cnpm -v
（备注：不要用npm install cnpm -g安装，不要设置https的淘宝源地址，会提示证书过期被拦截：request to https://registry.npm.taobao.org/cnpm failed, reason: certificate has expired）

3.安装脚手架：vue-cli

npm方式：npm install -g @vue/cli
cnpm方式：cnpm install -g @vue/cli
yarn方式：yarn global add @vue/cli

.

二、创建项目

备注：项目名不能有大写字母（示例中：project-name）。可用短横线、下划线。和命名react项目名一致

方式一：vue create project-name （可以创建vue2或者vue3，yarn方式已支持 ）

第一个： 创建纯净版 vue2，（不含router、vuex、ts、单元测试等）
第二个： 创建纯净版 vue3，（同上）
第二个： 自定义 创建，（空格键：切换选中，enter回车：选择结束 - 执行）

其他按键说明：
上下键：上下移动。a 键：切换选择所有。i 键：反转选择选项

(*) Choose Vue version //选择vue版本 2或者3
( ) Babel // 支持高阶语法转换
( ) TypeScript // 支持使用 TypeScript 书写源码
( ) Progressive Web App (PWA) Support // 支持PWA
( ) Router // 路由
( ) Vuex // store
( ) CSS Pre-processors // CSS 预处理器
( ) Linter / Formatter // 代码风格检查和格式化
( ) Unit Testing // 支持单元测试
( ) E2E Testing // 支持E2E测试

一般选择：Babel，Router，Vuex，CSS Pre-processors。

至于代码格式化，开发工具中都有格式化插件，基本上不需要

或

方式二：vue init webpack project-name （只能创建vue2）

参数说明：
Project name（工程名）:回车
Project description（工程介绍）：回车
Author：作者名
Vue build（是否安装编译器）:回车
Install vue-router（是否安装Vue路由）：回车
Use ESLint to lint your code（是否使用ESLint检查js代码）：n
Set up unit tests（安装单元测试工具）：n
Setup e2e tests with Nightwatch（是否安装端到端测试工具）：n
Should we run npm install for you after the project has been created? (recommended)：回车。

.

三、打开运行

打开项目：cd project-name
运行项目：npm run dev 或 cnpm run dev 或 yarn dev