vue3.2后台管理系统搭建学习笔记

1-1、创建项目

vue create vue3-admin

1-2、更改vue版本

更改前

更改后

1、按需引入element-plus

1、安装

npm install element-plus --save

2、按需导入&＃xff08;自动导入&＃xff09;

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

3、Webpack配置&＃xff08;vue.config.js&＃xff09;

const AutoImport &＃61; require(&＃39;unplugin-auto-import/webpack&＃39;)
const Components &＃61; require(&＃39;unplugin-vue-components/webpack&＃39;)
const { ElementPlusResolver } &＃61; require(&＃39;unplugin-vue-components/resolvers&＃39;)module.exports &＃61; {
intOnSave:false,devServer:{open:true,port:9000,},configureWebpack: {plugins: [AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),]},
}

4、使用

tips:在main.js中引入样式&＃xff08;避免弹出框等组件样式错乱&＃xff09;

import &＃39;element-plus/dist/index.css&＃39;

2、使用element-plus Icon图标 

1、安装

cnpm install &＃64;element-plus/icons-vue

2、注册全局组件

//main.js
import * as ELIcons from &＃39;&＃64;element-plus/icons-vue&＃39;
for (const iconName in ELIcons) {app.component(iconName, ELIcons[iconName])
}

 3、使用&＃xff08;左侧菜单icon&＃xff09;

3、样式初始化&＃xff0c;使用scss变量

1、导入初始样式,导出变量值

 2、在main.js中引入

import &＃39;&＃64;/styles/index.scss&＃39;

3、配置webpack

css: {loaderOptions: {sass: {// 8版本用prependData:prependData: &＃96;&＃64;import "&＃64;/styles/variables.scss"; // scss文件地址&＃64;import "&＃64;/styles/mixin.scss"; // scss文件地址&＃96;}}}

4、使用svg&＃xff0c;全局注册

1、svg图标导入到项目

 2、在components文件夹下创建SvgIcon组件

4、在icons 文件夹下新建index.js

import SvgIcon from &＃39;&＃64;/components/SvgIcon&＃39;const svgRequired &＃61; require.context(&＃39;./svg&＃39;, false, /\.svg$/)
svgRequired.keys().forEach((item) &＃61;> svgRequired(item))export default (app) &＃61;> {app.component(&＃39;svg-icon&＃39;, SvgIcon)
}


5、在main.js中引入

import SvgIcon from &＃39;&＃64;/icons&＃39;
const app&＃61;createApp(App)
SvgIcon(app)

6、安装依赖

cnpm i --save-dev svg-sprite-loader&＃64;6.0.9

7、配置webpack

const path &＃61; require(&＃39;path&＃39;)
function resolve(dir) {return path.join(__dirname, dir)
}
const webpack &＃61; require(&＃39;webpack&＃39;)module.exports &＃61; {
chainWebpack(config) {// 设置 svg-sprite-loader// config 为 webpack 配置对象// config.module 表示创建一个具名规则&＃xff0c;以后用来修改规则config.module// 规则.rule(&＃39;svg&＃39;)// 忽略.exclude.add(resolve(&＃39;src/icons&＃39;))// 结束.end()// config.module 表示创建一个具名规则&＃xff0c;以后用来修改规则config.module// 规则.rule(&＃39;icons&＃39;)// 正则&＃xff0c;解析 .svg 格式文件.test(/\.svg$/)// 解析的文件.include.add(resolve(&＃39;src/icons&＃39;))// 结束.end()// 新增了一个解析的loader.use(&＃39;svg-sprite-loader&＃39;)// 具体的loader.loader(&＃39;svg-sprite-loader&＃39;)// loader 的配置.options({symbolId: &＃39;icon-[name]&＃39;})// 结束.end()config.plugin(&＃39;ignore&＃39;).use(new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn$/))config.module.rule(&＃39;icons&＃39;).test(/\.svg$/).include.add(resolve(&＃39;src/icons&＃39;)).end().use(&＃39;svg-sprite-loader&＃39;).loader(&＃39;svg-sprite-loader&＃39;).options({symbolId: &＃39;icon-[name]&＃39;}).end()},
}

8、使用

5、请求封装

1、安装axios 

cnpm i axios --save

 2、新建utils文件夹&＃xff0c;新建auth.js设置过期时间

const TOKEN_TIME &＃61; &＃39;tokenTime&＃39;const TOKEN_TIME_VALUE &＃61; 2 * 60 * 60 * 1000// 登录时设置时间
export const setTokenTime &＃61; () &＃61;> {localStorage.setItem(TOKEN_TIME, Date.now())
}// 获取
export const getTokenTime &＃61; () &＃61;> {return localStorage.getItem(TOKEN_TIME)
}// 是否已经过期
export const diffTokenTime &＃61; () &＃61;> {const currentTime &＃61; Date.now()const tokenTime &＃61; getTokenTime()return currentTime - tokenTime > TOKEN_TIME_VALUE
}


3、新建api文件夹&＃xff0c;新建request.js文件

import axios from &＃39;axios&＃39;
import { ElMessage } from &＃39;element-plus&＃39;
import { diffTokenTime } from &＃39;&＃64;/utils/auth&＃39;
import store from &＃39;&＃64;/store&＃39;
const service &＃61; axios.create({baseURL: process.env.VUE_APP_BASE_API,timeout: 5000
})service.interceptors.request.use((config) &＃61;> {if (localStorage.getItem(&＃39;token&＃39;)) {if (diffTokenTime()) {store.dispatch(&＃39;app/logout&＃39;)return Promise.reject(new Error(&＃39;token 失效了&＃39;))}}config.headers.Authorization &＃61; localStorage.getItem(&＃39;token&＃39;)return config},(error) &＃61;> {return Promise.reject(new Error(error))}
)service.interceptors.response.use((response) &＃61;> {const { data, meta } &＃61; response.dataif (meta.status &＃61;&＃61;&＃61; 200 || meta.status &＃61;&＃61;&＃61; 201) {return data} else {ElMessage.error(meta.msg)return Promise.reject(new Error(meta.msg))}},(error) &＃61;> {console.log(error.response)error.response && ElMessage.error(error.response.data)return Promise.reject(new Error(error.response.data))}
)
export default service


4、本地跨域配置

devServer: {https: false,hotOnly: false,open:true,port:9000,proxy: {&＃39;/api&＃39;: {target: &＃39;https://*******/api/private/v1/&＃39;,changeOrigin: true,pathRewrite: {&＃39;^/api&＃39;: &＃39;&＃39;}}}},

5、全局坏境变量定义

 新建 .env.development、.env.production文件

ENV &＃61; &＃39;development&＃39;VUE_APP_BASE_API &＃61; &＃39;/api&＃39;

ENV &＃61; &＃39;production&＃39;VUE_APP_BASE_API &＃61; &＃39;/prod-api&＃39;

6、全局导航守卫 

import { createRouter, createWebHashHistory } from &＃39;vue-router&＃39;const routes &＃61; [{path: &＃39;/login&＃39;,name: &＃39;Login&＃39;,component: () &＃61;> import(&＃39;../views/login/index.vue&＃39;)},{path: &＃39;/&＃39;,name: &＃39;/&＃39;,component: () &＃61;> import(&＃39;../layout&＃39;),redirect: &＃39;/users&＃39;,children: [{path: &＃39;users&＃39;,name: &＃39;users&＃39;,component: () &＃61;> import(&＃39;&＃64;/views/users/index.vue&＃39;)},{path: &＃39;categories&＃39;,name: &＃39;categories&＃39;,component: () &＃61;> import(&＃39;&＃64;/views/categories/index.vue&＃39;)},{path: &＃39;goods&＃39;,name: &＃39;goods&＃39;,component: () &＃61;> import(&＃39;&＃64;/views/goods/index.vue&＃39;)},{path: &＃39;orders&＃39;,name: &＃39;orders&＃39;,component: () &＃61;> import(&＃39;&＃64;/views/orders/index.vue&＃39;)},{path: &＃39;params&＃39;,name: &＃39;params&＃39;,component: () &＃61;> import(&＃39;&＃64;/views/params/index.vue&＃39;)},{path: &＃39;reports&＃39;,name: &＃39;reports&＃39;,component: () &＃61;> import(&＃39;&＃64;/views/reports/index.vue&＃39;)},{path: &＃39;rights&＃39;,name: &＃39;rights&＃39;,component: () &＃61;> import(&＃39;&＃64;/views/rights/index.vue&＃39;)},{path: &＃39;roles&＃39;,name: &＃39;roles&＃39;,component: () &＃61;> import(&＃39;&＃64;/views/roles/index.vue&＃39;)}]}
]const router &＃61; createRouter({history: createWebHashHistory(),routes
})export default router


1、新建router/permission.js

import router from &＃39;./index&＃39;
import store from &＃39;&＃64;/store&＃39;const whiteList &＃61; [&＃39;/login&＃39;]
router.beforeEach((to, from, next) &＃61;> {if (store.getters.token) {if (to.path &＃61;&＃61;&＃61; &＃39;/login&＃39;) {next(&＃39;/&＃39;)} else {next()}} else {if (whiteList.includes(to.path)) {next()} else {next(&＃39;/login&＃39;)}}
})


2、main.js引入 

import &＃39;&＃64;/router/permission&＃39;

5、登录 

1、新增登录界面login/index.vue

2、新建api/login.js

import request from &＃39;./request&＃39;export const login &＃61; (data) &＃61;> {return request({url: &＃39;/login&＃39;,method: &＃39;POST&＃39;,data})
}


3、新建store/modules/app.js

import { login as loginApi } from &＃39;&＃64;/api/login&＃39;
import router from &＃39;&＃64;/router&＃39;
import { setTokenTime } from &＃39;&＃64;/utils/auth&＃39;
export default {namespaced: true,state: () &＃61;> ({token: localStorage.getItem(&＃39;token&＃39;) || &＃39;&＃39;,siderType: true,}),mutations: {setToken(state, token) {state.token &＃61; tokenlocalStorage.setItem(&＃39;token&＃39;, token)},changeSiderType(state) {state.siderType &＃61; !state.siderType},},actions: {login({ commit }, userInfo) {return new Promise((resolve, reject) &＃61;> {loginApi(userInfo).then((res) &＃61;> {console.log(res)commit(&＃39;setToken&＃39;, res.token)setTokenTime()router.replace(&＃39;/&＃39;)resolve()}).catch((err) &＃61;> {reject(err)})})},// 退出logout({ commit }) {commit(&＃39;setToken&＃39;, &＃39;&＃39;)localStorage.clear()router.replace(&＃39;/login&＃39;)}}
}


4、store/getters.js、store/index.js

export default {token: (state) &＃61;> state.app.token,siderType: (state) &＃61;> state.app.siderType,
}


import { createStore } from &＃39;vuex&＃39;
import app from &＃39;./modules/app&＃39;
import getters from &＃39;./getters&＃39;
export default createStore({modules: {app},getters
})


1、左侧菜单 新建layout/Menu/index.vue

menu数据 

{"data": [{"id": 125,"authName": "用户管理","path": "users","children": [{"id": 110,"authName": "用户列表","path": "users","children": [],"order": null}],"order": 1},{"id": 103,"authName": "权限管理","path": "rights","children": [{"id": 111,"authName": "角色列表","path": "roles","children": [],"order": null},{"id": 112,"authName": "权限列表","path": "rights","children": [],"order": null}],"order": 2},{"id": 101,"authName": "商品管理","path": "goods","children": [{"id": 104,"authName": "商品列表","path": "goods","children": [],"order": 1},{"id": 115,"authName": "分类参数","path": "params","children": [],"order": 2},{"id": 121,"authName": "商品分类","path": "categories","children": [],"order": 3}],"order": 3},{"id": 102,"authName": "订单管理","path": "orders","children": [{"id": 107,"authName": "订单列表","path": "orders","children": [],"order": null}],"order": 4},{"id": 145,"authName": "数据统计","path": "reports","children": [{"id": 146,"authName": "数据报表","path": "reports","children": [],"order": null}],"order": 5}],"meta": {"msg": "获取菜单列表成功","status": 200}
}

2、右侧头部

1、hamburger.vue 控制左侧菜单折叠展开

2、breadcrumb.vue 面包屑导航

3、screenFull.vue 全屏组件

1、安装

cnpm i screenfull --save

2、使用

4、driver引导组件

1、安装

cnpm i driver.js --save

2、使用

 5、头像下拉 退出



4、用户管理开发

1、搜索功能 、结果列表展示

2、新建components/dialog.vue 新增、编辑用户弹框组件

3、新建全局时间过滤器

1、安装dayjs

cnpm i dayjs --save

2、新建utils/filters.js


import dayjs from &＃39;dayjs&＃39;const filterTimes &＃61; (val,format&＃61;&＃39;YYYY-MM-DD&＃39;) &＃61;>{if(!isNull(val)){val &＃61; parseInt(val)*1000return dayjs(val).format(format)}else{return &＃39;--&＃39;}
}export const isNull &＃61; (val)&＃61;>{if(!val) return trueif(JSON.stringify(val)&＃61;&＃61;&＃61;"{}") return trueif(JSON.stringify(val)&＃61;&＃61;&＃61;"[]") return true
}export default (app)&＃61;>{app.config.globalProperties.$filters&＃61;{filterTimes}
}


3、main.js传入app

import filters from &＃39;./utils/filters&＃39;
filters(app)

4、使用