It took a few days to build a minimalist skeleton data management system with vue3+ vite2+ element plus+ ts, using static data to simulate dynamic routing, route interception, login page authentication, etc., using iconify font icons, and integrating the two-dimensional and three-dimensional development packages of cesium and openlayers
1. Install vite
The first step, of course, is to install vite
npm init [email protected]
2. Create project
npm init [email protected] vue3-vite-elementplus-ts --template vue
3. Install ts, elmentplus, etc
npm install [email protected] axios -S
npm install typescript element-plus -D
4. Configure vite config. ts
Introduce corresponding plug-ins, configure aliases, proxies, etc. roughly
5. Configure tsconfig json
The configuration needs to compile the file directory, module type, etc. roughly

6. Create index d.ts
Create index d. TS defines the external module TS type, approximately as follows

7. Configure routing
The configuration of this route is roughly the same as that of the original vue2, except for minor changes in the introduction method
asimport { createRouter, createWebHashHistory } from 'vue-router'
In addition, when dynamically adding routes, theaddRoutes
Currently only availableaddRoute
add to
8. Precautions
When using vite, you should pay attention to the introduction of static data, such as img, local JSON, dynamic routing, etc,
1) IMG can useimport
You can also use alias to import directly. I prefer to use alias
as
<img src="@/assets/logo.png"
><span>Data Manage Platform</span>
2) Such as readingtestMenu.json
Both local JSON and directories need to be usedimport.meta.glob
perhapsimport.meta.globEager
The former is asynchronous loading and the latter is synchronous loading
const modulesObtainJson = import.meta.glob('../../../public/*.json')
modulesObtainJson['../../../public/testMenu.json']().then((mod) => {
const accessedRoutes = mod.default;
commit('SET_ROUTES', accessedRoutes)
resolve(accessedRoutes)
})
3) Dynamically load routes (cannot be accessed after packaging with import ()) such as
function getMoulesByRoute():Function {
//Read out all the data
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 usage
Note that SVG needs to be installed firstvite-plugin-svg-icons
The vite version cannot be too low. If the vite version is too low, the main TS adding SVG registration will cause exceptions
as
import 'virtual:svg-icons-register';
Test use"vite": "^2.2.3"
, will prompt an error, and later changed to"vite": "^2.6.10",
OK
9. Preview

Add cesium 3D components

Add a openlayers 2D component

-
When stepping on the dynamic route during setup, the production environment reports an error, JSON circularly depends, and the route jumps to’window webkitStorageInfo’ is deprecated. Browser stuck, SVG loading
-
Finally, all the problems have been solved. This version can be used after the user-friendly test Download. At present, it is only the simplest system skeleton without too many custom components. Required for other functional modules
Add and improve according to the business and give full play to it freely. Take what you likevue3-vite-elementPlus-tsAnd I’ll give you oneStarCome on, 3q. Finally, I wish you allGood mood every day, bug detour。