签名两篇讲了如何规划本地项目的结构和如何发布最终的包,这一章讲一下如何编写文档和示例demo。
修改webpack.base.conf.js配置
学习elemntui的做法,主要是使用vue-markdown-loader来解析md文件,同时配置vueMarkdown参数来实现示例demo的展示。
新建和注册demo-block组件
学习elementui,在components下面新建组件demo-block,并在全局注册,用于在md文件中使用和配合markdown进行解析。
|
|
新建docs文件夹
具体的我就不讲了,主要讲一下要点,首先是新建docs文件夹用于存放md文件,然后将对应的路由指向对应的md文件,比如/count指向/docs/count.md。
|
|
这样当你执行npm run dev
的时候,打开http://localhost:8080/count
就可以查看count.md下面的内容了。
发布docs静态文件
这里重点讲一下如何分别打包package组件库和文档静态页面。首先,webpack.pro.conf.js已经被打包组件库占用了,那么我们的demo打包可以采取新建一个webpack.demo.conf.js文件来打包,具体内容和build有区别,但是和普通的前端开发静态资源打包没有区别。需要分别在config下面的index.js里面新建一个demo对象,然后修改build文件夹下面的build.js。
先把所有有
|
|
的地方改为(暂不考虑test情况)
|
|
/config/index.js中demo对象为:
|
|
webpack.demo.conf.js:
|
|
配置package.json
修改后将package.json的script稍作修改,使得打包更加便捷:
|
|
其中npm run dev
表示运行本地的demo,cd packages/theme-default && gulp dev
是先打包了theme样式文件,这样也有利于后面打包生成环境的时候可以直接利用。
其中npm run build
表示打包packages组件库,cp -r ./packages/theme-default/lib/* dist/
是将刚刚打包的theme直接copy到dist文件夹下面。
其中npm run demo
表示打包示例demo的静态页面,cross-env NODE_ENV=demo
设置了环境变量。
发布到gh-pages
github的gh-pages可以展示项目中的静态页面,那么我们刚刚打包好了demo文件下面的静态文件就可以push到gh-pages分支了,那么如何更加便捷的push呢。
在根目录下新建bin文件夹,bin下面新建static文件
|
|
执行sh ./bin/static
即可实现push到gh-pages,然后网页打开https://zp1112.github.io/cdcomponents/,即可看到文档了!