基於Vue搭建自己的元件庫（1）

臉別再大了發表於2020-05-18
Vue元件

本專案地址：https://github.com/husilang/zm-ui

專案參考文章：從零開始搭建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"儲存成功後，就擁有演示地址了~~

 

以上，未完待續...

相關文章