[GN] 后端接口已经写好 初次布局前端需要的操作(例)

提示:前端项目一定要先引入组件 配置。再编码!!!!

文章目录

  • [使用 vue-cli 脚手架初始化](#使用 vue-cli 脚手架初始化)
  • 前端工程化配置
  • [引入Vue前端组件库 -- arco](#引入Vue前端组件库 -- arco)
  • 前后端联调
  • [引入Md 编辑器组件](#引入Md 编辑器组件)

使用 vue-cli 脚手架初始化

使用·安装脚手架工具:

shell 复制代码
npm install -g @vue/cli

创建项目:

shell 复制代码
vue create vue-project

前端工程化配置

脚手架已经帮我们配置了代码美化、自动校验、格式化插件等,无需再自行配置

但是需要在 webstorm 里开启代码美化插件:

setting 中 搜索Prettier 启用 prettier


引入Vue前端组件库 -- arco

组件库:https://arco.design/vue

执行安装:

shell 复制代码
npm install --save-dev @arco-design/web-vue

改变 main.ts:

js 复制代码
import { createApp } from "vue";
import App from "./App.vue";
import ArcoVue from "@arco-design/web-vue";
import "@arco-design/web-vue/dist/arco.css";
import router from "./router";
import store from "./store";

createApp(App).use(ArcoVue).use(store).use(router).mount("#app");

前后端联调

  1. 安装请求工具类 Axios官方文档

  2. 编写调用后端的代码

    传统情况下,每个请求都要单独编写代码。至少得写一个请求路径

    直接自动生成即可:https://github.com/ferdikoomen/openapi-typescript-codegen

首先安装:

shell 复制代码
npm install openapi-typescript-codegen --save-dev

然后执行命令生成代码:

shell 复制代码
openapi 
--input http://localhost:8121/api/v2/api-docs 
--output ./generated 
--client axios

3)直接使用生成的 Service 代码,直接调用函数发送请求即可,比如获取登录信息

js 复制代码
// 从远程请求获取登录信息
const res = await UserControllerService.getLoginUserUsingGet();
if (res.code === 0) {
  commit("updateUser", res.data);
} else {
  commit("updateUser", {
    ...state.loginUser,
    userRole: ACCESS_ENUM.NOT_LOGIN,
  });
}

如果想要自定义请求参数,怎么办?
文档

引入Md 编辑器组件

推荐的 Md 编辑器:https://github.com/bytedance/bytemd

阅读官方文档,下载编辑器主体、以及 gfm(表格支持)插件、highlight 代码高亮插件

shell 复制代码
npm i @bytemd/vue-next
npm i @bytemd/plugin-highlight @bytemd/plugin-gfm

相关推荐
人工智能训练师5 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny075 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy6 小时前
css的基本知识
前端·css
昔人'6 小时前
css `lh`单位
前端·css
Nan_Shu_6148 小时前
Web前端面试题(2)
前端
知识分享小能手8 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队9 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光9 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql52010 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Days205010 小时前
LeaferJS好用的 Canvas 引擎
前端·开源