4.扩展开发

默认您拥有前端开发经验，并对TypeScript及Vue.js有一定了解

项目使用Vue.js框架，采用TypeScript语言，UI使用Ant Design of Vue

启动开发环境

请先Fork代码，git clone到本地，并执行npm i安装依赖

使用serve参数启动开发环境

npm run serve

或者安装Vue Cli npm i -g @vue/cli，启动vue ui，使用可视化界面管理项目

vue ui

项目依赖

运行时依赖

• Vue.js
• Vuex
• Vue Router
• vue-class-component
• vue-property-decorator
• vue-typer
• vue-markdown
• vue2-smooth-scroll
• Ant Design of Vue
• axios
• json5
• lodash
• aos
• Animate.css

开发时依赖

• Vue Cli
• vue-template-compiler
• TypeScript
• sass
• ali-oss
• config-file-loader

了解布局

👉在线预览👈

布局较为简单，主要划分为以上几大组件，您可以就以上任何一个组件进行二次开发，每个组件中各元素对应的静态文件或者配置可再次参考自定义内容，扩展能力主要针对上图 Modules 部分

组件主要放置在/src/components，组件的组合、布局在/src/views/Home.vue

资源文件主要放置在/src/assets，通用样式在/src/styles，少量底层的数据结构定义及通讯逻辑放在/src/api

了解配置文件

配置文件放置在/public/data.json5，页面加载时，通过GET请求将配置文件内容加载到Vuex.Store中，各组件通过Store获取并渲染内容，Vuex.Store相关逻辑在/src/store.ts

配置文件采用json5格式，参考 JSON5 - JSON for Humans

state

Store.state的数据结构为UserData，定义在/src/api/user_interface.ts

/**
 * 用户数据
 */
export interface UserData {
    /**
     * 页面title
     */
    title: string;

    /**
     * 社交链接
     */
    social: Social;

    /**
     * Banner横幅信息
     */
    banner: Banner;

    /**
     * 模块
     */
    modules: Module[];
}

这里主要介绍modules

modules

调整modules的顺序，可以反映到页面各模块及菜单的顺序，关于模块、履历模块、博客模块均属于Module

Module的数据结构如下

/**
 * 可定制模块
 */
export interface Module {
    /**
     * 是否展示
     */
    display: boolean;

    /**
     * 锚点
     */
    anchor: Anchor;

    /**
     * 标题
     */
    header: Header;

    // 其他
    [key: string]: any;
}

display用于是否展示该模块

anchor用于控制菜单的展示及跳转

header为每个模块的标题

剩下的则为各模块自身的属性，可参考 关于模块、履历模块、博客模块

data.json5 -> modules[].anchor.id	模块
about	关于
experience	履历
blog	博客

Anchor的数据结构如下

/**
 * 锚点
 */
export interface Anchor {
    /**
     * 对应页面元素id，用于Menu点击跳转
     */
    id: string;

    /**
     * 图标，用于Menu展示
     */
    icon: string;

    /**
     * 名称，用于Menu展示
     */
    name: string;
}

自定义模块

模块一般放置在/src/components，可参考/src/components/About.vue

定义一个模块

定义一个模块，一般类似于如下

<template>
    <div id="custom"> <!-- 元素id与配置文件中anchor.id一致 -->
        <!-- 标题 -->
        <ModuleHeader :title="custom.header.title" :sub-title="custom.header.subtitle"/>
        
        <!-- 自定义内容 -->
        <h1>{{custom.content}}</h1>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    import ModuleHeader from '@/components/module/ModuleHeader.vue';
    import {Module} from '@/api/user_interface';

    @Component({
        components: {
            ModuleHeader，
        },
        computed: {
            custom(): Module {
                // 使用getModule方法获取该模块的配置内容
                return this.$store.getters.getModule('custom');
            },
        },
    })
    export default class About extends Vue {
    }
</script>

<style scoped lang="scss">
    // 自定义样式
    @import '../styles/variable';
</style>

根元素id一定要与配置文件中anchor.id一致

Vuex.Store中（/src/store.ts）定义了获取该模块全部配置内容的getters方法getModule

定义配置文件

{
  modules: [
    {
      display: true,
      anchor: {
        id: "custom",
        icon: "",
        name: "自定义",
      },
      header: {
        title: "自定义",
        subtitle: "自定义模块",
      },
      content: "Hello You!",
    }
  ]
}

icon可参考ant-vue-icon

注册模块

在/src/views/Home.vue中注册模块（<a-layout-content>及@Component({components})）

<template>
    <!-- 略 -->

    <!-- 根据配置动态模块的内容和顺序 -->
    <a-layout-content v-for="id in moduleIds" v-bind:key="id">
        <About v-if="id === 'about'"/>
        <Blog v-if="id === 'blog'"/>
        <Experience v-if="id === 'experience'"/>
    </a-layout-content>
    
    <!-- 略 -->
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    import {mapGetters} from 'vuex';

    // 引入模块
    import About from '@/components/About.vue';
    import Experience from '@/components/Experience.vue';
    import Blog from '@/components/Blog.vue';

    @Component({
        // 注册模块
        components: {
            About,
            Experience,
            Blog,
        },
        computed: {
            ...mapGetters(['moduleIds']),
        },
    })
    export default class Home extends Vue {
        // 略
    }
</script>

构建到OSS

关于部署，可参考快速部署

可使用npm run build或者vue cli进行构建

项目中提供了Ali OSS的Webpack插件WebpackAliyunOssPlugin，可在执行build指令时，将构建出的资源文件上传到OSS Bucket中

插件配置在/src/vue.config.js，插件在/src/oss.js

插件默认不生效，需要在执行build指令前将WebpackAliyunOssPlugin的enable属性置为true（/src/vue.config.js）

配置OSS

为了避免OSS敏感信息泄露，项目中使用config-file-loader将OSS配置与项目分离

请在项目根目录或者用户根目录下创建.aliyun文件，文件内容如下

{
    "ak":"",
    "sk":"",
    "bucket":"",
    "region":""
}

ak及sk请在Aliyun AccessKey 管理中获取

bucket即为创建的OSS Bucket名

region为Bucket外网访问的EndPoint

一切准备就绪，执行npm run build即可将构建的文件上传到OSS中

部署到子目录（路径）

由于默认资源路径为 ‘/’，在部署时，部署路径（访问路径）必须为 ‘/’

e.g. 可部署到 https://cv.manerfan.com/ ，不可部署到 https://manerfan.com/cv/

若想部署到子目录（访问路径），可以修改资源的访问路径后重新构建（/src/vue.config.js中的publicPath）

以上，接受优质模块，欢迎Issue，欢迎Pull Request

---

HOME

◁◀快速部署