README.md

项目简介

改项目是一个后台管理系统 通用解决方案

技术栈为：vue3 + vue-router + piniapnpm install element-plus

项目初始化

使用 element-plus

安装

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

使用 自动导入

npm install -D unplugin-vue-components unplugin-auto-import

在 vite 中 做如下配置

// vite.config.js

//...
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ]
})

使用 sass

安装

pnpm i sass sass-loader -D

使用 axios

pnpm i axios

配置环境变量

创建 两个文件，分别对应 开发状态 和 生产状态

1. .env.development
2. .env.production

然后 在文件中

# 标志
VITE_ENV = 'development'

# base api
VITE_VUE_APP_BASE_API = '/api'

# 标志
VITE_ENV = 'production'

# base api
VITE_VUE_APP_BASE_API = '/prod-api'

使用 import.meta.env 进行访问

console.log(import.meta.env)
console.log(import.meta.env.VITE_VUE_APP_BASE_API)
console.log(import.meta.env.VITE_ENV)

使用 md5

pnpm i --save md5

使用 vue-i18n

pnpm add vue-i18n@9

使用 rgb-hex 和 css-color-function

1. rgb-hex：转换RGB(A)颜色为十六进制
2. css-color-function：在CSS中提出的颜色函数的解析器和转换器

pnpm i rgb-hex
pnpm i css-color-function

使用 screenfull 全屏

pnpm i screenfull

使用 fuse.js 模糊搜索

pnpm install --save fuse.js

使用 driver 引导

pnpm i driver.js

使用 dayjs

pnpm i dayjs

使用 xlsx

excel 解析器和编译器

pnpm i xlsx

使用 file-saver

文件下载工具

pnpm i file-saver

使用 vue3-print-nb 打印

pnpm i vue3-print-nb

使用 sortablejs 拖拽排序

pnpm i sortablejs

使用 tui.editor

markdown 编辑

pnpm i @toast-ui/editor

使用 wangeditor i18next

富文本 编辑器 i18next 国际化

 pnpm i wangeditor
 pnpm i i18next