開始動手寫vue ui庫
創建vue項目
可以利用現成的vue-cli腳手架創建項目結構
vue init webpack XXX
cd XXX
yarn // or npm install
npm run dev
到此為止，一個普通的vue項目就創建成功，接下來需要改變一下現有的目錄結構。
更改目錄結構
.
...
|-- examples //原src目錄改成examples用作示例展示
|-- packages //新增 packages用于組件編寫目錄
...
.
這樣改完之后項目是直接跑不起來的，需要改下webpack的配置，打開./build/webpack.base.conf.js，將里面所有有關src的位置改成examples。大致有下面幾個位置需要修改：
1、
const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('examples'), resolve('test')], //這里的src改成examples
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
})
2、
entry: {
app: './examples/main.js' // 入口文件改成examples目錄
},
3、
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('examples'), //將@解釋成examples
}
}
4、
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('examples'), resolve('test')]
}
最后為了最后 npm run build能正常編譯packages，我們需要為babel-loader增加一個規則
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('examples'), resolve('test'), resolve('packages')]
}
這時候，再運行 npm run build就能正常打包了，但是有個問題，打包出來的文件直接運行會報404錯誤，這是因為打包的根目錄設置有問題，打開./config/index.js，找到build下面的assetsPublicPath: '/'，改成如下即可
assetsPublicPath: './'
編寫文檔
一個好的ui庫，說明文檔自然是不可或缺的，然而markdown是最合適不過的，然而我們現在是一個vue項目，怎樣再vue項目里面用markdown來編寫文檔呢？答案是：vue-markdown-loader打開如上鏈接，按照里面的說明文檔配置webpack
npm i vue-markdown-loader -D
安裝完成之后修改webpack.base.config.js文件，在rules下面添加一條
{
test: /\.md$/,
loader: 'vue-markdown-loader'
}
接下來創建文件./examples/docs/home.md
## 這是首頁
::: demo
``` html
<div class="input">
<input type="text" placeholder="請輸入用戶名"/>
</div>
修改router/index.js，將路由中的vue文件路徑改成markdown的路徑
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: r => require.ensure([], () => r(require('../docs/home.md')))
}
]
})
提示： 如果當你運行項目的時候遇到如下的報錯,你需要重新運行一下 yarn 或者npm install
'webpack-dev-server' 不是內部或外部命令，也不是可運行的程序
或批處理文件。
這時候再次運行項目，應該可以看到剛才markdown中的內容！但是我們的說明文檔可不止止是文字，鏈接，圖片這么簡單，我們還需要案例展示和代碼展示，接下來，我們需要配置vue-mark-down的option選項
const MarkdownItContainer = require('markdown-it-container')
const striptags = require('./strip-tags')
const vueMarkdown = {
preprocess: (MarkdownIt, source) => {
MarkdownIt.renderer.rules.table_open = function () {
return '<table class="table">'
}
MarkdownIt.renderer.rules.fence = utils.wrapCustomClass(MarkdownIt.renderer.rules.fence)
return source
},
use: [
[MarkdownItContainer, 'demo', {
// 用于校驗包含demo的代碼塊
validate: params => params.trim().match(/^demo\s*(.*)$/),
render: function(tokens, idx) {
var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
if (tokens[idx].nesting === 1) {
var desc = tokens[idx + 2].content;
// 編譯成html
const html = utils.convertHtml(striptags(tokens[idx + 1].content, 'script'))
// 移除描述，防止被添加到代碼塊
tokens[idx + 2].children = [];
return `<demo-block>
<div slot="desc">${html}</div>
<div slot="highlight">`;
}
return '</div></demo-block>\n';
}
}]
]
}
將上面的這個變量放在./build/webpack.base.config.js中并修改如下
{
test: /\.md$/,
loader: 'vue-markdown-loader',
options: vueMarkdown
}
在./build/utils.js中添加如下
/**
* 增加 hljs 的 classname
*/
exports.wrapCustomClass = function (render) {
return function (...args) {
return render(...args)
.replace('<code class="', '<code class="hljs ')
.replace('<code>', '<code class="hljs">')
}
}
/**
* Format HTML string
*/
exports.convertHtml = function (str) {
return str.replace(/(&#x)(\w{4});/gi, $0 => String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g, '$2'), 16)))
}
新增./build/strip-tags.js
/**
* 轉換成DOM字符串
*/
const cheerio = require('cheerio')
module.exports = (str, tags) => {
const $ = cheerio.load(str, { decodeEntities: false })
if (!tags || tags.length === 0) {
return str
}
tags = !Array.isArray(tags) ? [tags] : tags
let len = tags.length
while (len--) {
$(tags[len]).remove()
}
return $.html()
}
上面都準備好了之后，我們需要安裝相應的依賴
npm i markdown-it-container --save-dev
到此之后我們便可以看到markdown文件中既可以展示文字，代碼，還可以展示可交互的輸入框等等。但是這時候，頁面中的代碼并沒有顯示代碼高亮，其實我們的頁面元素已經有了代碼高亮，只是沒有引用css文件，只需要將 node_modules/highlight.js/styles/color-brewer.css引入到項目中即可，接下來就是全心全意的寫插件了。
未完待續！
