序章
vue3陪诊系统,包含陪诊后台管理系统,用户C端。里面涉及上百个功能模块和真实的后台接口,能够通过微信支付真实下单并在后台处理订单状态。整个项目从0到1搭建,使用最新的vue3的组合式(Composition Api)技术栈,推荐指数:5颗星!
视频学习链接: vue3陪诊系统-含后台接口文档真实支付下单流程-零基础从0到1详细的入门保姆级别教程——哔哩哔哩bilibili
环境配置
node版本:需要 Node.js 版本 20+
编辑器:VScode
技术栈:vue3 + vue-router + vuex + vite + Element Plus + Vant
项目效果
路由搭建
路由创建
创建路由和对应页面
引入vue-router 创建路由实例
挂载router到vue实例上
对应页面使用配置路由显示
UI框架
Element Plus https://element-plus.org/zh-CN
安装步骤
-
下载依赖npm install element-plus
-
按需引入
- 执行命令
npm install -D unplugin-vue-components unplugin-auto-import
- 执行命令
-
vite配置修改,注意:修改配置后需要重启项目
// 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()],
}),
],
})
页面Layout布局
引入 Container 布局容器
aside组件内容
通过useRouter获取数据
使用递归组件来实现
@element-plus/icons-vued的引入
header组件内容
flex布局
引入vuex实现组件通信
点击按钮展开收起菜单
tag显示和点击关闭逻辑
用户鉴权
用户注册
用户登录获取token和userinfo缓存
请求头携带token传给后端
响应拦截器进行校验
前置路由守卫对token进行校验
权限配置
创建菜单权限
账号管理关联菜单权限
登录后调用权限接口获取菜单数据
路由动态配置
讲到这里,整个项目搭建过程就完成了,由于篇幅有限,详情的视频教学 视频学习链接: vue3陪诊系统-含后台接口文档真实支付下单流程-零基础从0到1详细的入门保姆级别教程——哔哩哔哩bilibili