【从0到1 vue3-admin-template】项目搭建+登录页样式

柒柒7
1,491 阅读3分钟

要想快速搭建管理后台系统，使用vue-element-admin是一个非常好的方案，它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。

同时为了方便进行二次开发，官方还提供了基础模版vue-element-template，并且贴心的提供了一系列的教程文章，感兴趣的可移步至官方教程。（大佬们真厉害，在此膜拜下）

本系列文章主要是抱着学习的态度，使用Vue3对基础模版vue-element-template进行从0到1的"升级"（主要还是模仿，手动狗头）

主要依赖版本改动如下：

vue-element-templatevue3-element-template备注
webpackvite
vue2vue3
vuexPinia状态管理
elementUIElement PlusUI框架

初始化vue3项目

可以直接查看03 接口测试平台 前端项目创建里面的步骤，非常easy，有手就会

创建完成后，浏览器打开网址http://localhost:5173，就可以看到初始化项目了，给自己鼓个掌吧

完成登录页面布局

与04 接口测试平台 前端登录页面编写的步骤基本一致，但是它是使用Ant Design Vue框架，感兴趣的可以直接查看，本章将采用Element Plus进行重写。

  • 首先在项目目录中，通过命令npm install element-plus --save安装element plus依赖
  • 在main.js中进行完整引用，如果只想要按需引入，可查看官方指南。
import { createApp } from "vue";
import { createPinia } from "pinia";

import App from "./App.vue";
import router from "./router";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";

const app = createApp(App);

app.use(createPinia());
app.use(router);
app.use(ElementPlus);

app.mount("#app");

<template>
  <div class="login-container">
    <el-form :model="loginForm" label-width="120px">
      <el-form-item label="用户名">
        <el-input v-model="loginForm.username" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="loginForm.password" />
      </el-form-item>
      <el-button
        type="primary"
        >登录
      </el-button>
    </el-form>
  </div>
</template>
  • 在router.js中设置登录页面的路由
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: HomeView,
    },
    {
      path: "/about",
      name: "about",
      component: () => import("../views/AboutView.vue"),
    },
    {
      path: "/login",
      name: "login",
      component: () => import("../views/LoginView.vue"),
    },
  ],
});

export default router;

通过命令npm run dev启动项目，可以看到已经正常展示输入框和按钮了，但是样式很难看，接下来就来调整登录也样式。

  • 样式这里使用sass，也需要使用命令npm install sass sass-node --save-dev先安装依赖。

具体样式调整如下，可供参考

其中图标是使用iconfont的图标，具体用法可查看07 接口测试平台 前端页面布局中引入iconfont图标部分的介绍。

登录页定制化部分抽取

既然是要做成跟vue-admin-template一样通用的模版，那么很多地方都需要提供定制化的能力，比如登录页上，管理后台名称，登录按钮颜色等。

配置文件

  • 首先是「管理后台名称」，因为其他的页面可能也需要使用到，所以新建一个配置文件来进行管理项目配置项。在src目录下新建setting.js文件，定义配置项变量。
export default {
  title: "XXX管理后台",
};
  • 然后在LoginView.vue中进行使用
<template>
  <div class="login-container">
    <el-form :model="loginForm" class="login-form" label-position="left">
      <div class="title-container">
        <h3 class="title">{{ title }}</h3>
      </div>
    ...
    </el-form>
  </div>
</template>

<script setup>
import defaultSettings from "../settings";

...
const title = defaultSettings.title || "Vue3 Element Template";
...
</script>

主题色定制

因为是使用Element PlusUI框架，可以直接使用它提供的更换主题色方案。

  • 在src/assets/styles/element/目录下，新增index.scss文件用来重写样式。
/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #5470C6,
    ),
  ),
);

// 导入Element Plus原有样式:
@use "element-plus/theme-chalk/src/index.scss" as *;
  • 将main.js中引入的样式文件进行修改，如下：

再次启动项目，可以看到按钮颜色及管理后台名称都修改成功了，撒花🎉🎉🎉

avatar
文章
阅读
粉丝