一个基于Vue3.4+Element-plus+Vite搭建的轻量级后台管理模板,本项目分一个登录接口和一个用户信息接口,并且采用mockjs模拟数据,有简单的权限划分。 ✨ 效果展示 在线预览 xjy_admin 仓库地址Gitee xjy_dmin 首页 🏅 技术栈 🌈 项目基本配置 项目全局配置 代码统一规范 Eslint:语法规则和代码风格检查 Prettier:美...
将项目文件一股脑全部复制到两个文件夹,后面我们再慢慢将里面不属于当前目类的文件删掉就行 core文件夹下建立vite.lib.config.ts,与原vite.config.ts区别开,内容可参考其他人的教程,我这里是直接复制的vite.config.ts,然后将一些不能用的删掉,加上出口文件夹,入口文件夹,rollupoption等等 // 添加出口文件夹 lib(...
importAutoImportfrom"unplugin-auto-import/vite";importComponentsfrom"unplugin-vue-components/vite";plugins:[AutoImport({// 自动导入 Vue 相关函数,如:ref, reactive, toRef 等imports:["vue"],eslintrc:{enabled:true,// 是否自动生成 eslint 规则,建议生成之后设置 falsefilepath:"./.eslintrc-auto-i...
vite.config.ts 配置 css: { preprocessorOptions: { scss: { javascriptEnabled: true, // 自动导入定制化样式文件进行样式覆盖 additionalData: ` @use "@/styles/element/index.scss" as *; @use "@/config/public.scss" as *; `, }, }, }, 🔑 项目集成 mock.js mock.js ...
1、vite在开发阶段没有打包过程,他是直接启动一个服务器,启动后就啥事也没有做 2、请求一个模块到开发服务器; 3、开发服务器编译模块,根据页面用所需要的依赖去加载文件 4、加载完成后,开发服务器把编译的结果返回给页面 这使得提高了我们在开发阶段运行的效率 ...
而且Element Plus + Vite 也出了一段时间了,是时候该上手体验分享一波了。 主要是要熟练一下 Vue3,好准备用 Vue3 重构一下自己的网站项目: blog-vue-typescript ,计划是过年期间会着手重构这个项目,年后会上线。 1. 初化化项目 全局安装 vite-app ...
Vue 的作者尤雨溪的 Twitter 已经说了 Vite 是vue cli的替代，仅支持 Vue 3.0，所以想用 Vite 那么...
项目地址 vite.config.ts 插件和vite配置 import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import path from "pa
创建vite工程 上面命令创建的是 vue3 JS项目,如果你使用 TypeScript 可以选择模板vue-ts 可用的vite模板可以在vite官方网站上找到: https://cn.vitejs.dev/guide/ 下面是开发 vue 项目必备的几个依赖 pnpm add element-plus vue-router@4 pinia axios ...
2、动态路由component引入,vite如何动态获取文件; 本项目中的路由权限不是通过meta中的roles: ['admin']字段进行匹配的,而是通过接口获取路由表数据,获取之后数据处理成MenuTree; 获取views文件夹下的所有vue文件; const loadView = import.meta.glob('../views/**/*.vue'); ...