这是我参加青训营笔记伴学活动的第16天
介绍
vuepress-template是一个简单的VuePress案例模板,目的是让用户可以直接clone这个仓库,作为初始化一个VuePress网站启动项目,然后在这个项目的基础上新增自定义配置和功能。
主要内容(持续更新中) 项目中特别展示了一些小众模板、主题、插件,推荐大家关注和使用
1. 主题
社区已经开发了大量主题,这里列举一些不常见的,但是风格比较独特的主题。比如:vuepress-theme-blogplus 一款简洁的博客主题
2. 插件
插件列表列举了网站上已经安装有效的VuePress插件,包括官方插件、社区插件和小众插件。
我们组的文档站 使用了demo-container的插件,供我们对代码块进行封装,更好地展示,这是我强烈推荐的
第一步
下载 Vuepress Template 的仓库代码
git clone https://github.com/openHacking/vuepress-template.git
第二步 安装依赖
cd vuepress-template
yarn # 或者npm i
第三步 启动项目,随后即可根据自己的需求修改配置、编写文档内容
npm run docs:dev
第四步 打包项目
npm run docs:build
结果会在docs/.vuepress/目录下生成一个dist文件夹,里面就是打包后的代码
倡议 这些自定义开发的插件和主题,也是一个新的学习渠道。如果你有自己开发的插件或者主题,也欢迎提交项目网址到 VuePress Template 的 issues或者直接提交PR,维护者会考虑收录到插件列表里,作为官方awesome-vuepress列表的补充。
测试
我们使用 Vue Test Utils与 jest 一同测试
测试类名
/**
* @jest-environment jsdom
*/
import { shallowMount } from '@vue/test-utils'
import button from "@/components/Button";
describe('test ToDoList', done => {
it('test type', () => {
const wrapper = shallowMount(button, {
propsData: {
type: "primarygold"
}
})
expect(wrapper.find('.emui-button--primarygold').exists()).toBe(true);
}),
it('test round', () => {
const wrapper = shallowMount(button, {
propsData: {
round: "round"
}
})
expect(wrapper.find('.round').exists()).toBe(true);
})
})
测试内容title
/**
* @jest-environment jsdom
*/
import { shallowMount } from '@vue/test-utils'
import dialog from "@/components/dialog";
describe('test ToDoList', done => {
it('test title', () => {
const wrapper = shallowMount(dialog, {
propsData: {
title: "emui hello world"
}
})
expect(wrapper.html()).toContain('emui hello world')
})
})