Vue3陪诊系统 真实业务 能够快速上手

序章

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