A Lightweight Vue 3 + Element‑plus Admin Dashboard Template: Setup, Configuration, and Usage

The author presents xjy_admin , a personal, lightweight backend management template created with Vue3.4+Element-plus+Vite . After a period of refinement, the first version includes basic refresh, fullscreen, and dark‑mode features and is intended for learning purposes.

Project Overview

The template consists of a login API and a user‑info API, using mockjs to simulate data and offering simple permission segregation.

Technology Stack

Technology

Description

Official Site

Vue3

Progressive JavaScript framework

https://cn.vuejs.org/

Element-plus

Component library for Vue 3

https://element-plus.org/zh-CN/

Vite

Frontend build tool

https://vitejs.cn/vite3-cn/

Pinia

Intuitive state‑management library for Vue

https://pinia.web3doc.top/

Echarts

Open‑source visualization library

https://echarts.apache.org/zh/index.html

VueUse

Utility collection based on Vue composition API

https://www.vueusejs.com/

animate.css

Cross‑browser animation library

https://animate.style/

wangEditor

Web rich‑text editor

https://www.wangeditor.com/

Project Global Configuration

Global settings are illustrated with screenshots (omitted here) and include a unified code style enforced by ESLint , Prettier , and Stylelint .

.eslintrc.cjs

module.exports = {
  env: { browser: true, es2021: true, node: true, jest: true },
  parser: 'vue-eslint-parser',
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module', parser: '@typescript-eslint/parser', jsxPragma: 'React', ecmaFeatures: { jsx: true } },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended'
  ],
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    'no-var': 'error',
    'no-multiple-empty-lines': ['warn', { max: 1 }],
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // ...other rules omitted for brevity
  }
};

.prettierrc.json

{
  "singleQuote": false,
  "semi": false,
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "ignore",
  "endOfLine": "auto",
  "trailingComma": "all",
  "tabWidth": 2
}

.stylelintrc.cjs

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-html/vue',
    'stylelint-config-standard-scss',
    'stylelint-config-recommended-vue/scss',
    'stylelint-config-recess-order',
    'stylelint-config-prettier'
  ],
  overrides: [
    { files: ['**/*.(scss|css|vue|html)'], customSyntax: 'postcss-scss' },
    { files: ['**/*.(html|vue)'], customSyntax: 'postcss-html' }
  ],
  ignoreFiles: ['**/*.js','**/*.jsx','**/*.tsx','**/*.ts','**/*.json','**/*.md','**/*.yaml'],
  rules: {
    'value-keyword-case': null,
    'no-descending-specificity': null,
    'function-url-quotes': 'always',
    // ...other rules omitted for brevity
  }
};

Button Theme Color

Custom colors are defined in style/element/index.scss using a SCSS forward with a map of color variables (primary, success, info, warning, danger, error).

Project Integrations

mock.js

Mock data generation and Ajax interception are set up with vite-plugin-mock and mockjs :

pnpm install -D vite-plugin-mock mockjs

import { viteMockServe } from 'vite-plugin-mock';
plugins: [
  viteMockServe({ mockPath: "./src/mock" })
];

UnoCSS

Instant atomic‑CSS engine integrated via:

pnpm install -D unocss

import UnoCSS from 'unocss/vite';
export default { plugins: [UnoCSS({ /* options */ })] };

In main.js the virtual stylesheet is imported:

import "virtual:uno.css";

Custom shortcuts and theme colors are defined in uno.config.ts (full config omitted for brevity).

Canvas Basic Usage

A Vue <script setup> component demonstrates canvas initialization, background image loading, dynamic color filling, text drawing, and image overlay. The component also provides an export function that converts the canvas to a Base64 image and triggers a download.

<script setup lang="ts">
import debounce from "lodash/debounce";
import { message } from "@/Hooks/Element-plus";
import { nextTick, onMounted, ref, watch } from "vue";
// ... (full component code omitted for brevity)
const outPic = () => {
  let base64 = canvas.value.toDataURL();
  let link = document.createElement("a");
  link.textContent = "download image";
  link.href = base64;
  link.download = "mypainting.jpeg";
  link.click();
};
</script>

SVG Usage

SVG icons are placed in src/assets/svgs and loaded via vite-plugin-svg-icons with a custom symbolId pattern.

createSvgIconsPlugin({
  iconDirs: [path.resolve(process.cwd(), "src/assets/svgs")],
  symbolId: "icon-[dir]-[name]"
});

WangEditor Integration

The rich‑text editor is used in a parent component with v-model binding, custom upload handling, and dark‑mode support.

<template>
  <WangEditor v-model="editVal" height="calc(100vh - 180px)" />
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
const editVal = ref("Hello! WangEditor");
watchEffect(() => console.log(editVal.value));
// editor configuration omitted for brevity
</script>

Project Execution

Installation and development commands:

# Install pnpm globally
pnpm npm install pnpm -g

# Install dependencies
pnpm install

# Run development server
pnpm run dev

Linting, fixing, formatting, and building:

# Lint
pnpm run lint

# Auto‑fix
pnpm run fix

# Format CSS
pnpm run format

# Build for production
pnpm run build

Conclusion

The article walks through project conventions, setup, development, and packaging, demonstrating how to build a clean, easy‑to‑understand frontend admin framework from scratch using Vue 3.4 and Element‑plus.