经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
使用vue3搭建后台系统的详细步骤
来源:jb51  时间:2022/8/22 18:18:42  对本文有异议

首先使用npm 或者yarn创建一个vue项目

  1. // 使用npm创建一个基于vite构建的vue项目
  2. npm create vite@latest
  3. // 使用yarn创建一个基于vite构建的vue项目
  4. yarn create vite@latest

在创建的构成中选择       

  1. vue???????
  2. vue-ts

创建完之后将项目拖到编译器打开

一、配置vite

在vite.config.ts文件中配置项目的服务数据,配置如下:

  1. // 此处配置项目服务参数
  2. server: {
  3. host: "0.0.0.0", // 项目运行地址,此处代表localhost
  4. port: 8888, // 项目运行端口
  5. open: true, //编译之后是否自动打开页面
  6. hmr: true, // 是否开启热加载
  7. },

之后server下方接着配置src的别名@,配置如下

  1. // 配置src的别名@
  2. resolve: {
  3. alias: {
  4. "@": resolve(__dirname, "./src"),
  5. },
  6. },

此外还需在ts的配置文件tsconfig.json中加入以下配置:

  1. "baseUrl": "./", // 配置路径解析的起点
  2. "paths": { // 配置src别名
  3. "@/*": ["src/*"] // 当我们输入@/时会被映射成src/
  4. }

二、router路由

1、安装router路由

  1. npm install vue-router@latest
  2. yarn add vue-router@latest

2、配置router路由

在src下新建router文件夹,同时创建index.ts并配置如下

  1. import { createRouter, createWebHistory, RouteRecordRaw} from 'vue-router';
  2. import Layout from '@/components/HelloWorld.vue'
  3. // 定义路由,此处为Array数组,数据类型为RouteRecordRaw
  4. const routes: Array<RouteRecordRaw> = [
  5. {
  6. path: '/home',
  7. name: 'home',
  8. component: Layout
  9. }
  10. ]
  11. // 创建路由
  12. const router = createRouter({
  13. history: createWebHistory(),
  14. routes // 将定义的路由传入
  15. })
  16. // 将创建的router路由暴露,使其在其他地方可以被引用
  17. export default router

3、注册router路由

在main.ts中先通过        import router from '@/router/index'         引入路由,然后使用use函数注册路由,具体如下:

  1. import { createApp } from 'vue'
  2. import './style.css'
  3. import App from './App.vue'
  4. // 此处引入定义的路由
  5. import router from '@/router/index'
  6. // createApp(App).mount('#app')
  7. // 此处将链式创建拆解,从中注册路由
  8. const app = createApp(App);
  9. // 注册路由
  10. app.use(router)
  11. app.mount('#app')

4、使用router路由

注册完成之后,在程序入口App.vue中通过 <router-view></router-view> 使用路由,具体如下:

  1. <template>
  2. <!-- <div>
  3. <a href="https://vitejs.dev" rel="external nofollow" target="_blank">
  4. <img src="/vite.svg" class="logo" alt="Vite logo" />
  5. </a>
  6. <a href="https://vuejs.org/" rel="external nofollow" target="_blank">
  7. <img src="@/assets/vue.svg" class="logo vue" alt="Vue logo" />
  8. </a>
  9. </div> -->
  10. <!-- 在App的入口程序使用路由,会将我们注册的路由全部引入到App入口,通过路由的路径确定跳转的页面 -->
  11. <router-view></router-view>
  12. </template>

三、安装element plus等其他依赖

  1. # 选择一个你喜欢的包管理器
  2. // 安装element-plus
  3. npm install element-plus --save
  4. yarn add element-plus
  5. pnpm install element-plus
  6. // 安装element-plus的图标库组件
  7. npm install @element-plus/icons-vue
  8. yarn add @element-plus/icons-vue
  9. pnpm install @element-plus/icons-vue

1、注册element plus并配置图标

和router一样都是在main.ts中注册,配置如下:

  1. import { createApp } from "vue";
  2. import "./style.css";
  3. import App from "./App.vue";
  4. // 次数引入定义的路由
  5. import router from "@/router/index";
  6. // 引入element-plus
  7. import ElementPlus from "element-plus";
  8. import "element-plus/dist/index.css";
  9. // 引入element-plus的图标库
  10. import * as ElementPlusIconsVue from "@element-plus/icons-vue";
  11. // createApp(App).mount('#app')
  12. // 此处将链式创建拆解,从中注册路由
  13. const app = createApp(App);
  14. // 注册路由、element-plus等
  15. app.use(router).use(ElementPlus);
  16. // 将所有配置挂载到index.html的id为app的容器上
  17. app.mount("#app");
  18. // 此处参考官网,意为将图标库中的每个图标都注册成组件
  19. for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  20. app.component(key, component);
  21. }

四、pinia使用                                

pinia官网

1、安装pinia

  1. yarn add pinia
  2. # 或者使用 npm
  3. npm install pinia

2、注册pinia

  1. // 从pinia中引入创建实例的函数
  2. import { createPinia } from 'pinia'
  3. // 使用createPinia函数创建一个pinia实例并注册
  4. app.use(createPinia())

3、配置pinia

在src下面新建store文件夹并新建index.ts文件,并配置如下:

  1. // 从pinia中引入defineStore函数来定义store
  2. import { defineStore } from "pinia";
  3. // 定义一个store并取名为useStore
  4. // defineStore第一个参数是应用程序中store的唯一标识,也就是在定义其他store时该标识不能相同
  5. // 此处可以类比为java中的实体类,useStore就是类名,state里的属性是成员属性,getters里的函数是getter方法,actions里的函数是setter方法
  6. export const useStore = defineStore("useStore", {
  7. // 定义state
  8. // 推荐使用 完整类型推断的箭头函数
  9. state: () => {
  10. return {
  11. // 所有这些属性都将自动推断其类型
  12. count: 0,
  13. name: "Eduardo",
  14. isAdmin: true,
  15. };
  16. },
  17. // 定义getters,里面定义一些对state值的取值操作
  18. // 指向箭头函数定义的时候所处的对象,而不是其所使用的时候所处的对象,默认指向父级的this
  19. // 普通函数中的this指向它的调用者,如果没有调用者则默认指向window
  20. getters: {
  21. doubleCount: (state) => state.count * 2,
  22. doubleCountOne(state) {
  23. return state.count * 2;
  24. },
  25. doublePlusOne(): number {
  26. return this.count * 2 + 1;
  27. },
  28. },
  29. // 定义actions,里面定义一些对state的赋值操作
  30. actions: {
  31. setCounter(count:number){
  32. this.count = count
  33. }
  34. }
  35. });
  36. // 1、只有一个参数的时候,参数可以不加小括号,没有参数或2个及以上参数的,必须加上小括号
  37. // 2、返回语句只有一条的时候可以不写{}和return,会自动加上return的,返回多条语句时必须加上{}和return
  38. // 3、箭头函数在返回对象的时候必须在对象外面加上小括号
  39. // 在vue中定义函数时,我们尽量都指明函数返回值类型以及参数的数据类型

4、测试pinia

  1. <template>
  2. <!-- 测试element-plus -->
  3. <el-button type="primary">Primary</el-button>
  4. <!-- 测试element-plus图标 -->
  5. <div style="font-size: 20px">
  6. <Edit style="width: 1em; height: 1em; margin-right: 8px" />
  7. <Share style="width: 1em; height: 1em; margin-right: 8px" />
  8. <Delete style="width: 1em; height: 1em; margin-right: 8px" />
  9. <Search style="width: 1em; height: 1em; margin-right: 8px" />
  10. </div>
  11. <h2>方式一、直接通过store.count++</h2>
  12. <!-- 测试pinia -->
  13. <h3>直接从store取值并测试pinia:{{ count }}</h3>
  14. <el-button type="primary" @click="addCount">增加</el-button>
  15. <h3>使用storeToRefs函数解析store后测试pinia:{{ count1 }}</h3>
  16. <el-button type="primary" @click="addCount1">增加</el-button>
  17. <h2>方式二、通过调用store中的函数</h2>
  18. <h3>通过store中的函数并测试pinia:{{ count1 }}</h3>
  19. <el-button type="primary" @click="addCount2">增加</el-button>
  20. </template>
  21. <script setup lang="ts">
  22. import { useStore } from "@/store/index";
  23. import { storeToRefs } from "pinia"; // 解析store中的数据,如成员属性、方法
  24. // 创建了一个useStore实例对象
  25. const store = useStore();
  26. // 增加成员属性count的值,方式一、直接通过store.count++
  27. // 拿到成员属性count,但这样取值会失去响应性,也就是不能实时同步,当我们点击增加按钮后,虽然操作已经完成,count也增加了,但展示有延迟
  28. // 这个取值过程可能涉及解析数据,从而导致函数执行完后数据没有变化
  29. const count = store.count;
  30. const addCount = () => {
  31. store.count++;
  32. };
  33. // 通过pinia中的storeToRefs函数将store中的数据都进行解析
  34. const count1 = storeToRefs(store).count;
  35. const addCount1 = () => {
  36. store.count++;
  37. };
  38. // 方式二、通过调用store中的函数
  39. const addCount2 = () => {
  40. store.setCounter(++store.count)
  41. };
  42. </script>
  43. <style scoped>
  44. .read-the-docs {
  45. color: #888;
  46. }
  47. </style>

五、layout布局

在配置layout之前,我们还需要对一些标签做初始化的样式设置,比如:html、body等,具体如下

在项目的index.html文件下添加样式设置

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <link rel="icon" type="image/svg+xml" href="/vite.svg" rel="external nofollow" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Vite + Vue + TS</title>
  8. </head>
  9. <body>
  10. <!-- 此处为程序的最终入口,会引入App.vue 并将相应的配置挂载到id为app <div id="app"></div> 上 -->
  11. <div id="app"></div>
  12. <script type="module" src="/src/main.ts"></script>
  13. </body>
  14. </html>
  15. <!-- 这里对html、body、挂载容器div做样式的初始化设置,去除原有的设置 -->
  16. <style lang="less">
  17. html,body,#app {
  18. padding: 0px;
  19. margin: 0px;
  20. height: 100%;
  21. box-sizing: border-box;
  22. }
  23. #app {
  24. width: 100%;
  25. max-width: 100%;
  26. }
  27. </style>

之后在src下新建layout文件夹并新建index.vue文件,配置如下:

整个el-container为layout布局的整体,其下又可以按照布局的不同划分出不同的区块,但总结起来可以划分为:1、侧边菜单栏;2、头部区;3、内容展示区;4、尾部区,我们根据自己的需要进行选择组合,这些划分出来的区块涉及到不同的配置和处理,因此,我们可以将这些大的区块从layout整体布局中抽离成组件,让代码拥有更好的可读性;此外,每个抽离的组件自己本身也可能存在需要拆分的问题。我们通过拆分,可以很好的将一个问题化繁为简,从而很轻松的解决。

  1. <template>
  2. <el-container class="container">
  3. <!-- layout布局左侧菜单区 -->
  4. <el-aside width="200px" class="aside">
  5. <!-- 菜单项,通过组件的形式引入 -->
  6. <Menu></Menu>
  7. </el-aside>
  8. <!-- layout布局内容区 -->
  9. <el-container>
  10. <!-- 内容区头部 -->
  11. <el-header class="header">
  12. <!-- 头部组件,抽离成组件形式 -->
  13. <Header></Header>
  14. </el-header>
  15. <!-- 内容区的主体,用于数据展示 -->
  16. <el-main class="content">Main</el-main>
  17. </el-container>
  18. </el-container>
  19. </template>
  20. <script setup lang="ts">
  21. // vue3中组件引入后不需要使用conponents注册,可以直接使用
  22. import Header from '@/layout/header/Header.vue'
  23. import Menu from '@/layout/menu/Menu.vue'
  24. </script>
  25. <style scoped lang="less">
  26. .container {
  27. height: 100%;
  28. .aside {
  29. background-color: antiquewhite;
  30. }
  31. .header {
  32. background-color: aquamarine;
  33. }
  34. .content {
  35. background-color: pink
  36. }
  37. }
  38. </style>

从layout布局抽离的菜单栏组件:

  1. <template>
  2. <el-menu
  3. default-active="2"
  4. class="el-menu-vertical-demo"
  5. :unique-opened='uniqueOpenedFlag'
  6. >
  7. <!-- 在为el-menu设置unique-opened属性时必须要确保el-sub-menu、el-menu-item中index的唯一性,如果index不唯一则不生效 -->
  8. <!-- 本组件作为父组件向子组件传递数据menuList,子组件需要定义menuList属性以确保可以接受该数据 -->
  9. <menu-item :menuList="menuList"></menu-item>
  10. </el-menu>
  11. </template>
  12. <script setup lang="ts">
  13. import { ref, reactive } from "vue";
  14. import MenuItem from "@/layout/menu/item/MenuItem.vue";
  15. // 自定义的假的树形菜单数据
  16. // reactive函数用来处理响应式数据,处理的数据一般是复杂类型数据,如对象类型
  17. // ref函数也可以处理响应式数据,不过数据一般是基本数据类型
  18. const isCollapse = ref(false)
  19. const uniqueOpenedFlag = ref(true)
  20. const menuList = reactive([
  21. {
  22. path: "/system",
  23. name: "system",
  24. component: "Layout",
  25. meta: {
  26. title: "系统管理",
  27. icon: "Setting",
  28. roles: ["sys:manage"],
  29. },
  30. children: [
  31. {
  32. path: "/worker",
  33. name: "worker",
  34. component: "Layout",
  35. meta: {
  36. title: "员工管理",
  37. icon: "Setting",
  38. roles: ["sys:manage"],
  39. },
  40. },
  41. {
  42. path: "/happy",
  43. name: "happy",
  44. component: "Layout",
  45. meta: {
  46. title: "菜单管理",
  47. icon: "Setting",
  48. roles: ["sys:manage"],
  49. },
  50. },
  51. ],
  52. },
  53. {
  54. path: "/mail",
  55. name: "mail",
  56. component: "Layout",
  57. meta: {
  58. title: "商场管理",
  59. icon: "Setting",
  60. roles: ["sys:manage"],
  61. },
  62. children: [
  63. {
  64. path: "/worker11",
  65. name: "worker11",
  66. component: "Layout",
  67. meta: {
  68. title: "员工管理22",
  69. icon: "Setting",
  70. roles: ["sys:manage"],
  71. },
  72. },
  73. {
  74. path: "/happy22",
  75. name: "happy22",
  76. component: "Layout",
  77. meta: {
  78. title: "菜单管理22",
  79. icon: "Setting",
  80. roles: ["sys:manage"],
  81. },
  82. },
  83. ],
  84. },
  85. ]);
  86. </script>
  87. <style lang="less" scoped></style>

从菜单栏抽离的菜单项组件:

  1. <template>
  2. <template v-for="item in menuList" :key="item.path">
  3. <!-- 判断该菜单项是否有子菜单 -->
  4. <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.path" >
  5. <template #title>
  6. <el-icon>
  7. <!-- 通过动态组件展示图标,因为图标数据一般是通过后端查数据库拿到的 -->
  8. <component :is="item.meta.icon"></component>
  9. </el-icon>
  10. <span>{{ item.meta.title }}</span>
  11. </template>
  12. <!-- 递归调用,将子菜单传递给组件处理 -->
  13. <menu-item :menuList="item.children"></menu-item>
  14. </el-sub-menu>
  15. <el-menu-item v-else :index="item.path">
  16. <el-icon>
  17. <!-- 通过动态组件展示图标 -->
  18. <component :is="item.meta.icon"></component>
  19. </el-icon>
  20. <span>{{ item.meta.title }}</span>
  21. </el-menu-item>
  22. </template>
  23. </template>
  24. <script setup lang="ts">
  25. import {
  26. Document,
  27. Menu as IconMenu,
  28. Location,
  29. Setting,
  30. } from "@element-plus/icons-vue";
  31. // 子组件接受父组件传递的数据
  32. // 本组件为子组件,接受父组件传过来的数据,此处定义menuList属性,接受父组件传递的menuList数据
  33. defineProps(["menuList"]);
  34. </script>
  35. <style lang="less" scoped></style>

六、菜单栏logo

首先,将自己准备的logo图片放到src下的assets文件夹下,然后在layout的menu的logo文件夹下新建MenuLogo.vue文件,并配置如下:

  1. <template>
  2. <div class="logo">
  3. <img :src="Logo" />
  4. <span class="logo-title">{{ title }}</span>
  5. </div>
  6. </template>
  7. <script setup lang="ts">
  8. import { ref } from "vue";
  9. import Logo from "@/assets/logo.png";
  10. const title = ref("博客管理系统");
  11. </script>
  12. <style lang="less" scoped>
  13. .logo {
  14. display: flex; // 弹性布局
  15. width: 100%;
  16. height: 60px;
  17. line-height: 60px;
  18. background-color: rgb(234, 255, 127);
  19. text-align: center;
  20. cursor: pointer; // 鼠标悬浮在元素上时,鼠标从箭头变成小手
  21. align-items: center;
  22. img {
  23. width: 36px;
  24. height: 36px;
  25. margin-left: 20px; // 元素的外边距
  26. margin-right: 12px;
  27. }
  28. .logo-title {
  29. font-weight: 800; // 800为加粗
  30. color: black;
  31. font-size: 20px;
  32. line-height: 60px; // 元素上下居中
  33. font-family: FangSong; // 字体类型
  34. }
  35. }
  36. </style>

最后在菜单栏组件中引入菜单logo组件并使用

  1. // 在script标签中引入
  2. import MenuLogo from "@/layout/menu/logo/MenuLogo.vue";
  3. // el-menu标签上方引入使用
  4. <menu-logo></menu-logo>

效果如下:

七、路由和页面联动

在src的router的index.ts文件下添加如下路由配置并在views文件夹下创建对应的文件

  1. {
  2. path: "/",
  3. component: Layout, // 每个路由都需要通过component指定归属的布局组件
  4. redirect: "/index",
  5. name: "Root",
  6. children: [
  7. {
  8. path: "/index",
  9. name: "Index",
  10. component: () => import("@/views/index/index.vue"),
  11. meta: {
  12. title: "首页看板",
  13. icon: "icon-home",
  14. affix: true,
  15. noKeepAlive: true,
  16. },
  17. },
  18. ],
  19. },
  20. {
  21. path: "/comp",
  22. component: Layout,
  23. name: "Comp",
  24. meta: { title: "系统管理", icon: "icon-code" },
  25. children: [
  26. {
  27. path: "/element",
  28. name: "ElementComp",
  29. component: () => import("@/views/element/index.vue"),
  30. meta: {
  31. title: "菜单管理",
  32. icon: "icon-code",
  33. },
  34. },
  35. {
  36. path: "/iconPark",
  37. name: "IconPark",
  38. component: () => import("@/views/icon/index.vue"),
  39. meta: {
  40. title: "路由管理",
  41. icon: "icon-like",
  42. },
  43. },
  44. {
  45. path: "/chart",
  46. name: "Chart",
  47. component: () => import("@/views/echarts/index.vue"),
  48. meta: {
  49. title: "员工管理",
  50. icon: "icon-chart-line",
  51. },
  52. children: [
  53. {
  54. path: "/line",
  55. name: "Line",
  56. component: () => import("@/views/echarts/line.vue"),
  57. meta: {
  58. title: "商品管理",
  59. },
  60. },
  61. {
  62. path: "/bar",
  63. name: "Bar",
  64. component: () => import("@/views/echarts/bar.vue"),
  65. meta: {
  66. title: "手机管理",
  67. },
  68. },
  69. {
  70. path: "/otherChart",
  71. name: "OtherChart",
  72. component: () => import("@/views/echarts/other.vue"),
  73. meta: {
  74. title: "会员管理",
  75. },
  76. },
  77. ],
  78. },
  79. ],
  80. },
  81. {
  82. path: "/errorPage",
  83. name: "ErrorPage",
  84. component: Layout,
  85. meta: {
  86. title: "用户管理",
  87. icon: "icon-link-cloud-faild",
  88. },
  89. children: [
  90. {
  91. path: "/404Page",
  92. name: "404Page",
  93. component: () => import("@/views/errorPage/404.vue"),
  94. meta: {
  95. title: "角色管理",
  96. icon: "icon-link-cloud-faild",
  97. },
  98. },
  99. {
  100. path: "/401Page",
  101. name: "401Page",
  102. component: () => import("@/views/errorPage/401.vue"),
  103. meta: {
  104. title: "权限管理",
  105. icon: "icon-link-interrupt",
  106. },
  107. },
  108. ],
  109. },

添加完路由配置之后,创建路由的对应文件并添加一些描述文字,此时虽然路由和对应的页面都已经创建完毕并关联在了一起,但路由并没有被引用,也就无法在正确的位置展示路由页面的数据,所以,我们需要将路由引用到layout布局的main区域,也就是数据展示区,确保当我们访问某个路由时,对应的路由页面能够在该区域展示。

1、路由和页面联动的注意细节

在菜单项组件中,我们给菜单项的index属性绑定了路由的path值,其用意是为了启用element-plus中提供的一种在激活导菜单时(当我们点击某个菜单项时,该菜单项就是被激活的菜单)以index作为path进行路由跳转,所以为了我使用这个功能,我们还需要在菜单栏组件的el-menu标签中添加 router 属性以开启该功能,同时再添加 default-active 属性来指明当前被激活的菜单。用例如下

  1. <template>
  2. <menu-logo></menu-logo>
  3. <el-menu
  4. :default-active="activeIndex"
  5. class="el-menu-vertical-demo"
  6. :unique-opened="uniqueOpenedFlag"
  7. router
  8. >
  9. <!-- 在为el-menu设置unique-opened属性时必须要确保el-sub-menu、el-menu-item中index的唯一性,如果index不唯一则不生效 ,一般我们为index绑定路由的path值 -->
  10. <!-- 本组件作为父组件向子组件传递数据menuList,子组件需要定义menuList属性以确保可以接受该数据 -->
  11. <!-- router属性可以激活以 index 作为 path 进行路由跳转 -->
  12. <!-- default-active属性用来指明当前被激活的菜单,其值为菜单项中index的值,也就是path值 -->
  13. <menu-item :menuList="menuList"></menu-item>
  14. </el-menu>
  15. </template>
  16. import { useRouter, useRoute } from "vue-router";
  17. // 获取当前点击的路由
  18. const route = useRoute();
  19. // 从路由中获取path
  20. const activeIndex = computed(() => {
  21. const { path } = route;
  22. return path;
  23. });

到此这篇关于使用vue3搭建后台系统的过程记录的文章就介绍到这了,更多相关vue3后台系统内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号