當面試官問你:你有沒有打造過屬於本身的UI組件庫?

開篇

西風吹老洞庭波，一晚上湘君白髮多。
醉後不知天在水，滿船清夢壓星河。

前言

身爲程序員,尚未本身的包,總感受缺點什麼,女友和包至少佔同樣吧.正如上戰場沒有扛槍的士兵,吃飯少了筷子同樣,使人心情不愉悅.同時常常會有面試官會問一個犀利的問題,你有本身開源項目麼?你寫過公司本身的UI組件麼?如同雷劈,總以爲比別人矮一截,那麼今天就以hekr-ui爲例,介紹一下如何打造本身的UI庫吧

• 文檔地址
• 項目源碼

選型

咱們的目標是構建一個以 Vue爲基礎基於 element-ui的UI框架

• 文檔選用 Vuepress 構建,簡單便捷
• 打包選擇 gitlab CI ,本文以 travis 爲例
• 初始化採用vue-cli 3.0、pug和sass等相關依賴和插件(自行探索)

目的

1. 快速構建屬於❤️本身npm庫
2. 熟悉打包📦命令及其語法
3. 熟練掌握自動化👷構建
4. 爲社區貢獻本身一份腳印👣

初步構思

啓動一個項目

1.初始化一個項目

這裏推薦使用 Vue CLI 來進行快速構建

vue create hekr-ui

咱們選擇默認配置就能夠了

2.關聯代碼到你的庫

git能夠很好對代碼版本進行管理

• 當你初始化庫時

echo "# hekr-ui" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/xkloveme/hekr-ui.git
git push -u origin master

• 關聯本地庫時

git remote add origin https://github.com/xkloveme/hekr-ui.git
git push -u origin master

固然咱們選擇第二種.記得把node_modules忽略

配置你的項目

1.添加相關依賴

本文以 yarn爲主,固然 npm也是👌OK的

咱們以vuepress爲主編寫文檔,固然這是非必須的,若是您只想發一個包,能夠省略此步,必要的demo和測試會有極大的方便

# 將 VuePress 做爲一個本地依賴安裝
yarn add -D vuepress # 或者：npm install -D vuepress

# 新建一個 docs 文件夾
mkdir docs

# 新建一個 markdown 文件
echo '# Hello VuePress!' > docs/README.md

# 開始寫做
npx vuepress dev docs

接着，在 package.json 里加一些腳本:

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

而後就能夠開始寫做了:

yarn docs:dev # 或者：npm run docs:dev

要生成靜態的 HTML 文件，運行：

yarn docs:build # 或者：npm run docs:build

添加其餘依賴,經常使用語法

// 安裝指定包
yarn add *** 
// 安裝全部包,注意和npm的區別
yarn

注意⚠️這二者的區別dependencies和devDependencies

1. --save 將依賴的名稱、版本要求添加到 dependencies
2. --save-dev 將依賴的名稱、版本要求添加到 devDependencies

2.一些約定俗成的目錄結構

• 在使用vuepress開發時,約定了一些目錄結構

.
├── docs
│   ├── .vuepress (可選的)
│   │   ├── components (可選的)
│   │   ├── theme (可選的)
│   │   │   └── Layout.vue
│   │   ├── public (可選的)
│   │   ├── styles (可選的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可選的, 謹慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可選的)
│   │   └── enhanceApp.js (可選的)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json

• 在本項目中目錄結構爲

template
├─ docs
│    └─ .vuepress            # 配置、演示組件、靜態資源
│    │    ├─ compnents        # 演示組件
│    │    |    └─ demo          # demo組件
│    │    ├─ public           # 靜態資源
│    │    |    └─ images        # 圖片文件
│    │    |    └─ scss          # 樣式文件
│    │    ├─ config.js        # 配置文件
│    │    └─ enhanceApp       # 引入文件
|    ├─ compnent             # 組件md文件
|    └─ README              # 首頁md
├─ packages
│    ├─ index.js             # 組件index.js
│    └─ hk-countup           # countup組件
├─ public
└─ package.json

3.修改你的package.json文件

這個文件是項目的靈魂👻,是最重要的文件之一.具體字段參考 packagejson

• 修改主入口main

main字段指定了加載的入口文件， require('moduleName')就會加載這個文件。這個字段的默認值是模塊根目錄下面的 index.js。

"main": "dist/hekr-ui.umd.min.js"

你能夠經過下面的命令將一個單獨的入口構建爲一個庫

vue-cli-service build --target lib --name myLib [entry]

運行結果爲:

File                     Size                     Gzipped

  dist/hk-ui.umd.min.js    13.64 KiB                5.31 KiB
  dist/hk-ui.umd.js        43.87 KiB                11.37 KiB
  dist/hk-ui.common.js     43.49 KiB                11.25 KiB
  dist/hk-ui.css           0.54 KiB                 0.29 KiB

• 添加lib命令

"lib": "vue-cli-service build --target lib --name hk-ui --dest dist ./src/packages/index.js"

這個入口能夠是一個 .js 或一個 .vue 文件。若是沒有指定入口，則會使用 src/App.vue。

構建一個庫會輸出：

• dist/myLib.common.js：一個給打包器用的 CommonJS 包 (不幸的是，webpack 目前還並無支持 ES modules 輸出格式的包)
• dist/myLib.umd.js：一個直接給瀏覽器或 AMD loader 使用的 UMD 包
• dist/myLib.umd.min.js：壓縮後的 UMD 構建版本
• dist/myLib.css：提取出來的 CSS 文件 (能夠經過在 vue.config.js 中設置 css: { extract: false } 強制內聯)

4. 文檔配置

項目啓動以後須要咱們配置咱們的 vuepress

/*
 * @describe: 配置文件 config.js
 * @Author: superDragon
 * @Date: 2019-10-09 23:25:49
 * @LastEditors: superDragon
 * @LastEditTime: 2019-10-10 18:49:25
 */
let component = [
  'hk-button',
  'hk-card'
]
module.exports = {
  base: '/hekr-ui/',
  title: 'hekr-ui',
  description: 'hekr-ui',
  themeConfig: {
    nav: [
      { text: '首頁', link: '/' },
      {
        text: '組件',
        link: '/component/hk-button'
      }
    ],
    sidebar: {
      '/component/': component
    },
    lastUpdated: '最後更新',
    repo: '',
    repoLabel: 'GitLab'
  },
  plugins: [],
  serviceWorker: true
}

當咱們可以成功運行下面時

"docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",

• 本地運行

yarn docs:dev # 或者：npm run docs:dev

• 打包

yarn docs:build # 或者：npm run docs:build

5.持續集成

以 GitHub Pages 和 Travis CI 爲例

• 打包後放置在項目的 docs 目錄中的dist中,注意⚠️區分；
• 使用的是默認的構建輸出位置；
• VuePress 以本地依賴的形式被安裝到你的項目中，而且配置了以下的 npm scripts:

{
  "scripts": {
    "docs:build": "vuepress build docs"
  }
}

1. 在 docs/.vuepress/config.js 中設置正確的 base這裏咱們設置/hekr-ui/ 🌿。

   若是你打算髮布到 https://<USERNAME>.github.io/，則能夠省略這一步，由於 base 默認便是 "/"。

   若是你打算髮布到 https://<USERNAME>.github.io/<REPO>/（也就是說你的倉庫在 https://github.com/<USERNAME>/<REPO>），則將 base 設置爲 "/<REPO>/"。

2. 在你的項目中，建立一個以下的 .travis.yml 文件📃:

language: node_js
node_js:
  - '8'

install:
  - npm install

script:
  - npm run build

after_success:
  - cd ./docs/.vuepress/dist
  - git init
  - git config --global user.name "${U_NAME}"
  - git config --global user.email "${U_EMAIL}"
  - git add .
  - git commit -m "👷‍Automatically update from travis-ci 👷‍"
  - git push --quiet --force  "https://${GH_TOKEN}@${GH_REF}" master:${P_BRANCH}

branches:
  only:
    - master

notifications:
  email:
    - xkloveme@163.com
  on_failure: always

# Note: you should set Environment Variables here or 'Settings' on travis-ci.org
env:
  global:
    # 我將其添加到了travis-ci的環境變量中
    - U_NAME: xkloveme
    - U_EMAIL: xkloveme@qq.com
    - P_BRANCH: gh-pages
    - GH_REF: github.com/xkloveme/vue-v-xxx.git

1. 註冊github、travis和配置travis相關,啓用構建,自行Google傳送門
2. 更多配置參考vuepress部署

實踐

完善組件並打包

以編寫 hk-button組件爲例,並導出

1. 添加組件及導出

<template lang="pug">
el-tooltip(effect="dark" v-if="tips" :content="tips" placement="top-start")
  el-button.hk-button(:size="size" :type="type" v-bind="$attrs" @click="handleClick")
    slot
el-button.hk-button(:size="size" v-else :type="type" v-bind="$attrs" @click="handleClick")
  slot
</template>

<script>
import { Debounce } from './../util/debounce'
export default {
  name: 'hk-button',
  props: {
    type: {
      type: String,
      default: 'primary'
    },
    size: {
      type: String,
      default: 'medium'
    },
    tips: {
      type: String,
      default: null
    }
  },
  methods: {
    handleClick: Debounce(function (e) {
      this.$emit('click', e)
    }, 200)
  }
}
</script>

<style lang="scss">
.hk-button {
  i + span {
    padding-left: 10px;
  }
}
</style>

1. 導出組件

import HkButton from './hk-button'

export default HkButton

1. 導出爲install

/*
 * @describe: 主入口,導出install
 * @Author: superDragon
 * @Date: 2019-10-09 23:21:11
 * @LastEditors: superDragon
 * @LastEditTime: 2019-10-10 19:09:57
 */
import HkButton from './hk-button'
import HKcard from './hk-card'

const install = Vue => {
  Vue.component(HkButton.name, HkButton)
  Vue.component(HKcard.name, HKcard)
}

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export {
  HkButton,
  HKcard
}

export default { install }

上傳本身的npm

註冊®️並切換到官方npm源

註冊登錄npm

npm adduser        //回車後,彈出Username:  
Username:          //輸入你在官網註冊時的用戶名,回車
Password:          //輸入官網註冊的密碼,密碼看不見,請確保你輸的密碼正確, 回車
Email:(this is Public)    //輸入官網註冊時綁定的郵箱,回車

上傳

npm publish        //此處上傳命令,回車

這樣一個hekr-ui就發佈完成了

撤銷

24小時內撤銷也是很簡單的.

npm unpublish --force

大功告成

Let's enjoy the taste of life, if we feel, the more we will live longer.

以爲不錯的話給個star

• 本文演示庫地址hekr-ui
• 文檔地址
• 項目源碼