工欲善其事必先利其器
前序：
前提：
- 鉴于web的直观性和多样性，更多是选择web而不是控制台创建项目，当然后续生产上更多是不变的模板加工具快速创建
- 和2.X步骤差不多，仅多了版本切换选择
- windos7及以上版本（linux或max环境下的，请自行找教程，大同小异）
- vscode（当然记事本也可，版本不限，只是可能会与本文不太一样，既然记事本都可以，那就不用多于关心这些了，只是可能开发效率没有那么高而已）
- Vue CLI 4.5 +（当前版本 v4.5.8，特别要注意，若不是这个，慎重看此文）
- Node.js （本文当前版本 v12.18.3，node的适用版本也需要注意）未安装请看其他相关教程，此文默认已安装
- 搬运官网文档的三种安装方式，其中灵活性依然为cli和web，新手推荐web，vite没有相关的选择，简洁模板可以选择它，或者自己创建好，然后利用版本工具作为模板快速共享均可
一：步骤：
1 —— 命令行方式创建项目：
前奏 —— 使用npm（依赖包管理工具）安装 Vue CLI
// 若已安装，除非版本一致，否则此命令将会重装最新版
npm install -g @vue/cli
1. 切换项目所在位置
I:
cd I:\VuePro
2. 创建项目 （后缀带上-n为去掉git版本控制，默认以git为版本，如果像我一样是使用svn的就可以加上）
vue create v3-demo
vue create v3-demo -n
2.0 回车显示结果
// 直接选择Vue 3 Preview 也可，此处选择最后一项，自行配置
Vue CLI v4.5.8
? Please pick a preset:
config ([Vue 2] router, vuex, less, babel, typescript, eslint)
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features
2.1 回车显示结果
// 第一行必选，毕竟需要切换到Vue 3，其他随意，最简demo仅仅显示文字并不需要太多
Vue CLI v4.5.8
? Please pick a preset: Manually select features
? Check the features needed for your project:
>(*) Choose Vue version
(*) Babel
(*) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
2.2 回车显示结果
// 毫无疑问选择 3.x 当然你可以重回2.x
Vue CLI v4.5.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with
2.x
> 3.x (Preview)
2.3 回车显示结果
// 默认选择就不浪费空间放这些不重要的选择过程了
Vue CLI v4.5.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
// 看自己需要是否保存该模板设置，此处自行选择
? Save this as a preset for future projects? Yes
? Save preset as: VUE 3 Base
3. 最后等待创建完成后打开或运行项目
项目文件右键选择 IDE或编辑器 比如 vs core 打开（前提装有对应软件）或者 命令行直接运行项目
$ cd v3-demo
$ npm run serve
2 —— vue Web方式创建项目：
前奏 —— 使用npm（依赖包管理工具）安装 Vue CLI
// 若已安装，除非版本一致，否则此命令将会重装最新版
npm install -g @vue/cli
1. 命令行启动web服务
vue ui
命令运行
1. 0 web页面：
首页
1. 1 创建项目：
详情
预设
功能图一
功能图二
配置
保存预设
完成创建
编译运行
运行结果
3 —— vue vite方式创建项目：
1. 创建项目
npm init vite-app v3-demo
2. 编译运行项目
npm install
npm run dev
3. Edge （其他浏览器需要bable转换）打开项目链接，运行结果：
