說明
該文章是屬於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
關注公眾號:傳送【許可權】,獲取前後端程式碼
有興趣的朋友,請關注我微信公眾號吧(*^▽^*)。
關注我:一個全棧多端的寶藏博主,定時分享技術文章,不定時分享開源專案。關注我,帶你認識不一樣的程式世界