使用vue3搭建后臺系統(tǒng)的詳細步驟

更新時間：2022年08月22日 16:11:41 作者：龍茶清歡

這篇文章主要介紹了使用vue3搭建后臺系統(tǒng)的過程記錄,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

一、配置vite

在vite.config.ts文件中配置項目的服務(wù)數(shù)據(jù)，配置如下：

  // 此處配置項目服務(wù)參數(shù)
  server: {
    host: "0.0.0.0", // 項目運行地址，此處代表localhost
    port: 8888, // 項目運行端口
    open: true, //編譯之后是否自動打開頁面
    hmr: true, // 是否開啟熱加載
  },

之后server下方接著配置src的別名@，配置如下

  // 配置src的別名@
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  },

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

    "baseUrl": "./",                                // 配置路徑解析的起點
    "paths": {                                      // 配置src別名
      "@/*": ["src/*"]                              // 當我們輸入@/時會被映射成src/
    }

二、router路由

1、安裝router路由

npm install vue-router@latest
yarn add vue-router@latest

2、配置router路由

在src下新建router文件夾，同時創(chuàng)建index.ts并配置如下

import { createRouter, createWebHistory, RouteRecordRaw} from 'vue-router';
import Layout from '@/components/HelloWorld.vue'
 
// 定義路由，此處為Array數(shù)組，數(shù)據(jù)類型為RouteRecordRaw
const routes: Array<RouteRecordRaw> = [
    {
        path: '/home',
        name: 'home',
        component: Layout
    }
]
 
// 創(chuàng)建路由
const router = createRouter({
    history: createWebHistory(),
    routes      // 將定義的路由傳入
})
 
// 將創(chuàng)建的router路由暴露，使其在其他地方可以被引用
export default router

3、注冊router路由

在main.ts中先通過 import router from '@/router/index' 引入路由，然后使用use函數(shù)注冊路由，具體如下：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 此處引入定義的路由
import router from '@/router/index'
 
// createApp(App).mount('#app')
// 此處將鏈式創(chuàng)建拆解，從中注冊路由
const app = createApp(App);
// 注冊路由
app.use(router)
app.mount('#app')

4、使用router路由

注冊完成之后，在程序入口App.vue中通過 <router-view></router-view> 使用路由，具體如下：

<template>
  <!-- <div>
    <a  rel="external nofollow"  target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a  rel="external nofollow"  target="_blank">
      <img src="@/assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div> -->
  <!-- 在App的入口程序使用路由,會將我們注冊的路由全部引入到App入口,通過路由的路徑確定跳轉(zhuǎn)的頁面 -->
  <router-view></router-view>
</template>

三、安裝element plus等其他依賴

# 選擇一個你喜歡的包管理器
 
// 安裝element-plus
npm install element-plus --save
 
yarn add element-plus
 
pnpm install element-plus
 
// 安裝element-plus的圖標庫組件
npm install @element-plus/icons-vue
 
yarn add @element-plus/icons-vue
 
pnpm install @element-plus/icons-vue

1、注冊element plus并配置圖標

和router一樣都是在main.ts中注冊，配置如下：

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
// 次數(shù)引入定義的路由
import router from "@/router/index";
// 引入element-plus
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
// 引入element-plus的圖標庫
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
 
// createApp(App).mount('#app')
// 此處將鏈式創(chuàng)建拆解，從中注冊路由
 
const app = createApp(App);
// 注冊路由、element-plus等
app.use(router).use(ElementPlus);
// 將所有配置掛載到index.html的id為app的容器上
app.mount("#app");
 
// 此處參考官網(wǎng)，意為將圖標庫中的每個圖標都注冊成組件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}

四、pinia使用

pinia官網(wǎng)

1、安裝pinia

yarn add pinia
# 或者使用 npm
npm install pinia

2、注冊pinia

// 從pinia中引入創(chuàng)建實例的函數(shù)
import { createPinia } from 'pinia'
 
// 使用createPinia函數(shù)創(chuàng)建一個pinia實例并注冊
app.use(createPinia())

3、配置pinia

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

// 從pinia中引入defineStore函數(shù)來定義store
import { defineStore } from "pinia";
 
// 定義一個store并取名為useStore
// defineStore第一個參數(shù)是應(yīng)用程序中store的唯一標識，也就是在定義其他store時該標識不能相同
// 此處可以類比為java中的實體類，useStore就是類名，state里的屬性是成員屬性，getters里的函數(shù)是getter方法，actions里的函數(shù)是setter方法
export const useStore = defineStore("useStore", {
  // 定義state
  // 推薦使用 完整類型推斷的箭頭函數(shù)
  state: () => {
    return {
      // 所有這些屬性都將自動推斷其類型
      count: 0,
      name: "Eduardo",
      isAdmin: true,
    };
  },
 
  // 定義getters,里面定義一些對state值的取值操作
  // 指向箭頭函數(shù)定義的時候所處的對象，而不是其所使用的時候所處的對象，默認指向父級的this
  // 普通函數(shù)中的this指向它的調(diào)用者，如果沒有調(diào)用者則默認指向window
  getters: {
    doubleCount: (state) => state.count * 2,
    doubleCountOne(state) {
      return state.count * 2;
    },
    doublePlusOne(): number {
      return this.count * 2 + 1;
    },
  },
 
  // 定義actions,里面定義一些對state的賦值操作
  actions: {
    setCounter(count:number){
        this.count = count
    }
  }
});
 
// 1、只有一個參數(shù)的時候，參數(shù)可以不加小括號，沒有參數(shù)或2個及以上參數(shù)的，必須加上小括號
// 2、返回語句只有一條的時候可以不寫{}和return，會自動加上return的，返回多條語句時必須加上{}和return
// 3、箭頭函數(shù)在返回對象的時候必須在對象外面加上小括號
// 在vue中定義函數(shù)時，我們盡量都指明函數(shù)返回值類型以及參數(shù)的數(shù)據(jù)類型

4、測試pinia

<template>
  <!-- 測試element-plus -->
  <el-button type="primary">Primary</el-button>
 
  <!-- 測試element-plus圖標 -->
  <div style="font-size: 20px">
    <Edit style="width: 1em; height: 1em; margin-right: 8px" />
    <Share style="width: 1em; height: 1em; margin-right: 8px" />
    <Delete style="width: 1em; height: 1em; margin-right: 8px" />
    <Search style="width: 1em; height: 1em; margin-right: 8px" />
  </div>
 
  <h2>方式一、直接通過store.count++</h2>
  <!-- 測試pinia -->
  <h3>直接從store取值并測試pinia:{{ count }}</h3>
  <el-button type="primary" @click="addCount">增加</el-button>
 
  <h3>使用storeToRefs函數(shù)解析store后測試pinia:{{ count1 }}</h3>
  <el-button type="primary" @click="addCount1">增加</el-button>
 
    <h2>方式二、通過調(diào)用store中的函數(shù)</h2>
   <h3>通過store中的函數(shù)并測試pinia:{{ count1 }}</h3>
  <el-button type="primary" @click="addCount2">增加</el-button> 
</template>
 
<script setup lang="ts">
import { useStore } from "@/store/index";
import { storeToRefs } from "pinia"; // 解析store中的數(shù)據(jù)，如成員屬性、方法
 
// 創(chuàng)建了一個useStore實例對象
const store = useStore();
// 增加成員屬性count的值，方式一、直接通過store.count++
 
// 拿到成員屬性count,但這樣取值會失去響應(yīng)性，也就是不能實時同步，當我們點擊增加按鈕后，雖然操作已經(jīng)完成，count也增加了，但展示有延遲
// 這個取值過程可能涉及解析數(shù)據(jù)，從而導致函數(shù)執(zhí)行完后數(shù)據(jù)沒有變化
const count = store.count;
const addCount = () => {
  store.count++;
};
// 通過pinia中的storeToRefs函數(shù)將store中的數(shù)據(jù)都進行解析
const count1 = storeToRefs(store).count;
const addCount1 = () => {
  store.count++;
};
 
// 方式二、通過調(diào)用store中的函數(shù)
const addCount2 = () => {
  store.setCounter(++store.count)
};
</script>
 
<style scoped>
.read-the-docs {
  color: #888;
}
</style>

五、layout布局

在配置layout之前，我們還需要對一些標簽做初始化的樣式設(shè)置，比如：html、body等，具體如下

在項目的index.html文件下添加樣式設(shè)置

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" rel="external nofollow"  />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
  </head>
  <body>
    <!-- 此處為程序的最終入口,會引入App.vue 并將相應(yīng)的配置掛載到id為app <div id="app"></div> 上 -->
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
 
<!-- 這里對html、body、掛載容器div做樣式的初始化設(shè)置，去除原有的設(shè)置 -->
<style lang="less">
  html,body,#app {
    padding: 0px;
    margin: 0px;
    height: 100%;
    box-sizing: border-box;
  }
  #app {
    width: 100%;
    max-width: 100%;
  }
</style>

之后在src下新建layout文件夾并新建index.vue文件，配置如下：

整個el-container為layout布局的整體，其下又可以按照布局的不同劃分出不同的區(qū)塊，但總結(jié)起來可以劃分為：1、側(cè)邊菜單欄；2、頭部區(qū)；3、內(nèi)容展示區(qū)；4、尾部區(qū)，我們根據(jù)自己的需要進行選擇組合，這些劃分出來的區(qū)塊涉及到不同的配置和處理，因此，我們可以將這些大的區(qū)塊從layout整體布局中抽離成組件，讓代碼擁有更好的可讀性；此外，每個抽離的組件自己本身也可能存在需要拆分的問題。我們通過拆分，可以很好的將一個問題化繁為簡，從而很輕松的解決。

<template>
  <el-container class="container">
    <!-- layout布局左側(cè)菜單區(qū) -->
    <el-aside width="200px" class="aside">
      <!-- 菜單項，通過組件的形式引入 -->
      <Menu></Menu>
    </el-aside>
    <!-- layout布局內(nèi)容區(qū) -->
    <el-container>
      <!-- 內(nèi)容區(qū)頭部 -->
      <el-header class="header">
        <!-- 頭部組件，抽離成組件形式 -->
        <Header></Header>
      </el-header>
      <!-- 內(nèi)容區(qū)的主體，用于數(shù)據(jù)展示 -->
      <el-main class="content">Main</el-main>
    </el-container>
  </el-container>
</template>
 
<script setup lang="ts">
// vue3中組件引入后不需要使用conponents注冊，可以直接使用
import Header from '@/layout/header/Header.vue'
import Menu from '@/layout/menu/Menu.vue'
 
</script>
 
<style scoped lang="less">
.container {
  height: 100%;
  .aside {
    background-color: antiquewhite;
  }
  .header {
    background-color: aquamarine;
  }
  .content {
    background-color: pink
  }
}
</style>

從layout布局抽離的菜單欄組件：

<template>
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    :unique-opened='uniqueOpenedFlag'
  >
    <!-- 在為el-menu設(shè)置unique-opened屬性時必須要確保el-sub-menu、el-menu-item中index的唯一性，如果index不唯一則不生效 -->
    <!-- 本組件作為父組件向子組件傳遞數(shù)據(jù)menuList，子組件需要定義menuList屬性以確?？梢越邮茉摂?shù)據(jù) -->
    <menu-item :menuList="menuList"></menu-item>
  </el-menu>
</template>
 
<script setup lang="ts">
import { ref, reactive } from "vue";
import MenuItem from "@/layout/menu/item/MenuItem.vue";
 
// 自定義的假的樹形菜單數(shù)據(jù)
// reactive函數(shù)用來處理響應(yīng)式數(shù)據(jù)，處理的數(shù)據(jù)一般是復雜類型數(shù)據(jù)，如對象類型
// ref函數(shù)也可以處理響應(yīng)式數(shù)據(jù)，不過數(shù)據(jù)一般是基本數(shù)據(jù)類型
const isCollapse = ref(false)
const uniqueOpenedFlag = ref(true)
 
 
const menuList = reactive([
  {
    path: "/system",
    name: "system",
    component: "Layout",
    meta: {
      title: "系統(tǒng)管理",
      icon: "Setting",
      roles: ["sys:manage"],
    },
    children: [
      {
        path: "/worker",
        name: "worker",
        component: "Layout",
        meta: {
          title: "員工管理",
          icon: "Setting",
          roles: ["sys:manage"],
        },
      },
      {
        path: "/happy",
        name: "happy",
        component: "Layout",
        meta: {
          title: "菜單管理",
          icon: "Setting",
          roles: ["sys:manage"],
        },
      },
    ],
  },
  {
    path: "/mail",
    name: "mail",
    component: "Layout",
    meta: {
      title: "商場管理",
      icon: "Setting",
      roles: ["sys:manage"],
    },
    children: [
      {
        path: "/worker11",
        name: "worker11",
        component: "Layout",
        meta: {
          title: "員工管理22",
          icon: "Setting",
          roles: ["sys:manage"],
        },
      },
      {
        path: "/happy22",
        name: "happy22",
        component: "Layout",
        meta: {
          title: "菜單管理22",
          icon: "Setting",
          roles: ["sys:manage"],
        },
      },
    ],
  },
]);
 
</script>
 
<style lang="less" scoped></style>

從菜單欄抽離的菜單項組件：

<template>
  <template v-for="item in menuList" :key="item.path">
    <!-- 判斷該菜單項是否有子菜單 -->
    <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.path" >
      <template #title>
        <el-icon>
          <!-- 通過動態(tài)組件展示圖標，因為圖標數(shù)據(jù)一般是通過后端查數(shù)據(jù)庫拿到的 -->
          <component :is="item.meta.icon"></component>
        </el-icon>
        <span>{{ item.meta.title }}</span>
      </template>
      <!-- 遞歸調(diào)用，將子菜單傳遞給組件處理 -->
      <menu-item :menuList="item.children"></menu-item>
    </el-sub-menu>
    <el-menu-item v-else :index="item.path">
      <el-icon>
        <!-- 通過動態(tài)組件展示圖標 -->
        <component :is="item.meta.icon"></component>
      </el-icon>
      <span>{{ item.meta.title }}</span>
    </el-menu-item>
  </template>
</template>
 
<script setup lang="ts">
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
 
// 子組件接受父組件傳遞的數(shù)據(jù)
// 本組件為子組件，接受父組件傳過來的數(shù)據(jù)，此處定義menuList屬性，接受父組件傳遞的menuList數(shù)據(jù)
defineProps(["menuList"]);
</script>
 
<style lang="less" scoped></style>

六、菜單欄logo

首先，將自己準備的logo圖片放到src下的assets文件夾下，然后在layout的menu的logo文件夾下新建MenuLogo.vue文件，并配置如下：

<template>
  <div class="logo">
    <img :src="Logo" />
    <span class="logo-title">{{ title }}</span>
  </div>
</template>
 
<script setup lang="ts">
import { ref } from "vue";
import Logo from "@/assets/logo.png";
const title = ref("博客管理系統(tǒng)");
</script>
 
<style lang="less" scoped>
.logo {
  display: flex; // 彈性布局
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: rgb(234, 255, 127);
  text-align: center;
  cursor: pointer; // 鼠標懸浮在元素上時，鼠標從箭頭變成小手
  align-items: center;
  img {
    width: 36px;
    height: 36px;
    margin-left: 20px; // 元素的外邊距
    margin-right: 12px;
  }
  .logo-title {
    font-weight: 800; // 800為加粗
    color: black;
    font-size: 20px;
    line-height: 60px; // 元素上下居中
    font-family: FangSong; // 字體類型
  }
}
</style>

最后在菜單欄組件中引入菜單logo組件并使用

// 在script標簽中引入
import MenuLogo from "@/layout/menu/logo/MenuLogo.vue";
 
// el-menu標簽上方引入使用
<menu-logo></menu-logo>

效果如下：

七、路由和頁面聯(lián)動

在src的router的index.ts文件下添加如下路由配置并在views文件夾下創(chuàng)建對應(yīng)的文件

{
    path: "/",
    component: Layout,      // 每個路由都需要通過component指定歸屬的布局組件
    redirect: "/index",
    name: "Root",
    children: [
      {
        path: "/index",
        name: "Index",
        component: () => import("@/views/index/index.vue"),
        meta: {
          title: "首頁看板",
          icon: "icon-home",
          affix: true,
          noKeepAlive: true,
        },
      },
    ],
  },
  {
    path: "/comp",
    component: Layout,
    name: "Comp",
    meta: { title: "系統(tǒng)管理", icon: "icon-code" },
    children: [
      {
        path: "/element",
        name: "ElementComp",
        component: () => import("@/views/element/index.vue"),
        meta: {
          title: "菜單管理",
          icon: "icon-code",
        },
      },
      {
        path: "/iconPark",
        name: "IconPark",
        component: () => import("@/views/icon/index.vue"),
        meta: {
          title: "路由管理",
          icon: "icon-like",
        },
      },
      {
        path: "/chart",
        name: "Chart",
        component: () => import("@/views/echarts/index.vue"),
        meta: {
          title: "員工管理",
          icon: "icon-chart-line",
        },
        children: [
          {
            path: "/line",
            name: "Line",
            component: () => import("@/views/echarts/line.vue"),
            meta: {
              title: "商品管理",
            },
          },
          {
            path: "/bar",
            name: "Bar",
            component: () => import("@/views/echarts/bar.vue"),
            meta: {
              title: "手機管理",
            },
          },
          {
            path: "/otherChart",
            name: "OtherChart",
            component: () => import("@/views/echarts/other.vue"),
            meta: {
              title: "會員管理",
            },
          },
        ],
      },
    ],
  },
  {
    path: "/errorPage",
    name: "ErrorPage",
    component: Layout,
    meta: {
      title: "用戶管理",
      icon: "icon-link-cloud-faild",
    },
    children: [
      {
        path: "/404Page",
        name: "404Page",
        component: () => import("@/views/errorPage/404.vue"),
        meta: {
          title: "角色管理",
          icon: "icon-link-cloud-faild",
        },
      },
      {
        path: "/401Page",
        name: "401Page",
        component: () => import("@/views/errorPage/401.vue"),
        meta: {
          title: "權(quán)限管理",
          icon: "icon-link-interrupt",
        },
      },
    ],
  },

添加完路由配置之后，創(chuàng)建路由的對應(yīng)文件并添加一些描述文字，此時雖然路由和對應(yīng)的頁面都已經(jīng)創(chuàng)建完畢并關(guān)聯(lián)在了一起，但路由并沒有被引用，也就無法在正確的位置展示路由頁面的數(shù)據(jù)，所以，我們需要將路由引用到layout布局的main區(qū)域，也就是數(shù)據(jù)展示區(qū)，確保當我們訪問某個路由時，對應(yīng)的路由頁面能夠在該區(qū)域展示。

1、路由和頁面聯(lián)動的注意細節(jié)

在菜單項組件中，我們給菜單項的index屬性綁定了路由的path值，其用意是為了啟用element-plus中提供的一種在激活導菜單時（當我們點擊某個菜單項時，該菜單項就是被激活的菜單）以index作為path進行路由跳轉(zhuǎn)，所以為了我使用這個功能，我們還需要在菜單欄組件的el-menu標簽中添加 router 屬性以開啟該功能，同時再添加 default-active 屬性來指明當前被激活的菜單。用例如下

<template>
  <menu-logo></menu-logo>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-vertical-demo"
    :unique-opened="uniqueOpenedFlag"
    router
  >
    <!-- 在為el-menu設(shè)置unique-opened屬性時必須要確保el-sub-menu、el-menu-item中index的唯一性，如果index不唯一則不生效 ，一般我們?yōu)閕ndex綁定路由的path值 -->
    <!-- 本組件作為父組件向子組件傳遞數(shù)據(jù)menuList，子組件需要定義menuList屬性以確保可以接受該數(shù)據(jù) -->
    <!-- router屬性可以激活以 index 作為 path 進行路由跳轉(zhuǎn) -->
    <!-- default-active屬性用來指明當前被激活的菜單，其值為菜單項中index的值，也就是path值 -->
    <menu-item :menuList="menuList"></menu-item>
  </el-menu>
</template>
 
import { useRouter, useRoute } from "vue-router";
 
// 獲取當前點擊的路由
const route = useRoute();
// 從路由中獲取path
const activeIndex = computed(() => {
  const { path } = route;
  return path;
});

到此這篇關(guān)于使用vue3搭建后臺系統(tǒng)的過程記錄的文章就介紹到這了,更多相關(guān)vue3后臺系統(tǒng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

使用vue3搭建后臺系統(tǒng)的詳細步驟

目錄

一、配置vite

二、router路由

1、安裝router路由

2、配置router路由

3、注冊router路由

4、使用router路由

三、安裝element plus等其他依賴

1、注冊element plus并配置圖標

四、pinia使用

1、安裝pinia

2、注冊pinia

3、配置pinia

4、測試pinia

五、layout布局

六、菜單欄logo

七、路由和頁面聯(lián)動

1、路由和頁面聯(lián)動的注意細節(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

使用vue3搭建后臺系統(tǒng)的詳細步驟

目錄

一、配置vite

二、router路由

1、安裝router路由

2、配置router路由

3、注冊router路由

4、使用router路由

三、安裝element plus等其他依賴

1、注冊element plus并配置圖標

四、pinia使用

1、安裝pinia

2、注冊pinia

3、配置pinia

4、測試pinia

五、layout布局

六、菜單欄logo

七、路由和頁面聯(lián)動

1、路由和頁面聯(lián)動的注意細節(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

一、配置vite

二、router路由

1、安裝router路由

三、安裝element plus等其他依賴

1、安裝pinia

3、配置pinia

4、測試pinia

六、菜單欄logo

七、路由和頁面聯(lián)動

1、路由和頁面聯(lián)動的注意細節(jié)