基于Vue搭建自己的组件库（1）
本项目地址：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"保存成功后，就拥有演示地址了~~
以上，未完待续...
