客户管理系统开发定制基于vue-element-admin升级的Vue3+TS+Element-Plus版本正式开源，有来开源组织又一精心力作

项目简介

 是基于  升级的 + Element Plus 客户管理系统开发定制版本的后台管理前端解决方案，是  继  客户管理系统开发定制开源商城项目的又一开源力作。

项目使用 Vue3 + Vite2 + TypeScript + Element Plus + Vue Router + Pinia + Volar 客户管理系统开发定制等前端主流技术栈，客户管理系统开发定制基于此项目模板完成有客户管理系统开发定制来商城管理前端的 Vue3 版本。

客户管理系统开发定制本篇先对本项目功能、客户管理系统开发定制技术栈进行整体概述，客户管理系统开发定制再细节的讲述从0到1搭建 vue3-element-admin，客户管理系统开发定制在希望大家对本项目有客户管理系统开发定制个完完整整整了解的同客户管理系统开发定制时也能够在学 Vue3 + TypeScript 客户管理系统开发定制等技术栈少花些时间，少走些弯路，这样团队在毫无保留开源才有些许意义。

功能清单

技术栈清单

技术栈描述官网
Vue3渐进式 JavaScript 框架https://v3.cn.vuejs.org/
TypeScript微软新推出的一种语言，是 JavaScript 的超集https://www.tslang.cn/
Vite2前端开发与构建工具https://cn.vitejs.dev/
Element Plus基于 Vue 3，面向设计师和开发者的组件库https://element-plus.gitee.io/zh-CN/
Pinia新一代状态管理工具https://pinia.vuejs.org/
Vue RouterVue.js 的官方路由https://router.vuejs.org/zh/
wangEditorTypescript 开发的 Web 富文本编辑器https://www.wangeditor.com/
Echarts一个基于 JavaScript 的开源可视化图表库https://echarts.apache.org/zh/

项目预览

在线预览地址：

以下截图是来自有来商城管理前端  ，是基于  为基础开发的具有一套完整的系统权限管理的商城管理系统，数据均为线上真实的而非Mock。

国际化

已实现 Element Plus 组件和菜单路由的国际化，不过只做了少量国际化工作，国际化大部分是体力活，如果你有国际化的需求，会在下文从0到1实现Element Plus组件和菜单路由的国际化。

主题设置

大小切换

角色管理

菜单管理

商品上架

库存设置

微信小程序/ APP/ H5 显示上架商品效果

启动部署

  • 项目启动
  1. npm install 
  2. npm run dev

浏览器访问 

  • 项目部署
npm run build:prod

生成的静态文件在工程根目录 dist 文件夹

项目从0到1构建

安装第三方插件请注意项目源码的package.json版本号，有些升级不考虑兼容性的插件在 install 的时候我会带上具体版本号，例如 npm install vue-i18n@9.1.9 和 npm i vite-plugin-svg-icons@2.0.1 -D

环境准备

1. 运行环境Node

Node下载地址: http://nodejs.cn/download/

根据本机环境选择对应版本下载，安装过程可视化操作非常简便，静默安装即可。

安装完成后命令行终端 node -v 查看版本号以验证是否安装成功：

2. 开发工具VSCode

下载地址：https://code.visualstudio.com/Download

3. 必装插件Volar

VSCode 插件市场搜索 Volar (就排在第一位的骷髅头)，且要禁用默认的 Vetur.

项目初始化

1. Vite 是什么？

Vite是一种新型前端构建工具，能够显著提升前端开发体验。

Vite 官方中文文档：https://cn.vitejs.dev/guide/

2. 初始化项目

npm init vite@latest vue3-element-admin --template vue-ts
  • vue3-element-admin：项目名称
  • vue-ts : Vue + TypeScript 的模板，除此还有vue，react，react-ts模板

3. 启动项目

  1. cd vue3-element-admin
  2. npm install
  3. npm run dev

浏览器访问: 

整合Element-Plus

1.本地安装Element Plus和图标组件

  1. npm install element-plus
  2. npm install @element-plus/icons-vue

2.全局注册组件

  1. // main.ts
  2. import ElementPlus from 'element-plus'
  3. import 'element-plus/theme-chalk/index.css'
  4.  
  5. createApp(App)
  6.     .use(ElementPlus)
  7.     .mount('#app')

3. Element Plus全局组件类型声明

  1. // tsconfig.json
  2. {
  3.   "compilerOptions": {
  4.     // ...
  5.     "types": ["element-plus/global"]
  6.   }
  7. }

4. 页面使用 Element Plus 组件和图标

  1. <!-- src/App.vue -->
  2. <template>
  3.   <img alt="Vue logo" src="./assets/logo.png"/>
  4.   <HelloWorld msg="Hello Vue 3 + TypeScript + Vite"/>
  5.   <div style="text-align: center;margin-top: 10px">
  6.     <el-button :icon="Search" circle></el-button>
  7.     <el-button type="primary" :icon="Edit" circle></el-button>
  8.     <el-button type="success" :icon="Check" circle></el-button>
  9.     <el-button type="info" :icon="Message" circle></el-button>
  10.     <el-button type="warning" :icon="Star" circle></el-button>
  11.     <el-button type="danger" :icon="Delete" circle></el-button>
  12.   </div>
  13. </template>
  14.  
  15. <script lang="ts" setup>
  16.      import HelloWorld from '/src/components/HelloWorld.vue'
  17.      import {Search, Edit,Check,Message,Star, Delete} from '@element-plus/icons-vue'
  18. </script>

5. 效果预览

路径别名配置

使用 @ 代替 src

1. Vite配置

  1. // vite.config.ts
  2. import {defineConfig} from 'vite'
  3. import vue from '@vitejs/plugin-vue'
  4.  
  5. import path from 'path'
  6.  
  7. export default defineConfig({
  8.     plugins: [vue()],
  9.     resolve: {
  10.         alias: {
  11.             "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
  12.         }
  13.     }
  14. })

2. 安装@types/node

import path from 'path'编译器报错：TS2307: Cannot find module ‘path’ or its corresponding type declarations.

本地安装 Node 的 TypeScript 类型描述文件即可解决编译器报错

npm install @types/node --save-dev

3. TypeScript 编译配置

同样还是import path from 'path' 编译报错: TS1259: Module ‘“path”’ can only be default-imported using the ‘allowSyntheticDefaultImports’ flag

因为 typescript 特殊的 import 方式 , 需要配置允许默认导入的方式，还有路径别名的配置

  1. // tsconfig.json
  2. {
  3.   "compilerOptions": {
  4.     "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
  5.     "paths": { //路径映射，相对于baseUrl
  6.       "@/*": ["src/*"] 
  7.     },
  8.     "allowSyntheticDefaultImports": true // 允许默认导入
  9.   }
  10. }

4.别名使用

  1. // App.vue
  2. import HelloWorld from '/src/components/HelloWorld.vue'
  3. 												↓
  4. import HelloWorld from '@/components/HelloWorld.vue'

环境变量

官方教程: https://cn.vitejs.dev/guide/env-and-mode.html

1. env配置文件

项目根目录分别添加 开发、生产和模拟环境配置

  • 开发环境配置：.env.development

    1. # 变量必须以 VITE_ 为前缀才能暴露给外部读取
    2. VITE_APP_TITLE = 'vue3-element-admin'
    3. VITE_APP_PORT = 3000
    4. VITE_APP_BASE_API = '/dev-api'

  • 生产环境配置：.env.production

    1. VITE_APP_TITLE = 'vue3-element-admin'
    2. VITE_APP_PORT = 3000
    3. VITE_APP_BASE_API = '/prod-api'

  • 模拟生产环境配置：.env.staging

    1. VITE_APP_TITLE = 'vue3-element-admin'
    2. VITE_APP_PORT = 3000
    3. VITE_APP_BASE_API = '/prod--api'

2.环境变量智能提示

添加环境变量类型声明

  1. // src/ env.d.ts
  2. // 环境变量类型声明
  3. interface ImportMetaEnv {
  4.   VITE_APP_TITLE: string,
  5.   VITE_APP_PORT: string,
  6.   VITE_APP_BASE_API: string
  7. }
  8.  
  9. interface ImportMeta {
  10.   readonly env: ImportMetaEnv
  11. }

后面在使用自定义环境变量就会有智能提示，环境变量使用请参考下一节。

浏览器跨域处理

1. 跨域原理

浏览器同源策略: 协议、域名和端口都相同是同源，浏览器会限制非同源请求读取响应结果。

解决浏览器跨域限制大体分为后端和前端两个方向：

  • 后端：开启 CORS 资源共享；
  • 前端：使用反向代理欺骗浏览器误认为是同源请求；

2. 前端反向代理解决跨域

Vite 配置反向代理解决跨域，因为需要读取环境变量，故写法和上文的出入较大，这里贴出完整的 vite.config.ts 配置。

  1. // vite.config.ts
  2. import {UserConfig, ConfigEnv, loadEnv} from 'vite'
  3. import vue from '@vitejs/plugin-vue'
  4. import path from 'path'
  5.  
  6. export default ({command, mode}: ConfigEnv): UserConfig => {
  7.     // 获取 .env 环境配置文件
  8.     const env = loadEnv(mode, process.cwd())
  9.  
  10.     return (
  11.         {
  12.             plugins: [
  13.                 vue()
  14.             ],
  15.             // 本地反向代理解决浏览器跨域限制
  16.             server: {
  17.                 host: 'localhost', 
  18.                 port: Number(env.VITE_APP_PORT), 
  19.                 open: true, // 启动是否自动打开浏览器
  20.                 proxy: {
  21.                     [env.VITE_APP_BASE_API]: { 
  22.                         target: 'http://www.youlai.tech:9999', // 有来商城线上接口地址
  23.                         changeOrigin: true,
  24.                         rewrite: path => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')
  25.                     }
  26.                 }
  27.             },
  28.             resolve: {
  29.                 alias: {
  30.                     "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
  31.                 }
  32.             }
  33.         }
  34.     )
  35. }

SVG图标

官方教程： https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.zh_CN.md

Element Plus 图标库往往满足不了实际开发需求，可以引用和使用第三方例如 iconfont 的图标，本节通过整合  插件使用第三方图标库。

1. 安装 vite-plugin-svg-icons

  1. npm i fast-glob@3.2.11 -D
  2. npm i vite-plugin-svg-icons@2.0.1 -D

2. 创建图标文件夹

​ 项目创建 src/assets/icons 文件夹，存放 iconfont 下载的 SVG 图标

3. main.ts 引入注册脚本

  1. // main.ts
  2. import 'virtual:svg-icons-register';

4. vite.config.ts 插件配置

  1. // vite.config.ts
  2. import {UserConfig, ConfigEnv, loadEnv} from 'vite'
  3. import vue from '@vitejs/plugin-vue'
  4. import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
  5.  
  6. export default ({command, mode}: ConfigEnv): UserConfig => {
  7.     // 获取 .env 环境配置文件
  8.     const env = loadEnv(mode, process.cwd())
  9.  
  10.     return (
  11.         {
  12.             plugins: [
  13.                 vue(),
  14.                 createSvgIconsPlugin({
  15.                     // 指定需要缓存的图标文件夹
  16.                     iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
  17.                     // 指定symbolId格式
  18.                     symbolId: 'icon-[dir]-[name]',
  19.                 })
  20.             ]
  21.         }
  22.     )
  23. }

5. TypeScript支持

  1. // tsconfig.json
  2. {
  3.   "compilerOptions": {
  4.     "types": ["vite-plugin-svg-icons/client"]
  5.   }
  6. }

6. 组件封装

  1. <!-- src/components/SvgIcon/index.vue -->
  2. <template>
  3.   <svg aria-hidden="true" class="svg-icon">
  4.     <use :xlink:href="symbolId" :fill="color" />
  5.   </svg>
  6. </template>
  7.  
  8. <script setup lang="ts">
  9. import { computed } from 'vue';
  10.  
  11. const props=defineProps({
  12.   prefix: {
  13.     type: String,
  14.     default: 'icon',
  15.   },
  16.   iconClass: {
  17.     type: String,
  18.     required: true,
  19.   },
  20.   color: {
  21.     type: String,
  22.     default: ''
  23.   }
  24. })
  25.  
  26. const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
  27. </script>
  28.  
  29. <style scoped>
  30. .svg-icon {
  31.   width: 1em;
  32.   height: 1em;
  33.   vertical-align: -0.15em;
  34.   overflow: hidden;
  35.   fill: currentColor;
  36. }
  37. </style>

7. 使用案例

  1. <template>
  2.   <svg-icon icon-class="menu"/>
  3. </template>
  4.  
  5. <script setup lang="ts">
  6. 	import SvgIcon from '@/components/SvgIcon/index.vue';
  7. </script>

Pinia状态管理

Pinia 是 Vue.js 的轻量级状态管理库，Vuex 的替代方案。

尤雨溪于2021.11.24 在 Twitter 上宣布：Pinia 正式成为 vuejs 官方的状态库，意味着 Pinia 就是 Vuex 5 。

1. 安装Pinia

npm install pinia

2. Pinia全局注册

  1. // src/main.ts
  2. import { createPinia } from "pinia"
  3. app.use(createPinia())
  4.    .mount('#app')

3. Pinia模块封装

  1. // src/store/modules/user.ts
  2. // 用户状态模块
  3. import { defineStore } from "pinia";
  4. import { UserState } from "@/types"; // 用户state的TypeScript类型声明，文件路径 src/types/store/user.d.ts
  5.  
  6. const useUserStore = defineStore({
  7.     id: "user",
  8.     state: (): UserState => ({
  9.         token:'',
  10.         nickname: ''
  11.     }),
  12.     actions: {
  13.       getUserInfo() {
  14.       	return new Promise(((resolve, reject) => {
  15.           ...
  16.           resolve(data)
  17.           ...
  18.         }))
  19.       }
  20.     }
  21. })
  22.  
  23. export default useUserStore;
  24. // src/store/index.ts
  25. import useUserStore from './modules/user'
  26. const useStore = () => ({
  27.     user: useUserStore()
  28. })
  29. export default useStore

4. 使用Pinia

  1. import useStore from "@/store";
  2.  
  3. const { user } = useStore()
  4. // state
  5. const token = user.token
  6. // action
  7. user.getUserInfo().then(({data})=>{
  8. 	console.log(data)
  9. })

Axios网络请求库封装

1. axios工具封装

  1. //  src/utils/request.ts
  2. import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
  3. import { ElMessage, ElMessageBox } from "element-plus";
  4. import { localStorage } from "@/utils/storage";
  5. import useStore from "@/store"; // pinia
  6.  
  7. // 创建 axios 实例
  8. const service = axios.create({
  9.     baseURL: import.meta.env.VITE_APP_BASE_API,
  10.     timeout: 50000,
  11.     headers: { 'Content-Type': 'application/json;charset=utf-8' }
  12. })
  13.  
  14. // 请求拦截器
  15. service.interceptors.request.use(
  16.     (config: AxiosRequestConfig) => {
  17.         if (!config.headers) {
  18.             throw new Error(`Expected 'config' and 'config.headers' not to be undefined`);
  19.         }
  20.         const { user } = useStore()
  21.         if (user.token) {
  22.             config.headers.Authorization = `${localStorage.get('token')}`;
  23.         }
  24.         return config
  25.     }, (error) => {
  26.         return Promise.reject(error);
  27.     }
  28. )
  29.  
  30. // 响应拦截器
  31. service.interceptors.response.use(
  32.     (response: AxiosResponse) => {
  33.         const { code, msg } = response.data;
  34.         if (code === '00000') {
  35.             return response.data;
  36.         } else {
  37.             ElMessage({
  38.                 message: msg || '系统出错',
  39.                 type: 'error'
  40.             })
  41.             return Promise.reject(new Error(msg || 'Error'))
  42.         }
  43.     },
  44.     (error) => {
  45.         const { code, msg } = error.response.data
  46.         if (code === 'A0230') {  // token 过期
  47.             localStorage.clear(); // 清除浏览器全部缓存
  48.             window.location.href = '/'; // 跳转登录页
  49.             ElMessageBox.alert('当前页面已失效，请重新登录', '提示', {})
  50.                 .then(() => {
  51.                 })
  52.                 .catch(() => {
  53.                 });
  54.         } else {
  55.             ElMessage({
  56.                 message: msg || '系统出错',
  57.                 type: 'error'
  58.             })
  59.         }
  60.         return Promise.reject(new Error(msg || 'Error'))
  61.     }
  62. );
  63.  
  64. // 导出 axios 实例
  65. export default service

2. API封装

以登录成功后获取用户信息(昵称、头像、角色集合和权限集合)的接口为案例，演示如何通过封装的 axios 工具类请求后端接口，其中响应数据

  1. // src/api/system/user.ts
  2. import request from "@/utils/request";
  3. import { AxiosPromise } from "axios";
  4. import { UserInfo } from "@/types"; // 用户信息返回数据的TypeScript类型声明，文件路径 src/types/api/system/user.d.ts
  5.  
  6. /**
  7.  * 登录成功后获取用户信息（昵称、头像、权限集合和角色集合）
  8.  */
  9. export function getUserInfo(): AxiosPromise<UserInfo> {
  10.     return request({
  11.         url: '/youlai-admin/api/v1/users/me',
  12.         method: 'get'
  13.     })
  14. }

3. API调用

  1. // src/store/modules/user.ts
  2. import { getUserInfo } from "@/api/system/user";
  3.  
  4. // 获取登录用户信息
  5. getUserInfo().then(({ data }) => {
  6. 	const { nickname, avatar, roles, perms } = data
  7.   ...
  8. })

动态权限路由

官方文档： https://router.vuejs.org/zh/api/

1. 安装 vue-router

npm install vue-router@next

2. 创建路由实例

创建路由实例并导出，其中包括静态路由数据，动态路由后面将通过接口从后端获取并整合用户角色的权限控制。

  1. // src/router/index.ts
  2. import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
  3. import useStore from "@/store";
  4.  
  5. export const Layout = () => import('@/layout/index.vue')
  6.  
  7. // 静态路由
  8. export const constantRoutes: Array<RouteRecordRaw> = [
  9.     {
  10.         path: '/redirect',
  11.         component: Layout,
  12.         meta: { hidden: true },
  13.         children: [
  14.             {
  15.                 path: '/redirect/:path(.*)',
  16.                 component: () => import('@/views/redirect/index.vue')
  17.             }
  18.         ]
  19.     },
  20.     {
  21.         path: '/login',
  22.         component: () => import('@/views/login/index.vue'),
  23.         meta: { hidden: true }
  24.     },
  25.     {
  26.         path: '/404',
  27.         component: () => import('@/views/error-page/404.vue'),
  28.         meta: { hidden: true }
  29.     },
  30.     {
  31.         path: '/401',
  32.         component: () => import('@/views/error-page/401.vue'),
  33.         meta: { hidden: true }
  34.     },
  35.     {
  36.         path: '/',
  37.         component: Layout,
  38.         redirect: '/dashboard',
  39.         children: [
  40.             {
  41.                 path: 'dashboard',
  42.                 component: () => import('@/views/dashboard/index.vue'),
  43.                 name: 'Dashboard',
  44.                 meta: { title: 'dashboard', icon: 'dashboard', affix: true }
  45.             }
  46.         ]
  47.     }
  48. ]
  49.  
  50. // 创建路由实例
  51. const router = createRouter({
  52.     history: createWebHashHistory(),
  53.     routes: constantRoutes as RouteRecordRaw[],
  54.     // 刷新时，滚动条位置还原
  55.     scrollBehavior: () => ({ left: 0, top: 0 })
  56. })
  57.  
  58. // 重置路由
  59. export function resetRouter() {
  60.     const { permission } = useStore()
  61.     permission.routes.forEach((route) => {
  62.         const name = route.name
  63.         if (name) {
  64.             router.hasRoute(name) && router.removeRoute(name)
  65.         }
  66.     })
  67. }
  68.  
  69. export default router

3. 路由实例全局注册

  1. // main.ts
  2. import router from "@/router";
  3.  
  4. app.use(router)
  5.    .mount('#app')

4. 动态权限路由

  1. // src/permission.ts
  2. import router from "@/router";
  3. import { ElMessage } from "element-plus";
  4. import useStore from "@/store";
  5. import NProgress from 'nprogress';
  6. import 'nprogress/nprogress.css'
  7. NProgress.configure({ showSpinner: false }) // 进度环显示/隐藏
  8.  
  9.  
  10. // 白名单路由
  11. const whiteList = ['/login', '/auth-redirect']
  12.  
  13. router.beforeEach(async (to, form, next) => {
  14.     NProgress.start()
  15.     const { user, permission } = useStore()
  16.     const hasToken = user.token
  17.     if (hasToken) {
  18.         // 登录成功，跳转到首页
  19.         if (to.path === '/login') {
  20.             next({ path: '/' })
  21.             NProgress.done()
  22.         } else {
  23.             const hasGetUserInfo = user.roles.length > 0
  24.             if (hasGetUserInfo) {
  25.                 next()
  26.             } else {
  27.                 try {
  28.                     await user.getUserInfo()
  29.                     const roles = user.roles
  30.                     // 用户拥有权限的路由集合(accessRoutes) 
  31.                     const accessRoutes: any = await permission.generateRoutes(roles)
  32.                     accessRoutes.forEach((route: any) => {
  33.                         router.addRoute(route)
  34.                     })
  35.                     next({ ...to, replace: true })
  36.                 } catch (error) {
  37.                     // 移除 token 并跳转登录页
  38.                     await user.resetToken()
  39.                     ElMessage.error(error as any || 'Has Error')
  40.                     next(`/login?redirect=${to.path}`)
  41.                     NProgress.done()
  42.                 }
  43.             }
  44.         }
  45.     } else {
  46.         // 未登录可以访问白名单页面(登录页面)
  47.         if (whiteList.indexOf(to.path) !== -1) {
  48.             next()
  49.         } else {
  50.             next(`/login?redirect=${to.path}`)
  51.             NProgress.done()
  52.         }
  53.     }
  54. })
  55.  
  56. router.afterEach(() => {
  57.     NProgress.done()
  58. })

其中 const accessRoutes: any = await permission.generateRoutes(roles)是根据用户角色获取拥有权限的路由(静态路由+动态路由)，核心代码如下：

  1. // src/store/modules/permission.ts 
  2. import { constantRoutes } from '@/router';
  3. import { listRoutes } from "@/api/system/menu";
  4.  
  5. const usePermissionStore = defineStore({
  6.     id: "permission",
  7.     state: (): PermissionState => ({
  8.         routes: [],
  9.         addRoutes: []
  10.     }),
  11.     actions: {
  12.         setRoutes(routes: RouteRecordRaw[]) {
  13.             this.addRoutes = routes
  14.           	// 静态路由 + 动态路由
  15.             this.routes = constantRoutes.concat(routes)
  16.         },
  17.         generateRoutes(roles: string[]) {
  18.             return new Promise((resolve, reject) => {
  19.               	// API 获取动态路由
  20.                 listRoutes().then(response => {
  21.                     const asyncRoutes = response.data
  22.                     let accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
  23.                     this.setRoutes(accessedRoutes)
  24.                     resolve(accessedRoutes)
  25.                 }).catch(error => {
  26.                     reject(error)
  27.                 })
  28.             })
  29.         }
  30.     }
  31. })
  32.  
  33. export default usePermissionStore;

按钮权限

1. Directive 自定义指令

  1. // src/directive/permission/index.ts
  2.  
  3. import useStore from "@/store";
  4. import { Directive, DirectiveBinding } from "vue";
  5.  
  6. /**
  7.  * 按钮权限校验
  8.  */
  9. export const hasPerm: Directive = {
  10.     mounted(el: HTMLElement, binding: DirectiveBinding) {
  11.         // 「超级管理员」拥有所有的按钮权限
  12.         const { user } = useStore()
  13.         const roles = user.roles;
  14.         if (roles.includes('ROOT')) {
  15.             return true
  16.         }
  17.         // 「其他角色」按钮权限校验
  18.         const { value } = binding;
  19.         if (value) {
  20.             const requiredPerms = value; // DOM绑定需要的按钮权限标识
  21.  
  22.             const hasPerm = user.perms?.some(perm => {
  23.                 return requiredPerms.includes(perm)
  24.             })
  25.  
  26.             if (!hasPerm) {
  27.                 el.parentNode && el.parentNode.removeChild(el);
  28.             }
  29.         } else {
  30.             throw new Error("need perms! Like v-has-perm=\"['sys:user:add','sys:user:edit']\"");
  31.         }
  32.     }
  33. };

2. 自定义指令全局注册

  1. ​
  2. // src/main.ts
  3.  
  4. const app = createApp(App)
  5. // 自定义指令
  6. import * as directive from "@/directive";
  7.  
  8. Object.keys(directive).forEach(key => {
  9.     app.directive(key, (directive as { [key: string]: Directive })[key]);
  10. });

3. 指令使用

  1. ​
  2. // src/views/system/user/index.vue
  3. <el-button v-hasPerm="['sys:user:add']">新增</el-button>
  4. <el-button v-hasPerm="['sys:user:delete']">删除</el-button>

Element-Plus国际化

官方教程：https://element-plus.gitee.io/zh-CN/guide/i18n.html

Element Plus 官方提供全局配置 Config Provider实现国际化

  1. ​
  2. //  src/App.vue
  3. <template>
  4.   <el-config-provider :locale="locale">
  5.     <router-view />
  6.   </el-config-provider>
  7. </template>
  8.  
  9. <script setup lang="ts">
  10. import { computed, onMounted, ref, watch } from "vue";
  11. import { ElConfigProvider } from "element-plus";
  12.  
  13. import useStore from "@/store";
  14.  
  15. // 导入 Element Plus 语言包
  16. import zhCn from "element-plus/es/locale/lang/zh-cn";
  17. import en from "element-plus/es/locale/lang/en";
  18.  
  19. // 获取系统语言
  20. const { app } = useStore();
  21. const language = computed(() => app.language);
  22.  
  23. const locale = ref();
  24.  
  25. watch(
  26.   language,
  27.   (value) => {
  28.     if (value == "en") {
  29.       locale.value = en;
  30.     } else { // 默认中文
  31.       locale.value = zhCn;
  32.     }
  33.   },
  34.   {
  35.     // 初始化立即执行
  36.     immediate: true
  37.   }
  38. );
  39. </script>

自定义国际化

i18n 英文全拼 internationalization ,国际化的意思，英文 i 和 n 中间18个英文字母

1. 安装 vue-i18n

npm install vue-i18n@9.1.9

2. 语言包

创建 src/lang 语言包目录，中文语言包 zh-cn.ts，英文语言包 en.ts

  1. ​// src/lang/en.ts
  2. export default {
  3.     // 路由国际化
  4.     route: {
  5.         dashboard: 'Dashboard',
  6.         document: 'Document'
  7.     },
  8.     // 登录页面国际化
  9.     login: {
  10.         title: 'youlai-mall management system',
  11.         username: 'Username',
  12.         password: 'Password',
  13.         login: 'Login',
  14.         code: 'Verification Code',
  15.         copyright: 'Copyright © 2020 - 2022 youlai.tech All Rights Reserved. ',
  16.         icp: ''
  17.     },
  18.     // 导航栏国际化
  19.     navbar:{
  20.         dashboard: 'Dashboard',
  21.         logout:'Logout',
  22.         document:'Document',
  23.         gitee:'Gitee'
  24.     }
  25. }

3. 创建i18n实例

  1. ​
  2. // src/lang/index.ts
  3.  
  4. // 自定义国际化配置
  5. import {createI18n} from 'vue-i18n'
  6. import {localStorage} from '@/utils/storage'
  7.  
  8. // 本地语言包
  9. import enLocale from './en'
  10. import zhCnLocale from './zh-cn'
  11.  
  12. const messages = {
  13.     'zh-cn': {
  14.         ...zhCnLocale
  15.     },
  16.     en: {
  17.         ...enLocale
  18.     }
  19. }
  20.  
  21. /**
  22.  * 获取当前系统使用语言字符串
  23.  * 
  24.  * @returns zh-cn|en ...
  25.  */
  26. export const getLanguage = () => {
  27.     // 本地缓存获取
  28.     let language = localStorage.get('language')
  29.     if (language) {
  30.         return language
  31.     }
  32.      // 浏览器使用语言
  33.     language = navigator.language.toLowerCase()
  34.     const locales = Object.keys(messages)
  35.     for (const locale of locales) {
  36.         if (language.indexOf(locale) > -1) {
  37.             return locale
  38.         }
  39.     }
  40.     return 'zh-cn'
  41. }
  42.  
  43. const i18n = createI18n({
  44.     locale: getLanguage(),
  45.     messages: messages
  46. })
  47.  
  48. export default i18n

4. i18n 全局注册

  1. ​// main.ts
  2.  
  3. // 国际化
  4. import i18n from "@/lang/index";
  5.  
  6. app.use(i18n)
  7.    .mount('#app');

5. 静态页面国际化

$t 是 i18n 提供的根据 key 从语言包翻译对应的 value 方法

  1. <h3 class="title">{{ $t("login.title") }}</h3>

6. 动态路由国际化

i18n 工具类，主要使用 i18n 的 te (判断语言包是否存在key) 和 t (翻译) 两个方法

  1. //  src/utils/i18n.ts
  2. import i18n from "@/lang/index";
  3.  
  4. export function generateTitle(title: any) {
  5.     // 判断是否存在国际化配置，如果没有原生返回
  6.     const hasKey = i18n.global.te('route.' + title)
  7.     if (hasKey) {
  8.         const translatedTitle = i18n.global.t('route.' + title)
  9.         return translatedTitle
  10.     }
  11.     return title
  12. }

页面使用

  1. ​// src/components/Breadcrumb/index.vue
  2. <template>
  3.  	<a v-else @click.prevent="handleLink(item)">
  4.        {{ generateTitle(item.meta.title) }}
  5.     </a>
  6. </template>
  7.  
  8. <script setup lang="ts">
  9. import {generateTitle} from '@/utils/i18n'
  10. </script>

wangEditor富文本编辑器

推荐教程：

1. 安装wangEditor和Vue3组件

  1. ​npm install @wangeditor/editor --save
  2. npm install @wangeditor/editor-for-vue@next --save

2. wangEditor组件封装

  1. ​
  2. <!-- src/components/WangEditor/index.vue -->
  3. <template>
  4.   <div style="border: 1px solid #ccc">
  5.     <!-- 工具栏 -->
  6.     <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" style="border-bottom: 1px solid #ccc" :mode="mode" />
  7.     <!-- 编辑器 -->
  8.     <Editor :defaultConfig="editorConfig" v-model="defaultHtml" @onChange="handleChange"
  9.       style="height: 500px; overflow-y: hidden;" :mode="mode" @onCreated="handleCreated" />
  10.   </div>
  11. </template>
  12.  
  13. <script setup lang="ts">
  14. import { onBeforeUnmount, shallowRef, reactive, toRefs } from 'vue'
  15. import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  16.  
  17. // API 引用
  18. import { uploadFile } from "@/api/system/file";
  19.  
  20. const props = defineProps({
  21.   modelValue: {
  22.     type: [String],
  23.     default: ''
  24.   },
  25. })
  26.  
  27. const emit = defineEmits(['update:modelValue']);
  28.  
  29. // 编辑器实例，必须用 shallowRef
  30. const editorRef = shallowRef()
  31.  
  32. const state = reactive({
  33.   toolbarConfig: {},
  34.   editorConfig: {
  35.     placeholder: '请输入内容...',
  36.     MENU_CONF: {
  37.       uploadImage: {
  38.         // 自定义图片上传
  39.         async customUpload(file: any, insertFn: any) {
  40.           console.log("上传图片")
  41.           uploadFile(file).then(response => {
  42.             const url = response.data
  43.             insertFn(url)
  44.           })
  45.         }
  46.       }
  47.     }
  48.   },
  49.   defaultHtml: props.modelValue,
  50.   mode: 'default'
  51. })
  52.  
  53. const { toolbarConfig, editorConfig, defaultHtml, mode } = toRefs(state)
  54.  
  55.  
  56. const handleCreated = (editor: any) => {
  57.   editorRef.value = editor // 记录 editor 实例，重要！
  58. }
  59.  
  60.  
  61. function handleChange(editor: any) {
  62.   emit('update:modelValue', editor.getHtml())
  63. }
  64.  
  65. // 组件销毁时，也及时销毁编辑器
  66. onBeforeUnmount(() => {
  67.   const editor = editorRef.value
  68.   if (editor == null) return
  69.   editor.destroy()
  70. })
  71.  
  72. </script>
  73.  
  74. <style src="@wangeditor/editor/dist/css/style.css">
  75. </style>
  76.  
  77. ​

3. 使用案例

  1. <template>
  2.   <div class="component-container">
  3.   	<editor v-model="modelValue.detail" style="height: 600px" />
  4.   </div>
  5. </template>
  6.  
  7. <script setup lang="ts">
  8. 	import Editor from "@/components/WangEditor/index.vue";
  9. </script>
  10.  
  11. ​
  1. <template>
  2.   <div class="component-container">
  3.   	<editor v-model="modelValue.detail" style="height: 600px" />
  4.   </div>
  5. </template>
  6.  
  7. <script setup lang="ts">
  8. 	import Editor from "@/components/WangEditor/index.vue";
  9. </script>

Echarts图表

1. 安装 Echarts

npm install echarts

2. Echarts 自适应大小工具类

侧边栏、浏览器窗口大小切换都会触发图表的 resize() 方法来进行自适应

  1. ​
  2. // src/utils/resize.ts
  3. import { ref } from 'vue'
  4. export default function() {
  5.     const chart = ref<any>()
  6.     const sidebarElm = ref<Element>()
  7.  
  8.     const chartResizeHandler = () => {
  9.         if (chart.value) {
  10.             chart.value.resize()
  11.         }
  12.     }
  13.  
  14.     const sidebarResizeHandler = (e: TransitionEvent) => {
  15.         if (e.propertyName === 'width') {
  16.             chartResizeHandler()
  17.         }
  18.     }
  19.  
  20.     const initResizeEvent = () => {
  21.         window.addEventListener('resize', chartResizeHandler)
  22.     }
  23.  
  24.     const destroyResizeEvent = () => {
  25.         window.removeEventListener('resize', chartResizeHandler)
  26.     }
  27.  
  28.     const initSidebarResizeEvent = () => {
  29.         sidebarElm.value = document.getElementsByClassName('sidebar-container')[0]
  30.         if (sidebarElm.value) {
  31.             sidebarElm.value.addEventListener('transitionend', sidebarResizeHandler as EventListener)
  32.         }
  33.     }
  34.  
  35.     const destroySidebarResizeEvent = () => {
  36.         if (sidebarElm.value) {
  37.             sidebarElm.value.removeEventListener('transitionend', sidebarResizeHandler as EventListener)
  38.         }
  39.     }
  40.  
  41.     const mounted = () => {
  42.         initResizeEvent()
  43.         initSidebarResizeEvent()
  44.     }
  45.  
  46.     const beforeDestroy = () => {
  47.         destroyResizeEvent()
  48.         destroySidebarResizeEvent()
  49.     }
  50.  
  51.     const activated = () => {
  52.         initResizeEvent()
  53.         initSidebarResizeEvent()
  54.     }
  55.  
  56.     const deactivated = () => {
  57.         destroyResizeEvent()
  58.         destroySidebarResizeEvent()
  59.     }
  60.  
  61.     return {
  62.         chart,
  63.         mounted,
  64.         beforeDestroy,
  65.         activated,
  66.         deactivated
  67.     }
  68. }
  69.  
  70. ​

3. Echarts使用

官方示例： https://echarts.apache.org/examples/zh/index.html

官方的示例文档丰富和详细，且涵盖了 JavaScript 和 TypeScript 版本，使用非常简单。

  1. ​
  2. <!-- src/views/dashboard/components/Chart/BarChart.vue --> 
  3. <!-- 线 + 柱混合图 -->
  4. <template>
  5.   <div
  6.       :id="id"
  7.       :class="className"
  8.       :style="{height, width}"
  9.   />
  10. </template>
  11.  
  12. <script setup lang="ts">
  13. import {nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted} from "vue";
  14. import {init, EChartsOption} from 'echarts'
  15. import * as echarts from 'echarts';
  16. import resize from '@/utils/resize'
  17.  
  18. const props = defineProps({
  19.   id: {
  20.     type: String,
  21.     default: 'barChart'
  22.   },
  23.   className: {
  24.     type: String,
  25.     default: ''
  26.   },
  27.   width: {
  28.     type: String,
  29.     default: '200px',
  30.     required: true
  31.   },
  32.   height: {
  33.     type: String,
  34.     default: '200px',
  35.     required: true
  36.   }
  37. })
  38.  
  39. const {
  40.   mounted,
  41.   chart,
  42.   beforeDestroy,
  43.   activated,
  44.   deactivated
  45. } = resize()
  46.  
  47. function initChart() {
  48.   const barChart = init(document.getElementById(props.id) as HTMLDivElement)
  49.  
  50.   barChart.setOption({
  51.     title: {
  52.       show: true,
  53.       text: '业绩总览(2021年)',
  54.       x: 'center',
  55.       padding: 15,
  56.       textStyle: {
  57.         fontSize: 18,
  58.         fontStyle: 'normal',
  59.         fontWeight: 'bold',
  60.         color: '#337ecc'
  61.       }
  62.     },
  63.     grid: {
  64.       left: '2%',
  65.       right: '2%',
  66.       bottom: '10%',
  67.       containLabel: true
  68.     },
  69.     tooltip: {
  70.       trigger: 'axis',
  71.       axisPointer: {
  72.         type: 'cross',
  73.         crossStyle: {
  74.           color: '#999'
  75.         }
  76.       }
  77.     },
  78.     legend: {
  79.       x: 'center',
  80.       y: 'bottom',
  81.       data: ['收入', '毛利润', '收入增长率', '利润增长率']
  82.     },
  83.     xAxis: [
  84.       {
  85.         type: 'category',
  86.         data: ['上海', '北京', '浙江', '广东', '深圳', '四川', '湖北', '安徽'],
  87.         axisPointer: {
  88.           type: 'shadow'
  89.         }
  90.       }
  91.     ],
  92.     yAxis: [
  93.       {
  94.         type: 'value',
  95.         min: 0,
  96.         max: 10000,
  97.         interval: 2000,
  98.         axisLabel: {
  99.           formatter: '{value} '
  100.         }
  101.       },
  102.       {
  103.         type: 'value',
  104.         min: 0,
  105.         max: 100,
  106.         interval: 20,
  107.         axisLabel: {
  108.           formatter: '{value}%'
  109.         }
  110.       }
  111.     ],
  112.     series: [
  113.       {
  114.         name: '收入',
  115.         type: 'bar',
  116.         data: [
  117.           8000, 8200, 7000, 6200, 6500, 5500, 4500, 4200, 3800,
  118.         ],
  119.         barWidth: 20,
  120.         itemStyle: {
  121.           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  122.             { offset: 0, color: '#83bff6' },
  123.             { offset: 0.5, color: '#188df0' },
  124.             { offset: 1, color: '#188df0' }
  125.           ])
  126.         }
  127.       },
  128.       {
  129.         name: '毛利润',
  130.         type: 'bar',
  131.         data: [
  132.           6700, 6800, 6300, 5213, 4500, 4200, 4200, 3800
  133.         ],
  134.         barWidth: 20,
  135.         itemStyle: {
  136.           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  137.             { offset: 0, color: '#25d73c' },
  138.             { offset: 0.5, color: '#1bc23d' },
  139.             { offset: 1, color: '#179e61' }
  140.           ])
  141.         }
  142.       },
  143.       {
  144.         name: '收入增长率',
  145.         type: 'line',
  146.         yAxisIndex: 1,
  147.         data: [65, 67, 65, 53, 47, 45, 43, 42, 41],
  148.         itemStyle: {
  149.           color: '#67C23A'
  150.         }
  151.       },
  152.       {
  153.         name: '利润增长率',
  154.         type: 'line',
  155.         yAxisIndex: 1,
  156.         data: [80, 81, 78, 67, 65, 60, 56,51, 45 ],
  157.         itemStyle: {
  158.           color: '#409EFF'
  159.         }
  160.       }
  161.     ]
  162.   } as EChartsOption)
  163.   chart.value = barChart
  164. }
  165.  
  166. onBeforeUnmount(() => {
  167.   beforeDestroy()
  168. })
  169.  
  170. onActivated(() => {
  171.   activated()
  172. })
  173.  
  174. onDeactivated(() => {
  175.   deactivated()
  176. })
  177.  
  178. onMounted(() => {
  179.   mounted()
  180.   nextTick(() => {
  181.     initChart()
  182.   })
  183. })
  184.  
  185. </script>
  186.  
  187. ​

项目源码

GiteeGithub
vue3-element-admin
网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发