项目介绍

go-admain-ui (opens new window) 是go-admain的前端页面，是一个基于vue的后台管理系统。通过模仿该项目，学习vue的开发。

项目搭建

控制台通过pnpm create vue@latest初始化项目。通过脚手架选择安装vue-router、axios、Pinia。

项目使用Arco Design Vue组件库，通过pnpm install -D @arco-design/web-vue安装。

项目使用SCSS，通过pnpm install -D sass sass-loader安装。

安装@arco-themes/vue-go-admin主题，通过pnpm install -D @arco-themes/vue-go-admin安装。

在main.js中引入Arco Design Vue组件库。

import ArcoVue from '@arco-design/web-vue';
import '@arco-themes/vue-go-admin/css/arco.css';

app.use(ArcoVue)
app.mount('#app')

删除main.js中引入./assets/main.css的代码。

登录页面

登录页的路由

import {  createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/login/index.vue')
  }
];
const router = createRouter({
  history: createWebHistory(),
  routes
});

修改App.vue文件，覆盖为router-view标签。

<template>
  <router-view/>
</template>

登录页的布局

在views目录下创建login目录，创建index.vue文件。

首先定义一个占据全部空间的div标签，<div class="account"></div>, 在style标签中定义样式：

<style lang="scss" scoped>
.account {
  width: 100%;
  margin: 0 auto;
}
</style>

在account标签中，定义一个div标签，<div class="account-container"></div>,用于包裹登录框。

.account-container {
  // 填满父元素的宽度
  width: 100%;
  // 确保容器的最小高度为视口高度的100%，即至少和浏览器窗口一样高，实现全屏页面效果
  min-height: 100vh;
  // 弹性布局
  display: flex;
  // 自动换行
  flex-wrap: wrap;
  //水平居中
  justify-content: center;
  //垂直居中
  align-items: center;
  //元素内容与边框之间的关系
  padding: 15px;
  // 背景色
  background: #9053c7;
  // 背景色渐变
  background: linear-gradient(-135deg, #c850c0, #4158d0);
}

再定义一个子块，用于真正定义登录块的大小，避免登录框随页面大小变化。

.account-wrap-login {
  width: 960px;
  height: 554px;
  // 圆角半径
  border-radius: 10px;
  // 超出边界部分不显示
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}

登录框中的内容，左半部分是图片，右半部分为登录表单，各占一半。

.account-wrap-login .login-pic {
  // 背景色 !important 强制为最高优先级，避免被覆盖
  background-color: #0259e6 !important;
  display: flex;
  // 垂直居中
  align-items: center;
  // 主轴方向为垂直方向，从上往下排列。row为水平方向。
  flex-direction: column;
  //水平居中
  justify-content: center;
  width: 50%;
}
.account-wrap-login .login-pic img {
  max-width: 100%;
}
.account-wrap-login .login-form {
  width: 50%;
  display: flex;
  flex-direction: column;
  background: #fff;
}

表单块分为表单标题、logo和表单内容两块。表单标题块，设置文字居中：

.account-wrap-login .account-top {
  text-align: center;
}
.account-wrap-login .account-top-logo {
  text-align: center;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

后端交互

知识点

样式

设置超出部分不显示：overflow: hidden。

背景色渐变：background: linear-gradient(-135deg, #c850c0, #4158d0);。

圆角半径：border-radius: 10px;。

水平居中：justify-content: center;。

垂直居中：align-items: center;。

flex布局

display: flex设置弹性布局，可以根据页面大小弹性布局。

flex-wrap属性决定了flex容器中的项目在空间不足时换行。

• flex-wrap: wrap设置从上到下换行。

• flex-wrap: wrap-reverse设置从下到上换行。

flex-direction属性决定了flex容器中的项目的排列方向

• flex-direction: row设置从左到右排列,row-reverse设置从右到左排列。

• flex-direction: column设置从上到下排列,column-reverse设置从下到上排列。

setup

setup函数是vue3中的新特性，用于替代vue2中的data、methods等属性。

在vue2中，通过data、methods暴露的属性和方法才能被模版使用，具有响应式功能。

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

在vue3中，可以通过setup函数用于定义数据和方法。

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    function increment() {
      // 在 JavaScript 中需要 .value
      count.value++
    }

    // 不要忘记同时暴露 increment 函数
    return {
      count,
      increment
    }
  }
}

其中ref函数用于定义响应式数据，ref函数返回一个对象，对象中包含一个value属性，通过value属性访问数据，在模版中使用时，不需要.value，vue会自动解析。

reactive也是用于创建一个响应式的对象。当传递一个对象给reactive函数时，它会返回一个新的响应式对象，这个对象的每个属性都是响应式的。reactive通常用于处理复杂类型的数据（如对象或数组）。

ref会使它的值具有深层响应性，这意味着即使改变嵌套对象或数组时，变化也会被检测到。而reactive只会使对象本身具有响应性，而不会使其属性具有深层响应性。

在setup函数中手动暴露大量的状态和方法非常繁琐。可以使用<script setup>来大幅度地简化代码：

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">
    {{ count }}
  </button>
</template>