一、开发环境：
（1）、去Node.js 官网安装node
1、安装 Node.js >=12.0.0
（2）、配置git bash
npm config set registry https://registry.npm.taobao.org/
npm config set loglevel http
npm config set progress false
（3）安装yarn（yarn比npm更加好用）
yarn:npm install -g yarn
（4）、安装yarn淘宝源和npm淘宝源
yarn设置镜像:
yarn config set registry https://registry.npm.taobao.org -g
yarn config set disturl https://npm.taobao.org/dist -g
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/ -g
yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ -g
yarn config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/ -g
npm设置为淘宝镜像
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
npm config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/
二、搭建vite项目
（1）、安装全局vite
yarn global add create-vite-app （好像失效了）
可以改成这个创建
yarn create vite 或者 npm create vite@latest
安装成功
安装成功之后有两个指令
create-vite-app+项目名或cva+项目名，用于创建项目。
（2）、创建项目（项目名：mangoUI）
cva mangoUI
创建成功
创建成功之后有三个指令cd mangoUI和yarn install，yarn dev依次执行，项目创建成功。
注意：使用vscode打开最好安装一个插件：Vue 3 snippets，方便模板建立。
三、配置路由router
（1）、查看所有路由版本：
npm info vue-router versions
查看路由版本
与Vue3目前搭配的路由版本vue-router>=4.0.0
（2）、安装路由（vue-router>=4.0.0）
yarn add vue-router@4.0.0-beta.3
（3）、初始化路由
- 新建history对象
- 新建router对象
- app.use(router)
- 添加<router-view>
- 添加<router-link>
情景一：打开main.js，初始化路由。
main.js初始化路由
情景二：（使用ts语法）将main.js改成main.ts，初始化路由。别忘了index.html引用main.js路径后续要改成main.ts。
main.ts初始化路由
这时组件引用路径会报一个错误，这是因为Typescript只能理解.ts文件，不能理解.vue文件。
找不到模块
解决报错方法：在根目录新建目录shims-vue.d.ts，告诉TS如何理解.vue文件
declare module '*.vue' {
import {ComponentOptions} from 'vue'
const componentOptions:ComponentOptions
export default componentOptions
}
如果关闭shims-vue.d.ts还是报错，再在根目录创建一个 tsconfig.json 文件
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": false,
"jsx": "preserve",
"moduleResolution": "node"
}
}
