花了幾天用 vue3+ vite2+ element-plus+ ts 搭了個 極簡版骨架型數據管理系統，使用靜態數據模擬動態路由，路由攔截，登錄頁面鑒權等，使用了iconify字體圖標，整合了cesium,openlayers二三維開發包
1、 安裝vite
第一步當然是vite安裝了
npm init vite@latest
2、創建項目
npm init vite@latest vue3-vite-elementplus-ts --template vue
3、安裝ts，elmentPlus等
npm install vue-router@next axios -S
npm install typescript element-plus -D
4、配置vite.config.ts
引入對應的插件，配置別名，代理等，大致是這樣
5、配置tsconfig.json
配置需編譯文件目錄，模塊類型等，大致是這樣
6、創建index.d.ts
src目錄下創建index.d.ts定義外部模塊ts類型，大致如下
7、配置路由
這個路由【配置和原來vue2 大致相同，只是在引入方式小有改動
如import { createRouter, createWebHashHistory } from 'vue-router'， 還有就是在動態添加路由時，取消了addRoutes 目前只能使用addRoute 添加
8、注意事項
其中使用vite 需要注意的是 靜態數據的引入，如img, 本地json，動態路由等，
1）img 可以使用 import 也可以直接使用別名引入，我更喜歡使用別名
如
<img src="@/assets/logo.png"
alt=""><span>Data Manage Platform</span>
2） 如讀取testMenu.json
本地json即目錄都需要使用import.meta.glob 或者import.meta.globEager進行引入，前者為異步加載，后者為同步加載
const modulesObtainJson = import.meta.glob('../../../public/*.json')
modulesObtainJson['../../../public/testMenu.json']().then((mod) => {
const accessedRoutes = mod.default;
commit('SET_ROUTES', accessedRoutes)
resolve(accessedRoutes)
})
3） 動態加載路由（不可使用import()這個打包后無法訪問）如
function getMoulesByRoute():Function {
// 把所有的數據讀出來
const modulesGlob = import.meta.globEager("./views/**/**.vue");
return (componentStr: string):any => {
let finalComp = null;
Object.keys(modulesGlob).some((key) => {
if (key === componentStr) {
finalComp =modulesGlob[key].default;
return true;
}
});
return finalComp;
}
}
4） svg 使用
注意使用svg 需要先安裝vite-plugin-svg-icons , 而vite 版本不可以太低，版本過低 在main.ts 增加svg注冊 會異常
如
import 'virtual:svg-icons-register';
測試使用 "vite": "^2.2.3", 會提示錯誤，后來更改為了"vite": "^2.6.10",就ok了
9、預覽
增加cesium三維組件
增加一個openlayers二維組件
-
搭建中踩過動態路由生產環境報錯，json循環依賴，路由跳轉 'window.webkitStorageInfo' is deprecated. 瀏覽器卡死等問題，svg加載問題
-
最終所有問題都已解決了，這個版本親測下載即可以使用，目前只是一個最簡單的系統骨架，沒有過多的自定義組件。其它功能模塊需要
自行根據業務添加完善,自由發揮。喜歡的自取vue3-vite-elementPlus-ts，也順便賞個Star吧，3Q.。最后祝大家天天好心情，bug繞道行。