主题列表:juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate
贡献主题:https://github.com/xitu/juejin-markdown-themes
theme: channing-cyan highlight:
发现了一个很好用的构建UI组件库的库create-vant-cli-app
,基本满足了UI组件库开发的需求。
运行yarn dev
后,项目中的md自动生成文档,又有内嵌的demo页面方便调试,非常方便。使用过程中也遇到了一些问题,我做了一些梳理。
vant-cli dev
哪里来?
这是package.json
中script.dev
的命令。
在@vant/cli
中的package.json
配置了bin: {'vant-cli': './lib/index.js'}
, 这样在安装该模块时,自动软链生成nodem_modules/.bin/vant-cli
。
页面如何哪里来?
和vue-cli类似,vant-cli最终还是使用了webpack-dev-server
这个包,来启动项目的。
来看看相关webpack的配置:
site目录是用vue写的pc端以及手机端的展示页面,结构如下
- common
- desktop
- components
- App.vue
- index.html
- main.js
- router.js
- utils.js
- mobile
- components
- App.vue
- index.html
- main.js
- router.js
md文档如何自动生成页面?
左侧导航栏目:通过vant.config.js配置。
各个组件的说明文档: 自定义插件vant-cli-site-plugin
,为pc页面、手机页面生成配置文件引入md,通过markdown-loader转换为vue文件。
运行命令后,vant-cli-site-plugin会在node_modules/@vant/cli
中会生成几个文件:site-desktop-shared.js、site-mobile-shared.js、package-entry.js、package-style.less
等。
看看里面有什么?
site-desktop-shared.js
import config from '/Users/vant-dev/vant.config';
import Changelog_en_US from '/Users/changelog.en-US.md';
import Changelog_zh_CN from '/Users/changelog.zh-CN.md';
export { config };
export const documents = { Changelog_en_US, Changelog_zh_CN }
// ... ...
site-mobile-shared.js
site-mobile-shared.js
里面则是手机端的页面,并且全局引入UI库以及UI样式。
再看loader配置
{
test: /\.md$/,
use: [CACHE_LOADER, 'vue-loader', '@vant/markdown-loader'],
}
vant使用了自定义loader:
- 使用markdown-it: 将md转换为html
- 添加highlight,为html添加上class
需要注意的是,highlight只是加了class,而没有对应的样式代码,所以要自己引入highlight的css或者手动添加对应的样式。vant使用的是后面的方式。
输出vue格式的文件
function wrapper (content) {
return `
<template><section v-html="content v-once /></template>
<script>
export default {}
</script>
`
}
版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 啵儿霸奔 原文链接:https://juejin.im/post/6921993704710340621