安装

1、安装node

vue 3需要node10以上版本

node官网下载地址以往的版本 | Node.js

2、安装vue/cli

如果已经全局安装过旧版本的vue-cli

npm uninstall vue-cli -g //yarn global remove vue-cli

然后安装

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

为什么要先卸载vue-cli，在安装vue/cli

如果是安装vue3以下版本的脚手架，命令npm install -g vue-cli@版本号
如果是安装3以上版本的脚手架，命令npm install -g @vue/cli@版本号

参考脚手架vue-cli和@vue/cli的搭建及区别

执行vue-v 查看版本

创建项目

1、新建一个文件夹,然后右键选择打开命令行窗口
2、在命令窗口输入指令 vue create 项目名称

选择初始化项目的配置：

第一步：Default是自动安装，在这里我选择最后一个手动安装，按下回车键进行选择

①default（vue3 babel，eslint）：默认设置（直接enter）非常适合快速创建一个新vue3项目的原型，没有带任何辅助功能的 npm包

② default（vue2 babel，eslint）：默认设置（直接enter）非常适合快速创建一个新vue2项目的原型，没有带任何辅助功能的 npm包

③ Manually select features：自定义配置（按方向键 ↓）是我们所需要的面向生产的项目，提供可选功能的 npm 包

第二步：配置自定义设置

1 Check the features needed for your project: (Press to select,to toggle all, to invert selection)
2 ( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
3 ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
4 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
5 ( ) Router // vue-router（vue路由）
6 ( ) Vuex // vuex（vue的状态管理模式）
7 ( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
8 ( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
9 ( ) Unit Testing // 单元测试（unit tests）
10 ( ) E2E Testing // e2e（end to end） 测试

第三步：选择vue版本，我选择3.x

第四步：Use history mode for router” />

第六步： Where do you prefer placing config for Babel, ESLint, etc.?
Babel, PostCSS, ESLin等配置文件怎么存放, 是放到单独的配置文件中?还是package.json里? 这里方便配置清晰好看, 我选择每个配置单独文件。

第七步：Save this as a preset for future projects?

是否需要保存当前配置，在以后的项目中可快速构建” /> 8 ( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）

Pick a linter / formatter config” />

Pick a unit testing solution: (Use arrow keys)

选择unit testing类型

Cypress (Test in Chrome, Firefox, MS Edge, and Electron)

Cypress 支持浏览器：Chrome、Firefox、Electron

Pick browsers to run end-to-end test on (Press to select,to toggle all, to invert selection, and to proceed)

. Save this as a preset for future projects” />

你也可以点击此处下载代码

https://gitee.com/pearwf/vue3-studay