-
Notifications
You must be signed in to change notification settings - Fork 73
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
👉在线预览👈
布局较为简单,主要划分为以上几大组件,您可以就以上任何一个组件进行二次开发,每个组件中各元素对应的静态文件或者配置可再次参考自定义内容,扩展能力主要针对上图 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
Store.state
的数据结构为UserData
,定义在/src/api/user_interface.ts
/**
* 用户数据
*/
export interface UserData {
/**
* 页面title
*/
title: string;
/**
* 社交链接
*/
social: Social;
/**
* Banner横幅信息
*/
banner: Banner;
/**
* 模块
*/
modules: Module[];
}
这里主要介绍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>
关于部署,可参考快速部署
可使用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敏感信息泄露,项目中使用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
◁◀快速部署