Vite-vue3 架構設計
基礎信息
Gitee項目地址：https://gitee.com/pengchenggang/vite-vue3
1 創建vite-vue3 初始化腳本
$ npm init vite-app vite-vue3
$ cd vite-vue3 //進入項目目錄
$ npm install //安裝項目所需依賴
$ npm run dev //啟動項目
這里由於是新建的gitee項目，所以我找了一個臨時目錄初始化，然后又copy回vite-vue3目錄。
啟動項目后，如下圖。
2 安裝TypeScript
2.1 安裝ts && 生成 tsconfig.json
cnpm install typescript --save-dev
命令行運行tsc --init生成tsconfig.json文件
Tsconfig.json 幫助文檔
https://www.tslang.cn/docs/handbook/tsconfig-json.html
2.2 安裝vue3下ts的插件
cnpm install @vue/cli-plugin-typescript --save-dev
2.3 vue.config.js添加支持ts
2.4 typescript-eslint 3個插件
cnpm install @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev
cnpm install @vue/eslint-config-typescript --save-dev
2.5 添加.eslintrc.js
2.6 vscode setting.json 配置自動eslint格式化
教程參考：
ts官方中文手冊
https://www.tslang.cn/docs/handbook/basic-types.html
掘金ts小冊
https://juejin.cn/book/6844733813021491207
參考文檔：
vue3項目中加入typescript https://www.jianshu.com/p/35eab26d7db0
3 安裝Router4.0
Router官方網站：
https://github.com/vuejs/vue-router-next
cnpm install –save vue-router@4
這里由於有@，所有--save要往前提 要不安裝不成功
4 安裝Vuex4.0
官方地址：
https://github.com/vuejs/vuex/tree/4.0
vuex4.0 說明文檔：
安裝命令：
cnpm install --save vuex@next
5 Vue 3 Babel JSX 插件
https://github.com/vuejs/jsx-next/blob/dev/packages/babel-plugin-jsx/README-zh_CN.md
安裝插件
cnpm install @vue/babel-plugin-jsx -D Then add the plugin to .babelrc: { "plugins": ["@vue/babel-plugin-jsx"] } 
Vue 3.0中jsx語法的使用
https://www.jb51.net/article/199650.htm
這里有說vue3 原生支持jsx，還有說是裝插件，反正現在能用了，下次起架子的時候再分析。
6 安裝ElementPlus
https://element-plus.gitee.io/#/zh-CN/component/installation
cnpm install element-plus –save
在jsx需要單獨從新引入，在template下直接使用，因為main.ts已經導入了。
7 其他問題
7.1 發布子目錄
"build": "vite build --base=/vite-vue3/"