上一节（手把手撸一个wiki系统（1）：后台架构）我们完成了后端基本的代码准备，这一节我们进行前端环境的配置以及代码的编写。
安装node.js
关于node.js及yarn的安装，这里不做说明，详细请看：https://blog.ysboke.cn/archives/482.html
安装Vue-cli脚手架
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。
官网：https://cli.vuejs.org/zh/guide/
请严格按照上方安装node,js的教程里配置yarn，避免各种幺蛾子出现~
任意目录下安装vue-cli（@4.5.9指定了版本号，不加就是最新）：
yarn global add @vue/cli@4.5.9查看版本：
vue --version接着初始化项目，在项目根目录下（IDEA里的控制台即可）输入（web是名称，随意）（终端有缓存的话重启下IDEA）：
vue create web接着按上下键选择 Manually select features（手动选择） ，回车。按空格勾选TypeScript、router（录音）、Vuex（保存全局变量），回车，选择3.x，回车，输入n回车（是否按类的形式），再输入n回车（是否用babel配合TypeScript）、y回车（地址栏含不含#）、最上面的only（代码校验规则）、lint on save（保存时检查代码）、In dedicated config files（以上配置单独存放）、y（将配置保存成模板）、demo（模板名字）、use yarn。
半分钟后初始化完成，按照所给命令 cd web ，yarn serve 即可编译启动项目。
每次都要命令编译较繁琐，右键web/package.json，选择下方“显示npm脚本”可进行窗口化操作。
使用build命令可以编译出dist文件。
集成Ant design vue
官网：https://2x.antdv.com/docs/vue/introduce-cn
上方可选择组件栏。
cd web
yarn add ant-design-vue@next@next表示安装最新版本，也可以手动指定@2.1.6
在main.ts里引入这两行代码（并且在下方里使用use来引用）：
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';此时我们在官网选择组件放到view层，启动后发现生效。
见commit 2-2
首页布局调整
修改App.vue（首页），拖组件layout布局，以及css部分。见commit 2-3
用router替换代码
</a-layout-sider>
<a-layout-content
:style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
>
Content
</a-layout-content>这部分代码原来是在App.vue里的，但是这是程序入口，不该放这么多页面代码，于是将代码放至Home.vue里，然后通过路由 / 跳转：
<router-view/>{
path: '/',
name: 'Home',
component: Home
},header和footer是通用的，应该把它们抽离出来解耦，制作成单独的组件。
（这个步骤是真的坑，少写一丢丢东西或者多写一丢丢都是失败，还没提示，只能说IDEA对vue的支持不是很好。）
（如果组件注册了没使用会报错，可以在.eslintrc.js的rules里添加 "vue/no-unused-components": "off", 忽略掉）
在components包下新建Header.vue，内容如下：
<template>
<a-layout-header class="header">
<div class="logo" />
<a-menu
theme="dark"
mode="horizontal"
v-model:selectedKeys="selectedKeys1"
:style="{ lineHeight: '64px' }"
>
<a-menu-item key="1">nav 1</a-menu-item>
<a-menu-item key="2">nav 2</a-menu-item>
<a-menu-item key="3">nav 3</a-menu-item>
</a-menu>
</a-layout-header>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'Header',
});
</script>新建Footer.vue，内容如下：
<template>
<a-layout-footer style="text-align: center">
My-Wiki，一个知识库wiki系统。
</a-layout-footer>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name:'Footer',
});
</script>修改App.vue如下：
<template>
<a-layout>
<Header></Header>
<router-view/>
<Footer></Footer>
</a-layout>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
export default defineComponent({
name: 'app',
components:{
Header,
Footer,
}
});
</script>
<style>
#components-layout-demo-top-side-2 .logo {
float: left;
width: 120px;
height: 31px;
margin: 16px 24px 16px 0;
background: rgba(255, 255, 255, 0.3);
}
.ant-row-rtl #components-layout-demo-top-side-2 .logo {
float: right;
margin: 16px 0 16px 24px;
}
.site-layout-background {
background: #fff;
}
</style>详细见commit 2-5。
