手把手撸一个wiki系统(2):前端vue整合

崩天的勾玉
崩天的勾玉
崩天的勾玉
65
文章
4
评论
2021年6月7日23:14:46
评论
85 3041字

上一节(手把手撸一个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

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。

发表评论

匿名网友