Location>code7788 >text

(Series IX) Creating a front-end framework with Vue3+Element Plus (with source code)

Popularity：731 ℃/2024-10-24 16:15:31

clarification

This article is part of the OverallAuth 2.0 series of articles, which is updated weekly with an article in the series (Complete System Development from 0 to 1).

The system article, I will try to say very detailed, so that no matter newbie, veteran can understand.

DESCRIPTION: OverallAuth 2.0 is a simple, easy to understand and powerful Permissions + Visual Process Management system.

Friendly reminder: this article is part of a series of articles, before reading that article, it is recommended to read the previous articles to better understand the structure of the project.

If you are interested, please follow me (*^▽^*).

Follow me. Beat me if you can't learn.

nonsense literature

Shocked! What? You still don't know how to build a front-end framework using Vue3 + Element Plus?

What? Are you still struggling to find a front-end framework template for Vue3 + Element Plus?

Simple is not to your liking, and mature is complicated to read? What should I do?

So what are you waiting for, follow me and get your hands on building your own front-end template.

Creating a project, pre-requisites

Installing VsCode

Install scaffolding: npm install -g @vue/cli My version v5.0.8

Installation (download address)Click to download I use version v21.7.3.

Creating a Vue3 project

Open vsCode, in the terminal to switch to create the project path (if not switched, the default installation in C:\Users\admin): such as: cd E:\Vue project

Create the project using the vue create xxx command.It is important to note that the project name should not contain capital letters.

As shown in the figure below

Here we have a direct choice: Install with Vue3, but of course you can choose to select the function manually.

After successful installation, we open the project.

As you can see, the directory structure of the new project, very simple and clear. We use the command, run to see the effect

Run command: npm run serve

Default Project Style

The following screen appears, proving that we have created the project successfully.

Installation of Element Plus

--Use npm

npm install element-plus --save 

--Use

yarn add element-plus

--Use

pnpm install element-plus

After successful installation, we configure global variables in main

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

const app = createApp(App)
(ElementPlus)
('#app')

Install small icons: npm install @element-plus/icons-vue

Global Configuration:

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

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

mountingTypescript :npm install --save-dev typescript ts-loader

Convert js files to ts: vue add typescript

Note: Since the official use case for element plus also uses ts, we need to convert the js to ts.

Add a configuration file, example below (otherwise using ts will report an error)

{
  "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",
      "",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

After doing the above, the basic structure of our vue project is as follows

Testing Element Plus

Do the above steps, we vue3 + Element Plus to build the basic template of the project has been created, and then test whether Element Plus can be used

I've chosen to use the Menu component in Element Plus because we're going to use the Menu as the system menu.

Find the file generated by the system by default and replace the code in it with the following code

<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>

The code, which is basically the same as the example on the official website. Is to build a Menu navigation menu

Then find the file and replace the code with the following code

<template>
  <HelloWorld />
</template>

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

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>

Once we have done the above steps, we use the npm run serve command to start the project

The following screen appears, proving that the project has been created successfully

build a framework

Once Element Plus is installed, we're going to use it to build the frame

Use Element Plus layout component container + menu component Menu, to build the framework.

Here is to write style layout, there is nothing to say, directly on the code

The code is as follows

<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 privilege management system
</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">Wang Xiaohu</div>
            </div>
          </div>
        </el-header>

        <el-main class="el-main">
          wellcome
</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/privilege-assignment.png");
}
.user-image {
  background-image: url("... /components/user.png");
}
.demo-tabs /deep/ .el-tabs__header {
  color: #333; /* Tab header font color*/
  margin: 0 0 5px !important;
}
.demo-tabs /deep/ .el-tabs__nav-wrap {
  padding-left: 10px;
}
</style>

The code is as follows

<template>
  <HelloWorld />
</template>

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

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: the icons in the page can be replaced (and also deleted) with any small icons.

Running Projects

Next:The combined use of Vue3 menus and routes

 

Backend WebApi source code address: /yangguangchenjie/overall-auth2.0-web-api

Backend WebApiPreview at http://139.155.137.144:8880/swagger/

Front-end Vue source code address: /yangguangchenjie/overall-auth2.0-vue

Frontend vue preview at http://139.155.137.144:8881

Help me Star, please.Help me Star, please.Help me Star, please.

If you are interested, please pay attention to my weibo public number (*^▽^*).

Follow me: a full-stack multi-terminal treasure blogger, regularly sharing technical articles, irregularly sharing open source projects. Follow me to bring you to know a different program world!

<Previous Next>