（系列九）使用Vue3+Element Plus建立前端框架（附原始碼）

陈逸子风發表於2024-10-24
Vue前端框架原始碼

說明

該文章是屬於OverallAuth2.0系列文章，每週更新一篇該系列文章（從0到1完成系統開發）。

該系統文章，我會盡量說的非常詳細，做到不管新手、老手都能看懂。

說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+視覺化流程管理系統。

友情提醒：本篇文章是屬於系列文章，看該文章前，建議先看之前文章，可以更好理解專案結構。

有興趣的朋友，請關注我吧(*^▽^*)。

關注我，學不會你來打我

廢話文學

震驚！什麼？你還不會使用Vue3+Element Plus搭建前端框架？

什麼？你還在為找Vue3+Element Plus的前端框架模板而煩惱？

簡單的不符合心意，成熟的又複雜看不懂？怎麼辦？

那還等什麼，關注我，手把手教你搭建自己的前端模板。

建立專案，前置條件

安裝VsCode

安裝腳手架：npm install -g @vue/cli 我的版本v5.0.8

安裝node.js（下載地址）：點選下載 我用的版本v21.7.3

建立Vue3專案

開啟vsCode，在終端中切換建立專案路徑（如果不切換，預設安裝在C:\Users\admin）：如：cd E:\Vue專案

使用vue create xxx命令建立專案，這裡需要注意的是，專案名稱中，不能包含大寫字母

如下圖所示

這裡我們直接選擇：使用Vue3安裝，當然你也可以選擇手動選擇功能。

安裝成功後，我們開啟專案。

可以看到，新建專案的目錄結構，非常簡單明瞭。我們使用命令，執行看下效果

執行命令：npm run serve

預設專案樣式

出現如下介面，證明我們建立專案成功。

安裝Element Plus

--使用npm

npm install element-plus --save

--使用

yarn add element-plus

--使用

pnpm install element-plus

安裝成功後，我們在main中配置全域性變數

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

安裝小圖示：npm install @element-plus/icons-vue

全域性配置：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as Icons from '@element-plus/icons-vue'

const app = createApp(App)
app.use(ElementPlus)
for (const [key, component] of Object.entries(Icons)) {
    app.component(key, component)
  }
app.mount('#app')

安裝Typescript :npm install --save-dev typescript ts-loader

把js檔案轉成ts： vue add typescript

說明下：因為element plus 官方用例也是使用ts，所以我們需要把js轉換成ts

新增tsconfig.json配置檔案，示例如下（不然使用ts會報錯）

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

做完以上操作後，我們vue專案的基本結構如下圖

測試Element Plus

做好以上步驟，我們vue3+Element Plus搭建專案的基本模板已經建立好，接下來測試Element Plus是否可以使用

這裡我選擇使用Element Plus 中的Menu元件，因為接下來我們會使用Menu做系統選單

找到系統預設生成的HelloWorld.vue檔案，用如下程式碼替換裡面的程式碼

<template>
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>Navigator One</span>
          </template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1">item one</el-menu-item>
            <el-menu-item index="1-2">item two</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item three</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon><document /></el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>Navigator Four</span>
        </el-menu-item>
      </el-menu>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
  },
  components: {},
});
</script>

該程式碼，基本和官網的示例一致。是構建一個Menu導航選單

然後再找到App.vue檔案，用如下程式碼替換裡面程式碼

<template>
  <HelloWorld />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import HelloWorld from "./components/HelloWorld.vue"

export default defineComponent({
  setup() {
  },
  components: {HelloWorld},
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

做好以上步驟後，我們使用npm run serve命令，啟動專案

出下如下介面，證明專案建立成功

搭建框架

安裝好Element Plus後，我們就要使用它來搭建框架

使用Element Plus的佈局元件container+選單元件Menu，來搭建框架。

這裡是寫樣式佈局，沒有啥好說的，直接上程式碼

HelloWorld.vue 程式碼如下

<template>
  <div style="height: calc(100vh); overflow: hidden">
    <el-container style="height: 100%; overflow: hidden">
      <el-aside width="auto">
        <el-menu
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          style="height: 100%"
        >
        <div class="el-menu-box">
            <div
              class="logo-image"
              style="width: 18px; height: 18px; background-size: 18px 18px"
            ></div>
            <div style="padding-left: 5px; padding-top: 7px">
              OverallAuth2.0
            </div>
          </div>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><location /></el-icon>
              <span>Navigator One</span>
            </template>
            <el-menu-item-group title="Group One">
              <el-menu-item index="1-1">item one</el-menu-item>
              <el-menu-item index="1-2">item two</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group Two">
              <el-menu-item index="1-3">item three</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="1-4">
              <template #title>item four</template>
              <el-menu-item index="1-4-1">item one</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-menu-item index="2">
            <el-icon><icon-menu /></el-icon>
            <span>Navigator Two</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <el-icon><document /></el-icon>
            <span>Navigator Three</span>
          </el-menu-item>
          <el-menu-item index="4">
            <el-icon><setting /></el-icon>
            <span>Navigator Four</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header class="headerCss">
          <div style="display: flex; height: 100%; align-items: center">
            <div
              style="
                text-align: left;
                width: 50%;
                font-size: 18px;
                display: flex;
              "
            >
              <div class="logo-image" style="width: 32px; height: 32px"></div>
              <div style="padding-left: 10px; padding-top: 7px">
                OverallAuth2.0 許可權管理系統
              </div>
            </div>
            <div
              style="
                text-align: right;
                width: 50%;
                display: flex;
                justify-content: right;
                cursor: pointer;
              "
            >
              <div
                class="user-image"
                style="width: 22px; height: 22px; background-size: 22px 22px"
              ></div>
              <div style="padding-left: 5px; padding-top: 3px">王小虎</div>
            </div>
          </div>
        </el-header>

        <el-main class="el-main">
          歡迎
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  setup() {},
  components: {},
});
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu-box {
  display: flex;
  padding-left: 25px;
  align-items: center;
  height: 57px;
  box-shadow: 0 1px 4px #00152914;
  border: 1px solid #00152914;
  color: white;
}
.el-main {
  padding-top: 0px;
  padding-left: 1px;
  padding-right: 1px;
  margin: 0;
}
.headerCss {
  font-size: 12px;
  border: 1px solid #00152914;
  box-shadow: 0 1px 4px #00152914;
  justify-content: right;
  align-items: center;
  /* display: flex; */
}
.logo-image {
  background-image: url("../components/許可權分配.png");
}
.user-image {
  background-image: url("../components/使用者.png");
}
.demo-tabs /deep/ .el-tabs__header {
  color: #333; /* 標籤頁頭部字型顏色 */
  margin: 0 0 5px !important;
}
.demo-tabs /deep/ .el-tabs__nav-wrap {
  padding-left: 10px;
}
</style>

App.vue 程式碼如下

<template>
  <HelloWorld />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import HelloWorld from "./components/HelloWorld.vue"

export default defineComponent({
  setup() {
  },
  components: {HelloWorld},
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
}
html,  
    body,  
    #app {  
        height: 100%;  
        margin: 0;  
        padding: 0;  
    }
</style>

ps：頁面中的圖示，可以用任何小圖示替換（也可以刪除）。

執行專案

下一篇：Vue3選單和路由的結合使用

後端WebApi 預覽地址：http://139.155.137.144:8880/swagger/index.html

前端vue 預覽地址：http://139.155.137.144:8881

關注公眾號：傳送【許可權】，獲取前後端程式碼

有興趣的朋友，請關注我微信公眾號吧(*^▽^*)。

關注我：一個全棧多端的寶藏博主，定時分享技術文章，不定時分享開源專案。關注我，帶你認識不一樣的程式世界

相關文章