一个基于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(...
vite.config.ts 配置 css: { preprocessorOptions: { scss: { javascriptEnabled: true, // 自动导入定制化样式文件进行样式覆盖 additionalData: ` @use "@/styles/element/index.scss" as *; @use "@/config/public.scss" as *; `, }, }, }, 🔑 项目集成 mock.js mock.js ...
在vue运行项目时,其内部会执行webpack打包命令,打包完后把项目放入开发服务器中然后启动开发服务器,请求服务器时直接给予打包结果。 而vite是直接启动开发服务器,请求哪个模块再对该模块进行实时编译。由于现代浏览器本身就支持ES Moudule,会自动向依赖的Module发出请求。 vite成分利用这一点,将开发环境下的模块文件,就...
而且Element Plus + Vite 也出了一段时间了,是时候该上手体验分享一波了。 主要是要熟练一下 Vue3,好准备用 Vue3 重构一下自己的网站项目: blog-vue-typescript ,计划是过年期间会着手重构这个项目,年后会上线。 1. 初化化项目 全局安装 vite-app ...
Vue 的作者尤雨溪的 Twitter 已经说了 Vite 是vue cli的替代，仅支持 Vue 3.0，所以想用 Vite 那么...
vite 引入element import{fileURLToPath,URL}from'node:url'import{defineConfig, loadEnv}from'vite'importvuefrom'@vitejs/plugin-vue'importAutoImportfrom'unplugin-auto-import/vite'importComponentsfrom'unplugin-vue-components/vite'import{ElementPlusResolver}from'unplugin-vue-components/resolvers'export...
创建vite工程 上面命令创建的是 vue3 JS项目,如果你使用 TypeScript 可以选择模板vue-ts 可用的vite模板可以在vite官方网站上找到: https://cn.vitejs.dev/guide/ 下面是开发 vue 项目必备的几个依赖 pnpm add element-plus vue-router@4 pinia axios ...
命令快速生成一个使用 Vite 构建的 Vue 3 项目模版。 运行npm run dev即可把项目跑起来,进入开发模式。 项目冷启动速度非常快,不到 1 秒钟,浏览器里就已经出现项目预览了。项目冷启动只用了382ms,真香。 引入Element Plus UI组件库 开发项目,首先要挑选一个 UI 组件库。目前市面上支持 Vue 3 的组件库并不多...
2、动态路由component引入,vite如何动态获取文件; 本项目中的路由权限不是通过meta中的roles: ['admin']字段进行匹配的,而是通过接口获取路由表数据,获取之后数据处理成MenuTree; 获取views文件夹下的所有vue文件; const loadView = import.meta.glob('../views/**/*.vue'); ...