基于vue3+ts+scss的后台管理系统(一)

创建项目

vite创建项目

注意：vite需要Node.js版本>=12.0.0
安装方式（不使用模板）：

#使用 NPM:
npm init vite@latest
#yarn 【推荐】
yarn create vite
#pnpm
pnpm create vite

填写项目名->选择vue->选择TS->安装依赖(npm i)->启动项目(npm run dev)

清除项目&工程化项目搭建

src
- api ajax工具管理文件夹
- assets 静态资源目录
- components 公共小组件
- directives 自定义指令文件夹
- hooks 全局hooks函数文件夹
- layout 框架
- router 路由
- store pinia仓库
- utils 工具文件夹
- views 页面级别组件文件夹
types 全局ts约束配置

重置样式&安装sass及配置

重置样式：拷贝一些样式文件到assets/styles下
安装sass: npm i sass -D
在main.ts文件中引入重置样式文件

import { createApp } from 'vue'
import App from './App.vue'import './assets/styles/index.scss'
const app = createApp(App)app.mount('#app')

使用重置样式中的变量，要先在vite.config.ts中配置

export default defineConfig({plugins: [vue()],css: {// CSS 预处理器preprocessorOptions: {scss: {additionalData: `@import '@/assets/style/variables.scss';`}}},
})

此时报错Can’t find stylesheet to import.，无法识别@ 继续配置别名

import { defineConfig, resolveBaseUrl } from 'vite'
import vue from '@vitejs/plugin-vue'// 之所以飘红 是应为 #node不带ts提示 需要安装 @types/node
import { resolve } from 'path'//引入插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),createSvgIconsPlugin({iconDirs: [resolve(process.cwd(), 'src/assets/icons')],symbolId: '[name]'})],css: {// CSS 预处理器preprocessorOptions: {scss: {additionalData: `@import '@/assets/style/variables.scss';`}}},resolve: {alias: {'@': resolve(__dirname, 'src')}}
})

此时样式文件中的变量可以使用成功，但是飘红，需要继续安装npm i @types/node
css样式配置：body or html or root 里面配置全局样式变量

body{--primary: #007bff;
}

使用全局样式变量：

.app {height: 100%;#var 可以直接使用 全局样式变量background: var(--muted);
}

vue3 Svg的使用

打开iconfont 下载要使用的图标（font class使用方式同以前一样）
使用Symbol方式：
在main.ts中引入

// Symbol 引入iconfont.js
import './assets/icons/iconfont.js'

在.vue文件中使用

<template><div>
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-shuju"></use>
</svg></div>
</template><script setup lang="ts"></script><style scoped lang="scss">.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
</style>

针对svg文件使用方法
安装插件

npm i vite-plugin-svg-icons -D
//or
pnpm i vite-plugin-svg-icons -D#如果报错Cannot find package 'fast-glob'
安装插件 yarn add fast-glob -D

在vite.config.ts中引入插件

//引入插件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// 之所以飘红 是应为 #node不带ts提示 需要安装 @types/node
import { resolve } from 'path'//引入插件并在plugins中配置
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),createSvgIconsPlugin({iconDirs: [resolve(process.cwd(), 'src/assets/icons')],symbolId: '[name]'})],css: {// CSS 预处理器preprocessorOptions: {scss: {additionalData: `@import '@/assets/style/variables.scss';`}}},resolve: {alias: {'@': resolve(__dirname, 'src')}}
})

报错的话就再安装插件

#如果报错Cannot find package 'fast-glob'
安装插件 yarn add fast-glob -D

在main.ts中注册svg图标

// 注册svg-icons
import 'virtual:svg-icons-register'

全局svg组件封装

创建组件/components/SvgIcon.vue
在SvgIcon.vue中

<template><svg class="icon" aria-hidden="true" :width="props.size + 'em'" :height="props.size + 'em'"><use :xlink:href="'#' + props.name" :fill="props.color"></use></svg>
</template><script setup lang="ts">
interface Props {name: stringcolor?: stringsize?: number
}
const props = withDefaults(defineProps<Props>(), {color: '',size: 1,
})
</script><style scoped lang="scss">
.icon {vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
</style>

在main.ts中全局注册

const app = createApp(App)// 引入SvgIcon组件
import SvgIcon from "@/components/SvgIcon.vue";
// 全局注册
app.component('SvgIcon', SvgIcon)app.mount('#app')

使用

<svg-icon name="user" :size="3" color="pink"></svg-icon>

针对一下代码使用@飘红的问题

// 引入SvgIcon组件
import SvgIcon from "@/components/SvgIcon.vue";

在vite-env.d.ts中配置即可

declare module "*.vue" {import type { DefineComponent } from "vue"const vueComponent: DefineComponent<{}, {}, any>export default vueComponent
}

安装 & 使用element plus & 中文化

官网：Element Plus
安装：

# NPM
$ npm install element-plus --save# Yarn
$ yarn add element-plus

完整引入在main.ts中

import { createApp } from 'vue'
import App from './App.vue'import './assets/style/index.scss'// Symbol 引入iconfont.js
import './assets/icons/iconfont.js'// 注册svg-icons
import 'virtual:svg-icons-register'const app = createApp(App)// 引入SvgIcon组件
import SvgIcon from "@/components/SvgIcon.vue";
// 全局注册
app.component('SvgIcon', SvgIcon)
//引入ElementPlus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
app.mount('#app')

由于emlementPlus默认是英文，故还需配置成为中文
在main.ts中全局配置

// 全局注册
app.component('SvgIcon', SvgIcon)
//引入ElementPlus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//ElementPlus配置为中文
import zhCn from 'element-plus/es/locale/lang/zh-cn'
app.use(ElementPlus,{locale: zhCn,size: 'small',})
app.mount('#app')

此时即可正常使用

<template><div>
<el-button type="success">Success</el-button>
<el-popconfirm title="Are you sure to delete this?"><template #reference><el-button>Delete</el-button></template></el-popconfirm></div>
</template>

配置路由vue-router

1. 建立页面级别组件

在views文件夹下建立页面

2. 配置路由地址和页面级别组件的一一对应关系

安装路由npm install vue-router
在router/index.ts中

import { createRouter,createWebHashHistory} from "vue-router"//路由的配置数组，路径与页面的对映
const routes = []//路由实例
const router = createRouter({routes,history:createWebHashHistory(),
})//暴露
export default  router

在main.ts中使用路由

const app = createApp(App)
// 引入SvgIcon组件
import SvgIcon from "@/components/SvgIcon.vue";
// 全局注册
app.component('SvgIcon', SvgIcon)
//引入ElementPlus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//ElementPlus配置为中文
import zhCn from 'element-plus/es/locale/lang/zh-cn'app.use(ElementPlus,{locale: zhCn,size: 'small',})//导入路由import router from './router';app.use(router)app.mount('#app')

3. 给出口测试

在App.vue文件中配置一级路由出口

<!-- 一级路由出口 --><router-view></router-view>

在layout.vue文件中配置二级路由出口

<!-- 二级路由出口 --><router-view></router-view>

4.配置路由&路由自定义约束

在types文件下新建文件router.d.ts

//路由扩展types/router.d.tsimport type { RouteRecordRaw } from "vue-router";interface metaItem {title?: stringpath?: string
}interface RouteItem {hidden?: Booleanobj?: metaItem // 测试使用children?: RoutesType
}type myRouteType = RouteRecordRaw & RouteItemexport type RoutesType = Array<myRouteType>

在router/index.ts中

import { createRouter,createWebHashHistory} from "vue-router";
// import type { RouteRecordRaw } from "vue-router";import Layout from '@/views/layout/index.vue'//路由的配置数组，路径与页面的对映
import { RoutesType } from "../../types/router";const routes:RoutesType = [//登录{path:'/login',component:() => import('@/views/login/index.vue')},//数据中心{path:'/data',component: Layout,children: [{path: '',component: () => import('@/views/data/index.vue')}]},//用户管理{path:'/account',component: Layout,redirect:'/account/list',children: [{path: '/account/list',component: () => import('@/views/account/account-list.vue')},{path: '/account/add',component: () => import('@/views/account/account-add.vue')},{path: '/account/personal',component: () => import('@/views/account/personal.vue')}]},//文章管理{path:'/article',component: Layout,children: [{path: '',component: () => import('@/views/article/index.vue')}]},//excel管理{path:'/excel',component: Layout,redirect:'/excel/import',children: [{path: '/excel/import',component: () => import('@/views/excel/excel-import.vue')},{path: '/excel/export',component: () => import('@/views/excel/excel-export.vue')}]},//配置404{path: '/:pathMatch(.*)*',component: () => import('@/views/404/index.vue')}
]//路由实例
const router = createRouter({routes,history:createWebHashHistory(),
})//暴露
export default  router

主界面建框架

创建组件，实现大体框架布局

左边菜单栏

在leftMenu.vue中
引入menu组件

<template><div class="left-menu"><el-menudefault-active="/data"class="el-menu-vertical-demo"background-color="var(--el-color-danger-light-3)"text-color="var(--el-bg-color)"active-text-color="var(--el-color-danger-light-8)"unique-openedrouter><el-menu-item index="/data"><el-icon><svg-icon name="icon-shuju"/></el-icon><span>数据中心</span></el-menu-item><el-sub-menu index="1"><template #title><el-icon><svg-icon name="icon-yonghu"/></el-icon><span>用户管理</span></template><el-menu-item index="/account/list">用户列表</el-menu-item><el-menu-item index="/account/add">添加用户</el-menu-item><el-menu-item index="/account/personal">个人中心</el-menu-item></el-sub-menu><el-menu-item index="/article"><el-icon><svg-icon name="icon-bianjiwenzhang_huaban"/></el-icon><span>文章管理</span></el-menu-item><el-sub-menu index="2"><template #title><el-icon><svg-icon name="icon-file-excel"/></el-icon><span>excel管理</span></template><el-menu-item index="/excel/import">excel导入</el-menu-item><el-menu-item index="/excel/export">excel导出</el-menu-item></el-sub-menu>     </el-menu></div>
</template><script setup lang="ts"></script><style scoped>
.left-menu{background-color:#f89898;
}
</style>

解决菜单栏右侧边框问题

.el-menu {border-right: none !important;
}

默认选中菜单第一个default-active="/data"

点击菜单栏显示对应组件内容

添加router,配置index为对应路径
拿到路由信息对象

<script setup lang="ts">
import { useRoute } from 'vue-router';const $route = useRoute()
console.log($route.path);
</script>

再修改默认激活路径为:default-active="$route.path"

主要显示内容设置动画效果transition

vue3中内置组件transition官网地址：transition
在mainContent.vue中

<template><div class="p15"><!-- 二级路由出口 --><router-view v-slot="{ Component }"><transition name="fade" mode="out-in"><component :is="Component"></component></transition></router-view></div>
</template>

导航菜单栏折叠与收起

设置折叠收起按钮图标，安装：npm install @element-plus/icons-vue
引入：

<script setup lang="ts">
import { Expand } from "@element-plus/icons-vue"
</script>

使用：

<el-icon size="20" class="cursor-pointer"><Expand /></el-icon>

点击图标菜单栏折叠或收起，要修改collapse的值为true或false,将其存到pinia中
安装pinia:npm install pinia
在main.ts中

  //引入pinia并创建import { createPinia } from 'pinia'app.use(createPinia())

在store/index.ts中定义

//定义仓库
import { defineStore } from 'pinia'
import { ref } from 'vue'export const useStore = defineStore('app',() =>  {//定义collapse动态数据let collapse = ref<boolean>(false)return {collapse,}})

在leftMenu.vue中获取响应式collapse并修改:collapse="collapse"

import { useStore } from '@/store';
import { computed } from 'vue';//获取store的实例
const $appStore = useStore()
//获取响应式collapse
let collapse = computed(() => $appStore.collapse)
console.log(collapse);

在store/index.ts中

 //修改collapseconst changeCollapse = () =>{collapse.value = !collapse.value}return {collapse,changeCollapse}

在mainTo.vue中实现点击图标切换及左侧菜单栏改变

<template><div class="right-top df aic plr15"><el-icon @click="changeCollapse" size="20" class="cursor-pointer"><Expand v-show="collapse" /><Fold v-show="!collapse"/></el-icon>
右侧顶部</div>
</template><script setup lang="ts">
import { Expand,Fold } from "@element-plus/icons-vue"
import { useStore } from "@/store"
import { computed } from 'vue';//获取store对象
const $appStore = useStore()
const { changeCollapse } = $appStore
// console.log(changeCollapse);
const collapse = computed(() => $appStore.collapse)</script><style scoped lang="scss">
.right-top{height:40px;background-color:#fcd3d3;
}
</style>

若@符号无法识别，飘红找不到模块则在tsconfig,json中配置

"noEmit": true,"baseUrl": "./","paths": {"@/*": ["src/*"],"@": ["src"],"~/*": ["types/*"]}

侧边栏hooks适配

在store/index.ts中

//设置collapse的值const setCollapse = (val : boolean) =>{collapse.value=val}return {collapse,changeCollapse,setCollapse}

在hooks文件夹下新建useResize.ts文件

import { useStore } from "@/store"
import { onMounted, onUnmounted } from "vue"//在函数中监听屏幕的变化
export const useResize = () => {const minW = 700//屏幕固定值const $appStore = useStore()const { setCollapse } = $appStoreconst $_resize = () => {//获取屏幕的宽const w = document.body.clientWidthif (w > minW) {setCollapse(false)} else {setCollapse(true)}}onMounted(() => {$_resize()//初始化时要走一次故要调用一次window.addEventListener('resize', $_resize)})onUnmounted(() => {window.removeEventListener('resize', $_resize)})
}

在layout/index.ts中调用函数

//引入屏幕变化后 侧边栏状态变化的hooks函数
import {useResize} from "@/hooks/useResize"
useResize()

右边面包屑

静态–>使路由动态起来->配置路由下的meta，拿到title和path，凑成一个数组循环面包屑
router/index.ts

const routes: RoutesType = [//登录{path: '/login',component: () => import('@/views/login/index.vue')},//数据中心{path: '/data',component: Layout,meta: { title: '数据中心', path: '/data' },children: [{path: '',component: () => import('@/views/data/index.vue')}]},//用户管理{path: '/account',component: Layout,meta: { title: '用户管理', path: '/account' },redirect: '/account/list',children: [{path: '/account/list',meta: { title: '用户列表', path: '/account/list' },component: () => import('@/views/account/account-list.vue')},{path: '/account/add',meta: { title: '用户添加', path: '/account/add' },component: () => import('@/views/account/account-add.vue')},{path: '/account/personal',meta: { title: '个人中心', path: '/account/personal' },component: () => import('@/views/account/personal.vue')}]},//文章管理{path: '/article',component: Layout,meta: { title: '文章管理', path: '/article' },children: [{path: '',component: () => import('@/views/article/index.vue')}]},//excel管理{path: '/excel',component: Layout,meta: { title: 'excel管理', path: '/excel' },redirect: '/excel/import',children: [{path: '/excel/import',meta: { title: 'excel导入', path: '/excel/import' },component: () => import('@/views/excel/excel-import.vue')},{path: '/excel/export',meta: { title: 'excel导出', path: '/excel/export' },component: () => import('@/views/excel/excel-export.vue')}]},//配置404{path: '/:pathMatch(.*)*',component: () => import('@/views/404/index.vue')}
]

在mainTop.vue中，通过获取路由信息获取meta对象,判断matched是否为非空，非空则添加到循环数组中，点击菜单之后，面包屑也应该变化，故每点击一次，数据重新获取一次，将重新获取的数据添加到循环数组中，获取重新获取到的数据可以用：监听，计算属性，watchEffect

计算属性获取面包屑

import { useRoute } from 'vue-router'
import { metaItem } from '~/router'
//获取store对象
const $appStore = useStore()
const { changeCollapse } = $appStore
// console.log(changeCollapse);
const collapse = computed(() => $appStore.collapse)// 通过获取路由信息获取meta对象,判断matched是否为非空，非空则添加到循环数组中
//点击菜单之后，面包屑也应该变化，故每点击一次，数据重新获取一次，将重新获取的数据添加到循环数组中
//获取重新获取到的数据可以用：监听，计算属性，watchEffect
// 获取meta
const $route = useRoute()
console.log(111,$route.matched);
//计算属性设置面包屑
const breadList = computed(() => {let arr:Array<metaItem> =[]//循环当前路由下的meta$route.matched.forEach(item => {//判断当前meta是否有title或pathif(item.meta?.title){arr.push(item.meta)}})return arr
})

侦听器设置面包屑

import { computed,watch,ref} from 'vue';
//侦听器设置面包屑-监听某一个属性()，回调，立即执行
let breadList2 = ref<Array<metaItem>>([])
watch($route,()=>{breadList2.value=[]$route.matched.forEach(item => {//判断当前meta是否有title或pathif(item.meta?.title){breadList2.value.push(item.meta)}})},{immediate:true //立即执行}
)

watchEffect设置面包屑

import { computed,watch,ref,watchEffect} from 'vue';
//watcheffect设置面包屑  副作用监听 会初始化执行里面代码 里面有响应式数据变化都会执行代码
let breacList3 = ref<Array<metaItem>>([])
const stop = watchEffect((deCleanr) => {breacList3.value = []$route.matched.forEach(item => {if (item.meta?.title) {breacList3.value.push(item.meta)}})deCleanr(() => {// 清除副作用})
})
// 调用stop函数后，watchEffect将停止监听
stop()

右侧下拉菜单的实现，点击退出登录

<el-dropdown @command="handleCommand"><span class="el-dropdown-link">欢迎您，xxx<el-icon class="el-icon--right"><arrow-down /></el-icon></span><template #dropdown><el-dropdown-menu><el-dropdown-item command="/login">退出登录</el-dropdown-item></el-dropdown-menu></template></el-dropdown>

import { useRoute, useRouter } from "vue-router";
//下拉菜单的事件
const $router = useRouter();
const handleCommand = (command: string) => {$router.push(command);
};

登录页面

静态

登录验证实现

<template><div class="login df aic jcc"><div class="mr-1"><h2 class="font-weight">我是文字我是文字</h2><h1 class="font-weight mt-2 border-bottom-c pb-1">我是文字</h1><h2 class="font-weight mt-2">我是文字我是文字</h2></div><div class="right rounded p15"><h2 class="font-weight mb-3">欢迎登录</h2><el-form :model="loginFormData" :rules="rules" status-icon ref="loginFormRef"><el-form-item prop="account"><el-input v-model="loginFormData.account"><template #prefix><el-icon class="el-input__icon"><svg-icon name="icon-yonghu1"></svg-icon></el-icon></template></el-input></el-form-item><el-form-item prop="password"><el-input v-model="loginFormData.password" type="password"><template #prefix><el-icon class="el-input__icon"><svg-icon name="icon-tianchongxing-1"></svg-icon></el-icon> </template></el-input></el-form-item><el-form-item><el-button type="primary" class="login-btn" @click="handleLogin(loginFormRef)">登录</el-button></el-form-item></el-form></div></div>
</template><script setup lang="ts">
import { ref,reactive } from "vue";
import type { FormInstance, FormRules } from 'element-plus';
import { useRouter } from "vue-router"
//登录数据约束
interface loginForm {account: string;password: string;
}
//登录数据
const loginFormData = ref<loginForm>({account: "",password: "",
});
const loginFormRef = ref<FormInstance>()
const $router = useRouter()
//验证规则
const rules = reactive<FormRules>({account: [{ required: true, message: "请输入账号", trigger: "blur" },{ min: 3, max: 6, message: "账号需为3-6位", trigger: "blur" },],password: [{ required: true, message: "请输入密码", trigger: "blur" },{ min: 6, max: 12, message: "密码需为6-12位", trigger: "blur" },],
});//登录函数
const handleLogin = (formEl: FormInstance | undefined) => {if(!formEl) returnformEl.validate((valid)=>{$router.push('/data')})
}
</script><style scoped lang="scss">
.login {height: 100%;background-color: #e5e5e5;.right {width: 240px;height: 260px;background-color: white;.login-btn {width: 100%;}}
}
</style>