一谣光、開發(fā)環(huán)境：
（1）罩锐、去Node.js 官網(wǎng)安裝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設(shè)置鏡像:
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設(shè)置為淘寶鏡像
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項(xiàng)目
（1）堪滨、安裝全局vite
yarn global add create-vite-app （好像失效了）
可以改成這個(gè)創(chuàng)建
yarn create vite 或者 npm create vite@latest
安裝成功之后有兩個(gè)指令
create-vite-app+項(xiàng)目名或cva+項(xiàng)目名，用于創(chuàng)建項(xiàng)目蕊温。
（2）袱箱、創(chuàng)建項(xiàng)目（項(xiàng)目名：mangoUI）
cva mangoUI
創(chuàng)建成功之后有三個(gè)指令cd mangoUI和yarn install，yarn dev依次執(zhí)行义矛，項(xiàng)目創(chuàng)建成功发笔。
注意：使用vscode打開最好安裝一個(gè)插件：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對(duì)象
- 新建router對(duì)象
- app.use(router)
- 添加<router-view>
- 添加<router-link>
情景一：打開main.js，初始化路由垃杖。
情景二：（使用ts語法）將main.js改成main.ts男杈，初始化路由。別忘了index.html引用main.js路徑后續(xù)要改成main.ts调俘。
這時(shí)組件引用路徑會(huì)報(bào)一個(gè)錯(cuò)誤势就，這是因?yàn)門ypescript只能理解.ts文件，不能理解.vue文件脉漏。
解決報(bào)錯(cuò)方法：在根目錄新建目錄shims-vue.d.ts，告訴TS如何理解.vue文件
declare module '*.vue' {
import {ComponentOptions} from 'vue'
const componentOptions:ComponentOptions
export default componentOptions
}
如果關(guān)閉shims-vue.d.ts還是報(bào)錯(cuò)袖牙，再在根目錄創(chuàng)建一個(gè) tsconfig.json 文件
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": false,
"jsx": "preserve",
"moduleResolution": "node"
}
}
