经过前边的处理，用户登录，侧边栏渲染，路由跳转，登录信息展示，用户退出。这些功能最小化完成。如下图所示。
在线预览，可切换角色。新用户注册，有一个默认角色。只有测试账号有多角色。
打开后台域名任意 url 。在路由全局守卫中。 如果用户已登录（存在 token），先判断用户信息是否初始化，如果没有，先请求用户信息（返回数据不仅有用户信息，还有该用户对应的后台权限【用户生产菜单】），处理存储用户信息，添加路由信息。再重定向。如果已初始化，就继续。如果用户没登录，先重定向到登录页面。
调用接口，请求登录。获取用户的 token。存储 token。
通过 token，请求用户信息（数据中包括用户的权限数据），存储用户信息以及权限数据。处理权限数据，生成菜单。
做了一些基础的配置。现在准备开始做布局了。这里只要两种布局，空白布局和后台布局。空白布局什么时候用呢，登录页面会用到。后台布局，就后台真正内容会用到。始终喜欢极简风格，所以方方面面都不要搞的太复杂。后台布局页面主要有左侧菜单栏，顶部信息栏，中间内如区域构成。
要做好这些，先温习一下 vue3 的 vue-router 以及 transition 还有 element plus 的 menu 组件。当然，loading 相关的也会考虑进去。
额外一点。左侧菜单的内容（和路由会一一映射），请求 api 的权限，全部有后端生成。前端不做权限的控制。也就是后端返回过来的菜单是什么样子，前端就渲染成什么样子。
https://cn.vuejs.org/guide/built-ins/transition.html
https://element-plus.org/zh-CN/component/menu.html#collapse-%E6%8A%98%E5%8F%A0%E9%9D%A2%E6%9D%BF
先看看构成后台的三部分。这里建立了一个 layout，拆分成了三部分。
src/views
├── HomeView.vue
├── layouts
│ ├── components
│ │ ├── AppMain
│ │ │ └── AppMain.vue
│ │ ├── NavBar
│ │ │ └── NavBar.vue
│ │ └── SideBar
│ │ └── SideBar.vue
│ └── index.vue
└── test.vue路由是这样的。
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Layout from '@/views/layouts/index.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/test',
name: 'test',
component: Layout,
children: [
{
path: '',
name: 'test-child',
component: () => import('@/views/test.vue')
}
]
}
]
})
export default router这里只是初步尝试，没有做更细致的逻辑编写。
希望你的屏幕足够宽，希望一屏足够承载你的业务。如果不够，如果不可以。那么滚动条在所难免。那么滚动条怎么出现最好看呢。
一种方式如上图所示。还有一种，可以只在 content 区域左右上下滚动。个人觉得那种不好看,交互也不是很好。最好就是一屏足够承载吧。
side bar 和 nav bar 都没使用背景色。滑动中间区域会看到穿透。真正做时，会有背景色，z-index 也会高出一些。
白天以及暗黑主题安排上，侧边栏展开收缩也安排上。
还有移动端的布局（小程序、h5、app 等等），特别是小程序。有的公司为了一套代码，给很多企业或多项目用。底部 tabbar 采用非原生写法，滚动条从顶滚到底，不仅滚动条丑，底部切换还会闪动。体验特不好。有时候为了好的滚动条效果，加入了 scroll-view 组件去控制。
这里，如果左侧菜单足够多，也会出现滚动条。这个在 side bar 内部去处理就好了。
丰富的互联网资源，用 svg 文件作为 icon 已经很常见了。这里使用 iconify 来处理 icon。 iconify 可以理解为一个管理封装各个 icon 的工具。
https://element-plus.org/zh-CN/component/icon.html
# 安装
pnpm install unplugin-icons unplugin-vue-components -D
# 修改 vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
css: {
preprocessorOptions: {
scss: {
additionalData: `
@use "@/assets/styles/element.scss";
@use "@/assets/styles/element-dark.scss";
@use "@/assets/styles/main.scss";
@use "@/assets/styles/preflight.scss";
`,
},
},
},
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver({
importStyle: "sass",
directives: true
})],
}),
Components({
dts: "./components.d.ts",
resolvers: [
IconsResolver({
prefix: "i", // 默认为i,设置为false则不显示前缀
enabledCollections: ["ep"],
alias: {
'icon': "ep", //配置别名
}
}),
ElementPlusResolver({
importStyle: "sass",
directives: true
})
],
}),
Icons({
autoInstall: true, // 是否自动安装对应的图标库，默认为true
scale: 1, // 图标缩放，默认为1
defaultStyle: "", // 图标style
defaultClass: "", // 图标class
compiler: 'vue3', // 编译方式，可选值：'vue2', 'vue3', 'jsx'
jsx: "react", // jsx风格：'react' or 'preact'
})
]
})安装和使用 tailwindcss
按照上边的链接的步骤，就可以安装好 tailwindcss 了。
只是在导入 scss 的时候，这里依旧写在 vite.config.ts 的配重中。
css: {
preprocessorOptions: {
scss: {
additionalData: `
@use "@/assets/styles/element.scss";
@use "@/assets/styles/element-dark.scss";
@use "@/assets/styles/main.scss";
`,
},
},
},并在 package.json 中增加配置。遵循使用 es 模块规范。
{
…,
"type": "module"
}运行起来，发现 tailwindcss 的默认样式已经生效了。
再完善 homeveiw，使用上 tailwindcss 看看。仅修改以下代码。
<div class="container mx-auto">
<h1 class="mt-4">Custom theme example (on demand)</h1>发现，整个大的容器 div 已经水平居中了。 有了 tailwindcss，就可以单独少写很多 css。直接在 div 中就可以实现样式的效果。而作为后台，又使用 element-plus，需要使用到定制化的样式已经比较少了。 tailwindcss 就刚好使用了一点点就能达到想要的效果。
可是，再仔细看页面，发现按钮的文字看不见了，其他样式也有缺陷。检查发现是 tailwindcss 的样式对 element-plus 的样式有影响。
先修改 tailwind.config.js 文件，加入以下配置。
export default {
corePlugins: {
preflight: false,
},
…再去下载 preflight.css 文件，下载地址 [https://unpkg.com/browse/tailwindcss@3.3.3/src/css/preflight.css]() 注意，和自己安装版本的对应。
还是一样，改名为 prefight.scss 后，配置引入它。并注释掉有冲突的样式。这里把对按钮这块的处理样式给注释掉了。
// button,
// [type='button'],
// [type='reset'],
// [type='submit'] {
// -webkit-appearance: button; /* 1 */
// background-color: transparent; /* 2 */
// background-image: none; /* 2 */
// }然后发现，按钮的样式回来了。
git add .
git commit -m '安装和配置 tailwindcss'前边一篇说了 element-plus 覆盖主题色的操作。这边就要做多主题的处理。也就是除了默认的主题，还得增加一个暗黑主题。
https://element-plus.org/zh-CN/guide/dark-mode.html
思路还是一样，覆盖主题（颜色，间距等）。
# 创建
touch assets/styles/element-dark.scss
@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
$bg-color: (
'page': #0a0a0a,
'': #626aef,
'overlay': #1d1e1f,
),
$colors:(
"primary": ("base": green),
)
);
@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;在 vite.config.ts 中引入。
preprocessorOptions: {
scss: {
additionalData: `
@use "@/assets/styles/element.scss";
@use "@/assets/styles/element-dark.scss";
`,
},
},这样，样式就好了。可以手动在 html 节点加入 class="dark" 看看效果。发现背景颜色已经是黑色（#0a0a0a）了。
多主题，是一个站点的常规配置。至少白天主题和夜晚主题是必须要有的。 element-plus 提供了一个很好的实现多主题的方案。先从修改默认主题色开始。
https://element-plus.org/zh-CN/guide/theming.html
先安装 sass
pnpm add -D sass再创建覆盖默认主题颜色的 sass 文件
# 创建
touch assets/styles/element.scss
# 填充以下内容
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'primary': (
'base': #003261,
),
'success': (
'base': #21ba45,
),
'warning': (
'base': #f2711c,
),
'danger': (
'base': #db2828,
),
'error': (
'base': #db2828,
),
'info': (
'base': #42b8dd,
),
),
$button-padding-horizontal: (
'default': 80px,
)
);Please use another name or delete the machine with the existing name, and try again
A VirtualBox machine with the name 'homestead' already exists.
Please use another name or delete the machine with the existing
name, and try again.
之前在mac上安装laravel/homestead vagrant虚拟机环境时由于参照的教程是： 每次都必须在~/Homestead目录下边运行vagrant up/halt命令，觉得实在是不方便，于是乎按照另外一个教程（在任何目录下可以通过homestead up来启动虚拟机）来配置环境，但是当键入homestead up时，却报出
==> default: Importing base box 'laravel/homestead'...
==> default: Matching MAC address for NAT networking...
A VirtualBox machine with the name 'homestead' already exists.
Please use another name or delete the machine with the existing
name, and try again.
这样的错误
stackoverflow上好几个人说通过vagrant global-status 查看虚拟器，然后在vagrant destroy {id}删除对应名称的虚拟机可以解决问题，但是重复n遍homestead up或者到~/Homestead下运行vagrant up之后,还是会报出上边的错误，后来通过VBoxManage list vms获取虚拟机列表，然后在通过运行
VBoxManage unregistervm homestead --delete
之后，重新运行homestead up之后 一切回归正常
https://element-plus.org/zh-CN/guide/installation.html
pnpm install element-plus首先安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件。
pnpm add -D unplugin-vue-components unplugin-auto-import编辑 vite.config.ts，添加以下配置。
import { defineConfig } from 'vite'
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()],
}),
],
})只是想用 vue3 + ts + element-plus 技术栈做一个后台管理系统。ui 组件库蛮多的，还是觉得各个方面 element-plus 都不错，就选它。还有一些其他的插件比如 tailwindcss，echarts 等。不想那么咋，就先不用。echarts 后边肯定是会用上。
https://cn.vuejs.org/guide/introduction.html
https://element-plus.org/zh-CN/#/zh-CN
# 创建项目
pnpm create vue
# 项目名称 simpleAdmin
# 选择使用 ts
# 选择 vue router
# 选择 pinia
# 选择 eslint
# 选择 prettier format code
# 其他我都不要
# 在 mysql 中，先查询出 sql_mode
show variables like 'sql_mode';
# 编辑修改
sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf
# 没有就追加，有就修改
# 先备份一个全的
# sql_mode=ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION
sql_mode =这里你填需要的
# 重启
sudo service mysql restart