方式一：VueCLI创建0. 准备1. 安装好Vue-CLI1. 创建项目2. 回车以后选择Manually select features3. 设置配置信息，选择TypeScript4. 选择版本3.x5. 后面配置6. 查看项目目录7. 运行项目8. 安装组件8. 引入方式二：Vite创建
方式一：VueCLI创建
0. 准备
1. 安装好Vue-CLI
npm install -g @vue/cli
新建文件夹VueDemo，在其中输入powershell回车打开PowerShell终端
1. 创建项目
输入命令
vue create xxxx
2. 回车以后选择Manually select features
注解：前两个表示默认模板，一个表示vue2一个表示vue3，如果没有发现vue3选项表示你的VueCLI是旧版本。因为我们要使用TS进行开发，在前两项默认模板中是没有TS支持的，所有要选择第三项表示手动选择特效。
3. 设置配置信息，选择TypeScript
选择TypeScript，使用空格键选择。
- babel是用来适配一些js的新特性，浏览器还不支持的，但是可以通过其它方式实现它的语法
- typescript就是启用typescript支持
- PWA这个是渐进式web应用，如果用不上，不需要选
- Router是vue-router
- css pre-processors是用来支持css预处理器的，less，sass这些
- linter是用来做代码检验的，如代码缩进，规范合不合格之类的，都是它来校验
4. 选择版本3.x
5. 后面配置
- class-style component syntax，像react的风格，是否启用类作为组件模型，这个建议开启。
- 配置babel对ts，jsx的转义，要开启
- 路由管理模式，Y是HTML5 history，N是hash模式（默认是Yes）
- 预处理器，根据自己习惯选择（我选择的是Sass/SCSS (with dart-sass)）
- 代码风格约束的选择项
ESLint with error prevention only // 只进行报错提醒
ESLint + Airbnb config // 不严谨模式
ESLint + Standard config // 正常模式
ESLint + Prettier // 严格模式
TSLint (deprecated) // TypeScript格式验证工具
- lint 规则
- lint on save：代码文件中有代码不符合 lint 规则时，会在 compile 阶段提示 warning。如果出现了语法错误，会直接在页面上显示 error
- lint and fix on commit：代码除了语法错误导致的 error 外不会提示 warning。而是在当前项目进行 git commit 操作的时候，通过 githook，在 pre-commit 阶段执行 lint 和 fix 操作，自动帮我们把有语法错误的地方修改为符合规范。
- 置配置文件的管理路径，建议选第一个，每一个单独生成配置文件，第二个都会堆在package.json
- 把这些配置是否保存为模板，选择N
6. 查看项目目录
7. 运行项目
yarn serve
8. 安装组件
# 配置饿了么UI组件 npm install element-plus --save # 安装进度条 npm install nprogress --save
8. 引入
# 这种方式可能会报错，使用下面的方式 import pathToRegexp from 'path-to-regexp' import * as pathToRegexp from 'path-to-regexp'