前言
最近需要维护一个个人项目，由于笔者是一个大后端，所以借此机会把前端学习过程记录一下，方便后续回顾。
前端项目初始化
安装npm
在前端项目初始化时，我们必须要安装好node，官网地址如下，因为笔者后续会用到vue3所以这里下在的node版本为18.16.0 。
/en/download
安装步骤比较简单，就不多赘述了，安装完成后到cmd键入如下命令，若输出node版本号则说明安装成功了。
C:\Users\xxx>node -vv18.16.0
为了加速后续各种依赖的下载，我们建议注册淘宝镜像，命令为
npm get registry --显示当前的镜像网址npm config set registry http://registry. -- 使用淘宝的镜像网址
完成后全局安装一下vue-cli
npm install -g @vue/cli@5.0.8
创建前端文件，使用命令初始化前端项目
创建一个名为web的前端项目
vue create web
首先进入选择页面，我们直接选择第3个选项,即自定义创建前端项目。
Vue CLI v5.0.8? Please pick a preset:Default ([Vue 3] babel, eslint)Default ([Vue 2] babel, eslint)> Manually select features
然后进入选择页面使用空格键选择对应选项，完成后如下所示，可以看到笔者勾选了
BabelRouterVuexLinter / Formatter
选择的界面如下，带*号的就是笔者所选择的。
? Check the features needed for your project:() Choose Vue version>(*) Babel(*) TypeScript( ) Progressive Web App (PWA) Support(*) Router(*) Vuex( ) CSS Pre-processors(*) Linter / Formatter( ) Unit Testing( ) E2E Testing
然后我们就可以进入后续的配置了:
首先我们的vue选择3.0版本
# 选择vue3.0? Choose a version of Vue.js that you want to start the project with 3.x
路由选择历史模式
# 使用历史模式的router? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y
然后是代码检查，这里我们就选择简单的报错检查就行了
# 代码检查仅用于仅用于预防错误? Pick a linter / formatter config:> ESLint with error prevention onlyESLint + Airbnb configESLint + Standard configESLint + PrettierTSLint (deprecated)
接下来是配置选择的时机，我们选择保存时检查即可
# ESLint 保存时触发检查? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)>(*) Lint on save( ) Lint and fix on commit
然后我们选择将配置存到package.json中
# router等配置文件单独存放不和package.json一起? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)> In dedicated config filesIn package.json
最后将模板配置为一个web的模板即可
# 上述初始化操作保存为一个模板，名字为web? Save this as a preset for future projects? Yes? Save preset as: web
自此就生成一个前端文件夹，整体文件结构如下:
此时，我们不妨键入以下命令尝试将项目启动
$ cd web$ npm run serve
然后我们到浏览器键入
http://localhost:8080/
自此我们的前端架子就初始化完成了。
前端项目结构介绍
整体结构如下所示，每个文件夹的含义分别是：
node_modules:类似后端中maven在pom引入依赖后，导入的依赖一样，这个node_modules就是前端依赖引入的位置。public:存放静态文件的位置。assets:log文件存放处。components:编写自己的通用vue组件的文件夹。例如你的网站有通用的header和footer，就可以抽取一个组件，存放到这个位置，然后引入到需要的页面即可。router:存放页面请求的每一个路由以及路由到达的vue组件位置。store:存放全局变量的位置。views:存放视图文件的位置。
├─node_modules└─__tests__├─public└─src├─assets├─components├─router├─store└─views
我们在前端根目录还会看到一个package.json和package-lock.json这些都说vue配置依赖版本的文件，其中package-lock.json是我们完成依赖安装后索引版本的文件，后续如果我们删除node_modules在进行npm install的话，对应依赖版本都会以这个文件为主。
整合ant-design-vue
引入依赖
我们在这步骤需要引入ant-design-vue以及它的样式、标签等，所以我们需要依次键入如下命令，注:这些命令都来自官网，如果版本有变，读者可以到官网cv最新的命令。
npm install ant-design-vue --savenpm install --save @ant-design/icons-vue
然后main.js全局引入对应的这些配置即可
import {createApp } from 'vue'import App from './App.vue'import router from './router'import store from './store'// 全局引入ant-design-vue 以及css样式import Antd from 'ant-design-vue';import 'ant-design-vue/dist/antd.css';//图标import * as Icons from '@ant-design/icons-vue';const app = createApp(App);app.use(Antd).use(store).use(router).mount('#app');// 全局使用图标const icons = Icons;for (const i in icons) {ponent(i, icons[i]);}
配置官网完成基本样式、标签整合
这里笔者就是通过官网复制粘贴+调整，就完成了一个网站的初步搭建，感兴趣的读者可以自行查阅调试，由于没有什么很高深的技巧，所以笔者就不多赘述了。
Ant Design Vue
唯一需要注意的就是选择3.0的文档。
header、footer组件化
我们都知道网站的头部和页脚都是通用的，所以我们建议将这些部分抽取出来，存放到上文所说的component文件夹中
以Footer.vue为例，笔者的代码如下，可以看到代码非常简单，声明样式之后引入defineComponent，并且将这个组件命名为Footer
<template><a-layout-footer style="text-align: center">Ant Design © Created by Ant UED</a-layout-footer></template><script>import {defineComponent} from 'vue';export default defineComponent({name: 'Footer',});</script><style scoped></style>
然后我们在核心组件app.vue中引入，核心代码如下，可以看到使用import 之后就可以使用<Footer/>就可以将页脚的样式引入了。
<template><a-layout><Header/><router-view/><Footer/></a-layout></template><script lang="ts">import {defineComponent, ref} from 'vue';import Header from '@/components/Header.vue'; // @ is an alias to /srcimport Footer from '@/components/Footer.vue'; // @ is an alias to /src</script >
最后就是核心配置文件main.js,如下所示，他引入的全局都需要用到的组件，通过import 引入，通过use将其整合到app组件中。这就是为什么初始化时我们的app.vue可以直接使用路由等功能。
import {createApp} from 'vue'import App from './App.vue'import router from './router'import store from './store'import Antd from 'ant-design-vue';import 'ant-design-vue/dist/antd.css';const app = createApp(App);app.use(store).use(router).use(Antd).mount('#app')
到此位置我们基本的东西都引入了，我们不妨拿这个vue文件测试一下看看引入是否成功
输入如下内容，可以看到笔者直接从官网抄了两个组件贴上去
<template><div class="about"><a-button>Add</a-button> <step-forward-outlined /></div></template>
而页面确实输出了对应的样式，由此可知我们的配置步骤成功了。
前端引入axios
为了能够请求后端接口，我们需要使用如下命令完成axios安装
npm install axios --save
完成后，我们即可直接import使用了，如下所示这就是笔者基于axios发起的get命令示例
import axios from 'axios';import {defineComponent} from 'vue';export default defineComponent({name: 'Header.vue',setup() {let name="xiaoming";axios.get("http://127.0.0.1:8081/hello/"+name).then((resp) => {console.log(resp.data);alert(resp.data);});}});
后端项目初始化
get请求
为了测试前后端交互，我们编写了一个restful接口。
@RestControllerpublic class HelloController {@GetMapping("/hello/{name}")public String hello(@PathVariable("name") String name) {return "hello" + name;}}
因为前后端处于不同端口存在跨域问题，所以我们后端还需要增加一段代码。+
@Configurationpublic class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**") // 允许所有路由.allowedOriginPatterns("*") // 允许所有来源.allowedHeaders(CorsConfiguration.ALL) // 允许所有请求头.allowedMethods(CorsConfiguration.ALL) // 允许所有请求方法.allowCredentials(true) // 允许前端带上凭证（例如 cookie）.maxAge(3600); // 1小时内不需要再预检（发 OPTIONS 请求）}}
测试
最后刷新页面，可以看到alert输出后端的响应结果，说明整合成功了。
