本項目地址：https://github.com/husilang/vue-ui-demo
項目參考文章：從零開始搭建Vue組件庫 VV-UI
項目的初衷是學習怎么封裝一個基於Vue的UI組件庫，順便記錄每個步驟，以及在此過程中遇到的難點及體會。
下面是我個人的一個項目搭建流程，希望能幫助大家。
①腳手架初始化項目
使用 vue cli 3.0.0版本以上，在node或cmd中輸入以下命令創建項目
vue create project-name
選擇 Manually select features
選擇Babel，Router，Vuex，CSS Pre-processors，Unit Testing
選擇Sass/SCSS(with node-sass)
選擇Mocha + Chai
選擇In dedicated config files
以上來安裝（按需選擇）
運行如下命令：
cd project-name npm run serve
看項目是否成功啟動，啟動成功恭喜你完成第一小步~
②目錄結構修改
src目錄修改為examples，用來組件示例
在examples目錄下，新建docs文件夾，用來編寫各組件的文檔
在項目下新增packages文件夾，用來存放封裝的組件
③增加配置文件
由於修改了目錄結構，需要修改相關配置，這里參考vue cli官網。
在項目根目錄下，增加配置文件vue.config.js，代碼如下：
const path = require("path");
module.exports = {
pages: {
index: {
entry: "examples/main.js", // js入口文件修改
template: "public/index.html",
filename: "index.html"
}
},
chainWebpack: config => {
// 重新設置目錄別名
config.resolve.alias
.set("@", path.resolve("examples"))
.set("~", path.resolve("packages"));
// 使 examples及packages目錄下的js文件都加入編譯
config.module
.rule("js")
.include.add("/packages")
.end()
.include.add("/examples")
.end()
.use("babel")
.loader("babel-loader");
},
}
運行npm run serve 查看是否能成功啟動
④編寫第一個組件
接下來，就是要封裝第一個組件，由於此文檔的重點不是講解組件怎么封裝，那我們就先寫一個簡單的組件用來測試好了。
編寫組件前，我先去了解了一下css命名規范BEM。
看了幾篇關於BEM的文章后，還是比較模糊，實踐出真知，在以后的組件封裝中，我會慢慢去使用這種規范。
在packages下封裝一個test組件
在packages下新建一個文件夾test，test目錄下新建index.js文件以及src/test.vue，如下：
在packages/test/src/test.vue中
<template>
<div class="zm-test" :style="{backgroundColor: bgColor}"></div>
</template>
<script>
export default {
name: 'ZmTest',
props: {
bgColor: {
type: String,
default: "#ccc"
}
}
}
</script>
<style lang="scss">
.zm-test {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
animation: zm-opacity 2s infinite linear;
}
@keyframes zm-opacity{
0% {opacity:1}
10%,90%{opacity:.8}
20%,80%{opacity:.7}
30%,70%{opacity:.5}
40%,60%{opacity:.3}
50%{opacity:0}
100%{opacity:.95}
}
</style>
在packages/test/index.js中
import ZmTest from './src/test.vue'
// 支持按需引用
ZmTest.install = function (Vue) {
Vue.component(ZmTest.name, ZmTest);
};
export default ZmTest;
在packages下新建index.js
在packages/index.js中
import ZmTest from './test/index'
const components = [
ZmTest
];
const install = function (Vue) {
if (install.installed) return;
components.map(component => Vue.component(component.name, component));
};
if (typeof window.Vue !== "undefined" && window.Vue) {
install(window.Vue);
}
export default {
install,
ZmTest
}
在examples下引用示例
在examples/main.js中
// do something... import ZmUI from '../packages/index' Vue.use(ZmUI); // do something...
在examples/views/Home.vue中引用test組件
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<zm-test bgColor="blue"></zm-test>
</div>
</template>
<script>
// @ is an alias to /examples
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
}
}
</script>
啟動程序后，在"http://localhost:8080/#/home"可以看到我們封裝的test組件能正常使用了~
⑤編寫第一個組件的文檔
小白對md的寫法一竅不通...所以先去了解了md文件的常見語法，參考文章：如何寫md格式的文檔。
此過程分為兩步，第一步使.md文件正常展示，可以看到運行結果以及代碼展示，第二步封裝一個代碼展示的組件，使起可以展開收起，高亮顯示。
編寫文檔
在examples/docs下新建一個test.md文件，隨意寫點介紹，內容如下：
# 測試組件 測試組件是用來測試md文檔是否能在項目中像vue文件一樣正常展示代碼運行結果 運行結果如下 <zm-test bgColor="red"></zm-test> 代碼如下 `<zm-test bgColor="red"></zm-test>`
安裝工具
對md文件需要一個編譯工具--vue-markdown-loader
在本項目下，用命令行工具運行以下命令
npm run vue-markdown-loader -D
修改配置文件
修改vue.config.js，使md文件能像vue文件一樣在項目里展示
// do something...
module.exports = {
// do something...
chainWebpack: config => {
// do something...
// 使用vue-markdown-loader
config.module.rule("md")
.test(/\.md/)
.use("vue-loader")
.loader("vue-loader")
.end()
.use("vue-markdown-loader")
.loader("vue-markdown-loader/lib/markdown-compiler")
},
// do something...
}
添加路由
在router.js里添加測試文檔的路由
// do something...
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/test',
name: 'test',
component: () => import('../docs/test.md')
}
]
})
查看結果
重新啟動程序（注意，只要修改了vue.config.js文件，程序都需要重新啟動），打開"http://localhost:8080/#/test"可以看到文字代碼展示以及一個小紅點在閃爍，代表第一步完美結束~
封裝代碼展示組件
開始第二步。
以上，我們完成了md文件的正常展示，但是我們可以將代碼展示做得更好，封裝一個代碼展示的組件，使示例代碼可以展開收起，代碼高亮等。
感興趣的可以了解一下markdown-it。
我還在了解中，以后會更新上。
⑥讓項目在github上展示
參考文章：https://segmentfault.com/a/1190000017084155
項目已經完成一小半了，我已經迫不及待將它傳到github上記錄下來。
在本地我能直觀地看到我的項目成果了，現在希望能在github上有個演示地址，讓別人也能直觀地看到我的項目展示。通過github文檔及相關資料搜索，我找到了解決方案。如下：
安裝工具
在項目下安裝gh-pages工具
npm install gh-pages -D
增加部署命令
package.json文件修改scripts命令
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
},
修改配置
vue.config.js需要修改publicPath配置
module.exports = {
// do something...
publicPath: process.env.NODE_ENV === 'production' ? '/project-name/' : '/', //由於我的項目在github上名為zm-ui,所以我的project-name為zm-ui
// do something...
}
打包部署
在node或cmd運行以下命令
npm run deploy
看到"Published"恭喜你部署成功，接下來可以到github上查看你的項目，是否多了一個分支gh-pages
在github上修改項目設置
在github你的項目下，找到"Settings"下的"GitHub Pages", "Source"選擇"gh-pages branch"保存成功后，就擁有演示地址了~~
以上，未完待續...