天行健，君子以自强不息；地势坤，君子以厚德载物。
每个人都有惰性，但不断学习是好好生活的根本，共勉！
文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。
明月出天山，苍茫云海间。
------《关山月》
文章目录
- `第一部分：项目的构建以及基础组件的安装配置`
第一部分：项目的构建以及基础组件的安装配置
1. 后台管理系统模块划分
通用后台管理系统：登录模块、系统主页、用户管理、其他功能、找回密码、权限管理、系统配置
后台管理系统的模块和功能表：
| 模块 | 功能列表 |
|---|---|
| 登录模块 | 1. 账号密码登录 2. 短信验证码登录 3. 二维码扫码登录 |
| 系统主页 | 1.动态菜单 2.tab页 3.主题切换 4.个人信息 5.修改密码 |
| 用户管理 | 1.用户列表 2.重置密码 3.启用停用 |
| 其他功能 | 1.消息管理 2.验证码管理 3.已读消息 4.数据可视化 |
| 找回密码 | 1.邮箱找回密码 2.短信验证码找回密码 |
| 权限管理 | 1.角色管理 2.菜单管理 |
| 系统配置 | 1.数据字典 2.操作日志 3.系统配置 |
2. 项目的创建
2.1 创建Vue3项目
可参考：Vue3入门之创建vue3的单页应用(vite+vue)
找到一个文件夹位置，项目文件夹会创建在该文件夹下，在此位置目录中输入cmd回车打开窗口
使用命令创建
npm create vue@latest
创建完成后使用vscode打开项目，对项目包结构进行整理
Vue Official插件安装
在Vscode中安装插件Vue - Official，Vue官方发布的那个，如下图
2.2 初始化项目结构
2.2.1 删除不需要的文件
删除src下component包中的文件
删除src下assets包中的文件
2.2.2 删除不需要的代码
删除src包下的App.vue文件中的内容，保留以下标签即可，如下
<script setup>
</script>
<template>
</template>
<style scoped>
</style>
删除main.ts中的main.css引入，保留如下代码即可
import {
createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
删除index.ts中的HomeView引入以及不需要的内容，保留以下内容即可
import {
createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: []
})
export default router
2.2.3 修改文件内容
修改index.html
将title默认的Vite App修改为寒山李白通用后台管理系统，内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>寒山李白通用后台管理系统</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
2.2.4 创建需要的包和文件
在src包下创建styles包，mock包、store包，utils包，api包，
在styles包下创建一个theme主题包和一个default.css样式文件，然后再在theme包下创建一个default-theme.css文件
编写default.css文件和default-theme.css文件
default.css
@charset 'utf-8';
html,
body {
margin: 0;
padding: 0;
}
default-theme.css
@charset 'utf-8';
.default-theme {
}
2.3 运行项目
下载依赖
npm install
启动项目
npm run dev
2.4 访问项目
根据输出提示，浏览器输入地址进行访问
http://localhost:5173/
浏览器界面如下
一个空白页
3. 安装和使用element-plus
3.1 安装element-plus
在terminal终端中执行以下命令安装element-plus
npm install element-plus --save
--save表示将依赖添加到package.json文件中
3.2 element-plus组件使用实例
3.2.1 引入并注册element相关组件
在main.ts中引入需要的element-plus组件并全局注册
此时main.ts完整代码如下
import {
createApp } from 'vue'
import App from './App.vue'
import router from './router'
// 引入element-plus
import ElementPlus from 'element-plus'
// 引入element-plus的css组件
import 'element-plus/dist/index.css'
// 引入element-plus的国际化
import zhCn from 'element-plus/es/locale/lang/zh-cn'
// 引入element-plus字体图标相关组件
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
// 全局注册路由
app.use(router)
// 全局注册element-plus、国际化
app.use(ElementPlus, {
locale: zhCn
})
// 全局注册element-plus图标相关组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)){
app.component(key, component)
}
app.mount('#app')
3.2.2 element-plus图标的使用
element-plus图标组件官网地址：https://element-plus.org/zh-CN/component/icon.html
在element-plus组件界面往下滑找到图标，复制图标，鼠标左键单击即可复制
在App.vue文件的template标签中粘贴图标的代码
<script setup lang="ts">
</script>
<template>
<el-icon><House /></el-icon>
</template>
<style scoped>
</style>
浏览器刷新界面可以看到House图标
4. Vue Router路由的配置使用
Vue-Router路由官网地址：https://router.vuejs.org/zh/guide/
本篇创建项目时已经同时集成了路由Vue Router，无需再次安装
4.1 创建登录页面组件（login.vue）
在views包下创建login包，在login包下创建login.vue组件，组件内容如下
login.vue
<script setup lang="ts">
</script>
<template>
登录界面
</template>
<style scoped>
</style>
注意：组件中的script标签必须加上lang='ts'参数，不然会报错
4.2 路由配置（index.ts）
根据上面的登录组件，在index.ts中引入登录组件login.vue
配置后的index.ts完整代码如下
import {
createRouter, createWebHistory } from 'vue-router'
// 自定义路由组件或从其他文件导入，这里选择从其他文件导入
import login from "../views/login/login.vue";
// 定义一些路由，每个路由都需要映射到一个组件，
const routes = [
{
path: '/',
component: login
}
]
// 创建路由实例并传递'routes'配置 你可以在这里输入更多的配置
const router = createRouter({
history: createWebHistory(),
// routes:routes可以简写成routes，不会报错
// routes:[]
routes
})
export default router
4.3 路由应用（App.vue）
配置后，在App.vue中使用RouterView标签进行渲染页面
App.vue完整代码如下
<script setup lang="ts">
</script>
<template>
<RouterView></RouterView>
</template>
<style scoped>
</style>
4.4 查看结果
完成以上配置后，启动项目，访问，浏览器页面，如下，首页已经路由到了登录页面组件的内容
5. 数据请求配置（axios）
使用axios进行数据请求，可参考axios官网：https://www.axios-http.cn/
5.1 安装axios
在终端输入命令进行安装
npm install axios --save
5.2 配置axios实例
在代码中可直接使用axios进行请求，但有时会需要配置请求的参数，这个时候可以自定义axios实例
在src下的api包下创建文件api.ts，在文件中配置axios
import axios from 'axios'
// 数据请求自定义配置（实例）
const api = axios.create({
// baseURL: 'https://mo_sss.blog.csdn.net.cn',
baseURL: import.meta.url,
timeout: 1000,
headers: {
// 'X-Custom-Header': 'foobar'
'Content-Type': 'application/json;charset=UTF-8'
}
// withCredentials 表示跨域请求时是否需要使用凭证，默认是true
// withCredentials: true,
// responseType 表示浏览器将要响应的数据类型，包括arraybuffer、document、json、text、stream
// 浏览器专属类型: blob
// 默认值就是json
// responseType: 'json',
// responseEncoding 表示用于解码响应的编码（Node.js专属），注意，忽略responseType值为stream或者客户端请求
// 默认值为utf-8
// responseEncoding: 'utf-8'
});
export default api;
5.3 引用axios实例
在login.vue中引用实例
<script setup lang="ts">
import api from '../../api/api'
// 这里的地址必须是一个有返回值的接口，这里暂时没有，先用百度地址
api.get('https://www.baidu.com').then(resp=>{
console.log(resp.data)
})
</script>
<template>
登录界面
</template>
<style scoped>
</style>
6. 安装和配置mock（暂时使用，后续会使用后端接口）
mock用来模拟数据
官网地址：http://mockjs.com/
6.1 安装mock
使用命令安装mockjs库
npm install mockjs --save
6.2 配置mock
在src下的mock包中新建index.ts文件，文件内容如下
import Mock from 'mockjs'
在main.ts文件中添加引入mock
添加以下代码
// 引入mockjs
import './mock/index'
7. 安装和配置Vuex
vuex用来数据状态的管理
官网地址：https://vuex.vuejs.org/zh/
7.1 安装Vuex
参考官网安装命令如下
npm install vuex@next --save
7.2 配置Vuex
在src下的store包中创建index.ts文件，文件内容如下
// 引入
import {
createStore } from "vuex"
// 创建一个新的store实例
const store = createStore({
state() {
return{
count: 0
}
},
mutations: {
increment(state) {
state.count++
}
}
})
export default store;
在main.ts文件中新增以下代码（引入和注册vuex）
// 引入Vuex
import store from './store/index'
// 全局注册vuex状态管理
app.use(store)
8. 工具方法实现
在src包下的utils包中新增不同方法的实现
添加的方法代码参考element-plus官网组件
在src包下的utils包中新建文件utils.ts
8.1 加载方法的实现
加载组件直达链接
在utils包中创建utils.ts
在文件中添加以下代码
import {
ElLoading, ElMessage } from "element-plus";
const utils = {
// 加载动画
loading: null,
// loading: String,
// 展示加载动画
showLoadding(msg:string){
utils.loading = ElLoading.service({
lock: true,
text: msg?msg:'Loading',
// background: 'rgba(0,0,0,0.7)',
})
},
// 隐藏加载动画
hideLoadding(){
utils.loading && utils.loading.close()
},
}
export default utils;
8.2 消息提示的实现
参考组件中消息的提示代码，将一下代码填入变量utils
// 消息提示
showError(msg:string){
return ElMessage({
message: msg,
grouping: true,
type: 'error'
})
} ,
showSuccess(msg:string){
return ElMessage({
message: msg,
grouping: true,
type: 'success'
})
} ,
showWarning(msg:string){
return ElMessage({
message: msg,
grouping: true,
type: 'warning'
})
} ,
showDefault(msg:string){
return ElMessage({
message: msg,
grouping: true,
type: 'info'
})
} ,
closeMessage(){
ElMessage.closeAll()
} ,
8.3 完整代码
完整的utils.ts文件代码如下
import {
ElLoading, ElMessage } from "element-plus";
const utils = {
// 加载动画
loading: null,
// loading: String,
// 展示加载动画
showLoadding(msg:string){
utils.loading = ElLoading.service({
lock: true,
text: msg?msg:'Loading',
// background: 'rgba(0,0,0,0.7)',
})
},
// 隐藏加载动画
hideLoadding(){
utils.loading && utils.loading.close()
},
// 消息提示
showError(msg:string){
return ElMessage({
message: msg,
grouping: true,
type: 'error'
})
} ,
showSuccess(msg:string){
return ElMessage({
message: msg,
grouping: true,
type: 'success'
})
} ,
showWarning(msg:string){
return ElMessage({
message: msg,
grouping: true,
type: 'warning'
})
} ,
showDefault(msg:string){
return ElMessage({
message: msg,
grouping: true,
type: 'info'
})
} ,
closeMessage(){
ElMessage.closeAll()
} ,
}
export default utils;
9. 界面主题配置
为界面配置暗黑主题的切换
参考暗黑组件地址：https://element-plus.org/zh-CN/guide/dark-mode.html
9.1 引入组件
在main.ts中引入暗黑主题的css变量
// 引入element-plus的暗黑模式主题的css变量
import 'element-plus/theme-chalk/dark/css-vars.css'
9.2 应用组件
在App.vue中实现暗黑主题的按钮
在App.vue中的script中添加以下引入暗黑主题组件
// 引入暗黑主题的动态切换
import {
useDark, useToggle } from '@vueuse/core'
在template中添加以下代码实现按钮
<!-- 暗黑主题动态切换按钮实现 -->
<button @click="toggleDark()">
<i inline-block align-middle i="dark:carbon-moon carbon-sun"/>
<span class="ml-2">{
{
isDark ? 'Dark' : 'Light' }}</span>
</button>
完整的App.vue代码如下
<script setup lang="ts">
// 引入暗黑主题的动态切换
import {
useDark, useToggle } from '@vueuse/core'
const isDark = useDark()
// 切换主题函数
const toggleDark = useToggle(isDark)
</script>
<template>
<RouterView></RouterView>
<!-- 暗黑主题动态切换按钮实现 -->
<button @click="toggleDark()">
<i inline-block align-middle i="dark:carbon-moon carbon-sun"/>
<span class="ml-2">{
{
isDark ? 'Dark' : 'Light' }}</span>
</button>
<!-- <el-icon><House /></el-icon> -->
<!-- <el-icon><Plus /></el-icon> -->
</template>
<style scoped>
</style>
9.3 暗黑功能演示
运行项目，访问浏览器页面
点击按钮进行界面主题切换
感谢阅读，祝君暴富！
原文链接: https://hanshan.blog.csdn.net//article/details/140976922