花了几天用 vue3+ vite2+ element-plus+ ts 搭了个 极简版骨架型数据管理系统,使用静态数据模拟动态路由,路由拦截,登录页面鉴权等,使用了iconify字体图标,整合了cesium,openlayers二三维开发包

1、 安装vite

第一步当然是vite安装了

  1. npm init vite@latest

2、创建项目

  1. npm init vite@latest vue3-vite-elementplus-ts --template vue

3、安装ts,elmentPlus等

  1. npm install vue-router@next axios -S
  2. 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 也可以直接使用别名引入,我更喜欢使用别名

  1. <img src="@/assets/logo.png"
  2. alt=""><span>Data Manage Platform</span>

2) 如读取testMenu.json

本地json即目录都需要使用import.meta.glob 或者import.meta.globEager进行引入,前者为异步加载,后者为同步加载

  1. const modulesObtainJson = import.meta.glob('../../../public/*.json')
  2. modulesObtainJson['../../../public/testMenu.json']().then((mod) => {
  3. const accessedRoutes = mod.default;
  4. commit('SET_ROUTES', accessedRoutes)
  5. resolve(accessedRoutes)
  6. })

3) 动态加载路由(不可使用import()这个打包后无法访问)如

  1. function getMoulesByRoute():Function {
  2. // 把所有的数据读出来
  3. const modulesGlob = import.meta.globEager("./views/**/**.vue");
  4. return (componentStr: string):any => {
  5. let finalComp = null;
  6. Object.keys(modulesGlob).some((key) => {
  7. if (key === componentStr) {
  8. finalComp =modulesGlob[key].default;
  9. return true;
  10. }
  11. });
  12. return finalComp;
  13. }
  14. }

4) svg 使用

注意使用svg 需要先安装vite-plugin-svg-icons , 而vite 版本不可以太低,版本过低 在main.ts 增加svg注册 会异常

  1. 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绕道行

vue3+vite2+element-plus+ts搭建一个项目的更多相关文章

  1. vue 快速入门 系列 —— 使用 vue-cli 3 搭建一个项目(上)

    其他章节请看: vue 快速入门 系列 使用 vue-cli 3 搭建一个项目(上) 前面我们已经学习了一个成熟的脚手架(vue-cli),笔者希望通过这个脚手架快速搭建系统(或项目).而展开搭建最好 ...

  2. 使用vue-cli3搭建一个项目

    前面说过用vue-cli3快速开发原型的搭建,下面来说一下搭建一个完整的项目 首先我们可以输入命令(创建一个项目名为test的项目) vue create test 输完这个命令后,会让你选择配置项, ...

  3. vue 快速入门 系列 —— 使用 vue-cli 3 搭建一个项目(下)

    其他章节请看: vue 快速入门 系列 使用 vue-cli 3 搭建一个项目(下) 上篇 我们已经成功引入 element-ui.axios.mock.iconfont.nprogress,本篇继续 ...

  4. 从0搭建vue3组件库: 如何完整搭建一个前端脚手架?

    相信大家在前端开发中都使用过很多前端脚手架,如vue-cli,create-vite,create-vue等:本篇文章将会为大家详细介绍这些前端脚手架是如何实现的,并且从零实现一个create-kit ...

  5. 【gin-vue-admin】 使用go和vue 快速搭建一个项目模板

    gin-vue-admin gin+vue开源快速项目模板 项目地址:https://github.com/piexlmax/gin-vue-admin 增加了 micro-service-test分 ...

  6. [vue学习]快速搭建一个项目

    安装node.js 官网:https://nodejs.org/en/ 淘宝NPM镜像(npm是外网,用国内代理下载安装贼快) $ npm install -g cnpm --registry=htt ...

  7. Vue3实战系列:Vue3.0 + Vant3.0 搭建种子项目

    最近在用 Vue3 写一个开源的商城项目,开源后让大家也可以用现成的 Vue3 大型商城项目源码来练练手,目前处于开发阶段,过程中用到了 Vant3.0,于是就整理了这篇文章来讲一下如何使用 Vue3 ...

  8. vuejsLearn---通过手脚架快速搭建一个vuejs项目

    开始快速搭建一个项目 通过Webpack + vue-loader 手脚架 https://github.com/vuejs-templates/webpack 按照它的步骤一步一步来 $ npm i ...

  9. Spring日记_02之搭建一个新项目

    程序 表现层 业务层 持久层 从持久层开始写 总结如何搭建一个项目 1.新建一个Maven项目 2.可能新建之后会有错,右键Deployment Descriptor: note, 选择Generat ...

  10. 如何快速搭建一个 Node.JS 项目并进入开发?

    了解:如何快速搭建一个项目并进入开发? 在此不概述 Node.JS 的历史以及发展过程. 因为之前接触过通过 Java 开发语言,所以明确地知道一个服务器所需的文件,以及一个服务器所需要的操作. 那么 ...

随机推荐

  1. File 未释放文件权柄问题处理

    Unreleased Resource: Files Abstract 程序可能无法释放某个文件句柄. Explanation 程序可能无法成功释放某一个文件句柄. 资源泄露至少有两种常见的原因: - ...

  2. Goravel ORM 新增模型关联,用 Golang 写关联也可以跟 Laravel 一样简单

    关于 Goravel Goravel 是一个功能完备.具有良好扩展能力的 Web 应用程序框架.作为一个起始脚手架帮助 Golang 开发者快速构建自己的应用.框架风格与 Laravel 保持一致,让 ...

  3. Unity JobSystem使用及技巧

    什么是JobSystem 并行编程 在游戏开发过程中我们经常会遇到要处理大量数据计算的需求,因此为了充分发挥硬件的多核性能,我们会需要用到并行编程,多线程编程也是并行编程的一种. 线程是在进程内的,是 ...

  4. 【随笔】Axios delete传递数组问题

    pre { overflow-y: auto; max-height: 300px } img { max-width: 500px; max-height: 300px } Axios delete ...

  5. react中登录注册 使用验证码验证

    后端接口 var express = require('express'); var router = express.Router(); var User = require('./../sql/c ...

  6. 基于开源的 ChatGPT Web UI 项目,快速构建属于自己的 ChatGPT 站点

    作为一个技术博主,了不起比较喜欢各种折腾,之前给大家介绍过 ChatGPT 接入微信,钉钉和知识星球(如果没看过的可以翻翻前面的文章),最近再看开源项目的时候,发现了一个 ChatGPT Web UI ...

  7. Django笔记十三之select_for_update等选择和更新等相关操作

    本篇笔记将介绍 update 和 create 的一些其他用法,目录如下: get_or_create update_or_create select_for_update bulk_create b ...

  8. [MySQL]set autocommit=0与start transaction的区别[转载]

    set autocommit=0指事务非自动提交,自此句执行以后,每个SQL语句或者语句块所在的事务都需要显示"commit"才能提交事务. 1.不管autocommit 是1还是 ...

  9. 【D01】Django中实现带进度条的倒计时功能(简易版)

    首先说明简易版是只有一个 倒计时 和一个 进度条,页面加载后自动开始计时,下次计时需要手动刷新页面. 后续会更新实现完整的倒计时功能的文章 前期准备 前端框架 你需要准备一些前端框架:Bootstra ...

  10. PHP开发者交流群

    PHP开发者交流群 欢迎大家加入学习讨论 QQ群(493834732)