前言

来啦老铁！

前端框架 vue 已经到 vue3 版本了，今天我们一起来学习记录一下怎么将 vue3 前端框架搭建起来，其中组件库我会用到熟悉的 Element 家族的 element-plus 组件库；

• element-plus 组件库

学习路径

1. 安装脚手架；
2. 创建 vue 项目；
3. 安装依赖；
4. 使用 typescript；
5. 修改项目；
6. 业务开发；

1. 安装脚手架；

yarn global add @vue/cli

• 检查安装成功与否：

vue -V

安装脚手架

2. 创建 vue 项目；

vue create math-games

创建 vue 项目

注意：这时候选择 vue3，然后跟随脚手架的指示进行项目的创建即可~

3. 安装依赖；

• element-plus 模块；

yarn add element-plus

• vue-router 模块；

yarn add vue-router

• axios 模块，用于前后端交互；

yarn add axios

4. 使用 typescript；

由于笔者习惯使用带类型的 js 即 typescript，因此需要这个步骤；

vue add typescript

全部选择 Y/y 即可，最终会帮我们把所有 js 文件改为 ts 文件；

5. 修改项目；

• 修改 App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</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: 5px;
}
</style>

• 修改 main.ts

import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";
import * as ElIcon from "@element-plus/icons-vue";
import router from "./router/index";

const app = createApp(App);

// 注册全局组件: icons
Object.keys(ElIcon).forEach((key) => {
  app.component(key, ElIcon[key as keyof typeof ElIcon]);
});
router.beforeEach((to: any, from: any, next) => {
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  next();
});
app.use(ElementPlus);
app.use(router);
app.mount("#app");

• 创建 src/router/index.ts

// 1. 引入创建路由需要的组件
import { createRouter, createWebHashHistory } from "vue-router";

// 2. 配置系统所有路由页面
const routes = [
  {
    path: "/",
    name: "home",
    component: () => import("../components/HomePage.vue"),
    meta: { title: "小学生数学游戏" },
    children: [],
  },
];

// 3. 创建路由实例
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// 4. 声明, 为路由提供外部引用的入口
export default router;

• 验证 element-plus 是否配置正确；

修改 src/components/HomePage.vue（这个文件也是先前自己创建的）：

<template>
  <div>
    <el-button type="primary" @click="test" plain>刷新</el-button>
  </div>
</template>
<script>
export default {
  name: "HomePage",
  components: {},
  data() {
    return {};
  },
  created() {},
  methods: {
    test() {
      window.location.reload();
    },
  },
};
</script>

如下图就说明 element-plus 可以正常使用了~

element-plus 生效

• 6. 业务开发；

如此，我们就可以进行业务开发了~

• 在业务开发之前，我们还可以创建一个（或根据业务情况创建多个）请求的拦截器 src/utils/request.ts

import axios from "axios";
import { ElMessage } from "element-plus";

// 创建 axios 实例
const service = axios.create({
    baseURL: "http://localhost:80", // api的base_url
    timeout: 10000, // 请求超时时间
});

// request 拦截器
/*
service.interceptors.request.use(config => {
  if (store.getters.token) {
    config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  return config
}, error => {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
})
*/

// respone 拦截器
service.interceptors.response.use(
    (response: { data: any; }) => {
        /**
         * code为非200是抛错 可结合自己业务进行修改
         */
        const res = response.data;
        if (res.code >= 400 && res.code < 500) {
            ElMessage({
                message: res.message,
                type: "error",
                duration: 5 * 1000,
            });
        }
        return res;
    },
    (error: { message: any; }) => {
        ElMessage({
            message: `服务错误：${error.message}`,
            type: "error",
            duration: 5 * 1000,
        });
        return Promise.reject(error);
    }
);

export default service;

• 接着创建一个请求后端的 API 管理文件 src/api/game.ts

import request from "../utils/request";

export function randomizeGame() {
  return request({
    url: "/game/randomize",
    method: "post",
  });
}

export function getCalculationAnswer(userId:number, questionId: number) {
  return request({
    url: "/game/calculation/answer",
    method: "get",
    params: { userId, questionId },
  });
}

后续我们就可以在 .vue 文件中调用 src/api/game.ts 内的接口与后端进行交互了~

差不多就这样了，笔者不是专业的前端开发，能力有限，欢迎指正、互相交流，感谢~

如果本文对您有帮助，麻烦点赞、关注！

感谢~