一、搭建项目
（1）、查看node版本 node -v
（2）、使用nvm安装最新稳定版Node.js（建议将Node.js升级到最新的稳定版本）
命令：nvm install stable
（3）使用 Vite 快速搭建
npm init @vitejs/app
使用 选择输入的方式
或者可用命令直接创建项目
（4）、安装依赖 npm i @types/node --save-dev yarn install
（5）、启动项目 npm run dev
# 使用 nvm 安装最新稳定版 Node.js
nvm install stable
二、修改 Vite 配置文件
位于项目的根路径，项目的全局配置文件，启动时会自动读取该文件。 本次咱们就配置 @ 指向 src 目录、服务端口、打包路径、代理等。
【import { resolve } from 'path' 会报错找不到path模块
因为path是node.js的用法，但是此处事ts文件需要安装ts的类型识别文件】
★★★★★(通过$ npm create vite@latest创立vite我的项目的时候，在vite.confog.ts文件中增加alias别名时，想要引入node的path模块，会报错
起因：path模块是node.js内置的性能，然而node.js自身并不反对ts
解决方案：装置@types/node)
三、集成路由
（1）、安装支持vue3的路由（vue-router@4） npm i vue-router@4
（2）、创建 src/router/index.ts 文件
（3）、在main.ts配置
别名配置-----问题: 当你使用别名@, 会发现别名框架并没有配置 会出现提示 找不到模块“@/router/index”或其相应的类型声明
配置tsconfig.json
{ "compilerOptions": { "target": "esnext", "useDefineForClassFields": true, "module": "esnext", "moduleResolution": "node", "strict": true, "jsx": "preserve", "sourceMap": true, "resolveJsonModule": true, "esModuleInterop": true, "lib": ["esnext", "dom"], "baseUrl": "./", "paths":{ "@": ["src"], "@/*": ["src/*"], } }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], }
四、集成Vuex
（1）、安装支持Vue3的状态管理工具 vuex@next
npm i vuex@next
（2）、main.ts 文件挂载
import { createApp } from 'vue'import App from './App.vue'import router from '@/router/index'import store from '@/store/index'const app=createApp(App)app.use(router)app.use(store)app.mount('#app')
五、集成HTTP工具 Axios
（1）、安装 Axios (跟vue版本无关，安装最新即可)npm i axios
（2）、配置 Axios 根据常规规范，axios封装的方法放在 src/utils/http.ts
安装 npm install element-plus --save
import { createApp } from 'vue'import App from './App.vue'import router from '@/router/index'import store from '@/store/index'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'const app=createApp(App)app.use(router)app.use(store)app.use(ElementPlus)app.mount('#app')
（3）、使用 Axios 在需要使用的地方引入http.ts文件
import Http from '@/utils/http'export default defineComponent({ setup() { const store = useStore() const getData = () => { Http.get('url').then((res: Object) => { console.log(res) }) } return { store, getData } } })
