本项目地址: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 cd project-name npm run serve 看项目是否成功启动,启动成功恭喜你完成第一小步~ ②目录结构修改src目录修改为examples,用来组件示例 ③增加配置文件由于修改了目录结构,需要修改相关配置,这里参考vue cli官网。 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,如下: <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格式的文档。 编写文档在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"可以看到文字代码展示以及一个小红点在闪烁,代表第一步完美结束~ 封装代码展示组件开始第二步。 ⑥让项目在github上展示参考文章:https://segmentfault.com/a/1190000017084155 项目已经完成一小半了,我已经迫不及待将它传到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"保存成功后,就拥有演示地址了~~ |
|