Vue3+vite2+element-plus+ts build a project

Time:2022-6-27

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

Vue3+vite2+element-plus+ts build a project

configuration file

6. Create index d.ts

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

Vue3+vite2+element-plus+ts build a project

Configure TS type

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, theaddRoutesCurrently only availableaddRouteadd 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 useimportYou 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.globperhapsimport.meta.globEagerThe 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-iconsThe 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

Vue3+vite2+element-plus+ts build a project

Home page preview

Add cesium 3D components

Vue3+vite2+element-plus+ts build a project

3D video

Add a openlayers 2D component

Vue3+vite2+element-plus+ts build a project

2D video
  • 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

Recommended Today

redis jedis application

package com.xzit.test; import lombok.extern.slf4j.Slf4j; import redis.clients.jedis.Jedis; import java.util.List; import java.util.Set; //1. Use jedis to complete the New Year's Day annual meeting lottery system (refer to the second day's case) @Slf4j(topic = “c.Reward”) public class Reward { public static void main(String[] args) { Jedis jedis = new Jedis(“192.168.44.4″,6379); //s_add(jedis,”cj001”, “user:1001”, “user:1002”, “user:1003”, “user:1004″); s_pop(jedis,”cj001”,1); } public […]