前言
来啦老铁！
前端框架 vue 已经到 vue3 版本了，今天我们一起来学习记录一下怎么将 vue3 前端框架搭建起来，其中组件库我会用到熟悉的 Element 家族的 element-plus 组件库；
学习路径
- 安装脚手架；
- 创建 vue 项目；
- 安装依赖；
- 使用 typescript；
- 修改项目；
- 业务开发；
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 内的接口与后端进行交互了~
差不多就这样了，笔者不是专业的前端开发，能力有限，欢迎指正、互相交流，感谢~
如果本文对您有帮助，麻烦点赞、关注！
感谢~
