/vue3-elementPlus-template

vue3 + ts + elementPlus 后台管理基础模板

Primary LanguageTypeScript

Vue3 + ElementPlus基础模板

js版本请查看项目的js分支

在线预览地址

https://libwiki.github.io/vue3-elementPlus-template/

主要依赖

开发启动

# 依赖安装
npm install

# 复制一份开发环境的env配置
copy .env.development.back .env.development

# 开发环境启动
npm run dev

# 打包编译
npm run build

推荐启动的IDE与插件

路由meta页面配置说明

const meta = {
    title: "首页", // 标题 在```src/layouts/Main.vue```文件中使用
    // noToken: true, // 无需登录验证的界面 （路由拦截中使用）
}

基础配置文件与导航菜单配置

  • 1、src/config/Configs.ts为项目全局基础配置，项目中将直接引用该文件。配置的上游数据来源于项目根目录下的.env.*

axios网络请求库的两次封装

  • 1、src/utils/net.ts文件主要为axios的实例创建以及前置、后置处理
  • 2、src/api/Http.ts文件为axios实例的易用性封装（实际进行网络请求会直接使用该模块）
  • 3、网络库的具体使用案例请参考：```src/api/modules/User.ts````

用户登录功能hooks参考

  • 1、用户登录等相关功能均在src/hooks/user/useUserLogin.js文件中处理了（该文件仅是一个hooks使用案例，抛砖引玉，可移除。如果需要使用请完善内部的登录、退出、请求用户信息函数的功能）

关于Tailwindcss原子css库的配置说明

  • 项目中的配置请查看：tailwind.config.js文件
  • 项目中使用的spacing与tailwindcss的官方有所区别，使用了0~96px的数值。（需要改动可自行配置即可）
  • 注：项目中页面如果发现Tailwindcss无效问题，只需要在style区块中提供任意的css即可，例：.t{}

关于全局less的使用

  • 项目在使用Tailwindcss的同时依然支持less,vite.config.js css.preprocessorOptions中自动引入了src/styles/index.less 文件（该css文件是优先于其它css文件引入的，故此如果希望设置某个全局样式，并且希望优先级低于Tailwindcss时可参考src/styles/base.less）
  • 故如果需要设置任何全局样式，或者使用less 变量，在上述文件中设置 即可。页面中可直接使用
  • 关于src/styles/layouts.vars.less配置全局菜单样式的说明
    • 使用了vite-plugin-css-export库进行css变量共享，可在vite.config.js中进行配置
    • 默认的配置参考下表（引用的位置于：src/layouts/Main.vue中）
    @headerHeight: 50px; // 顶部栏高度
@headerBgColor: #f8f8f8; // 顶部栏背景色
@asideMinWidth: 0px; // 菜单栏最小宽度
@asideMaxWidth: 200px; // 菜单栏最大宽度
@asideBgColor: #545c64; // 菜单栏背景色
@asideTextColor: #ffffff; // 菜单栏字体色
@asideActiveTextColor: #ffd04b; // 菜单栏选中字体色

内置的指令说明

  • v-copy点击复制指令，依赖于clipboard库，生成逻辑：src/directives/clipboard.js 文件。实际使用可参考：src/views/order/Orders.vue中的联系方式的点击复制功能

内置的hooks说明src/hooks/

  • usePageMeta分页参数处理
  • useSimpleFormMeta简单的表单数据，仅仅实现了重置功能
  • useFormMeta繁杂的表单数据处理钩子，实现了重置、验证、弹框开关功能
  • useRouterToMenu路由文件转换为菜单栏（在此可自定义菜单，比如将服务端返回的配置设置为菜单）