手把手做一個基於vue-cli的組件庫（上篇）

基於vue-cli4的ui組件庫，先貼個最終效果吧，步驟有點多，准備分上下篇，上篇：如何做一個初步的組件。下篇：編寫說明文檔及頁面優化。開工。

GitHub源碼地址：https://github.com/sq-github/sq-ui

GitHub預覽地址：https://sq-github.github.io/sq-ui/dist

一、組件庫是基於vue-cli框架的的，用vue-cli創建項目

vue create sq-ui

二、修改目錄，以及重新修改配置文件。

1、查看了很多的開源組件庫的源碼，都喜歡用packages目錄存放組件，examples目錄用來展示組件。所以在這個項目內，將src目錄改為examples用來展示組件。同級別創建packages目錄，用來存放組件。由於改了目錄，所以需要重新新配置webpack，先在最外層創建vue.congfig.js。現在的目錄結構如下：

2、配置vue.config.js文件。重新運行項目成功即可。

const path = require('path')
module.exports = {
  // 修改 pages 入口
  pages: {
    index: {
      entry: 'examples/main.js', // 入口
      template: 'public/index.html', // 模板
      filename: 'index.html' // 輸出文件
    }
  },
  // 擴展 webpack 配置
  chainWebpack: config => {
    // @ 默認指向 src 目錄，這里要改成 examples
    // 另外也可以新增一個 ~ 指向 packages
    config.resolve.alias
      .set('@', path.resolve('examples'))
      .set('~', path.resolve('packages'))
// 把 packages 和 examples 加入編譯，因為新增的文件默認是不被 webpack 處理的
    config.module
      .rule('js')
      .include.add(/packages/)
      .end()
      .include.add(/examples/)
      .end()
      .use('babel')
      .loader('babel-loader')
      .tap(options => {
        // 修改它的選項...
        return options
      })
  }
}

三、新建組件

1、在packages下面新建一個SqButton組件的文件夾，同時新建一個index.js文件，用來導出所有組件。目錄結構如下：

 

2、在SqButton.vue中編寫組件

<template>
  <button class="testBtn">測試按鈕</button>
</template>
<script>
export default {
  name: 'SqButton' // 注意這個name是必須的
}
</script>
<style lang="scss" scoped>
.testBtn {
  width: 100px;
  height: 50px;
  margin: 0 10px;
  background-color: #fc297f;
  font-size: 16px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}
</style>

3、在SqButton/src/index.js中暴露組件

// 暴露組件
import SqButton from './src/SqButton'
SqButton.install = vue => {
  vue.component(SqButton.name, SqButton)
}
export default SqButton

4、最后在src/index.js中導出所有組件

import SqButton from './SqButton'

// 所有組件列表
const components = [SqButton]
// 定義install方法，接收Vue作為參數
const install = function(Vue) {
  // 判斷是否安裝，安裝過就不繼續往下執行
  if (install.installed) return
  install.installed = true
  // 遍歷注冊所有組件
  components.map(component => Vue.use(component))
}

// 檢測到Vue才執行，畢竟我們是基於Vue的
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}
console.log(components)
export default {
  install,
  // 所有組件，必須具有install，才能使用Vue.use()
  ...components
}

5、在項目中測試組件

在main.js中引入組件

// 引入組件
import squi from '../packages'
Vue.use(squi)

在app.vue頁面中調用

 

最終效果

 

四、發布組件進行測試

在 package.json的 scripts 字段中新增一下命令：

"lib": "vue-cli-service build --target lib --name kui --dest lib packages/index.js"

 

--target: 構建目標，默認為應用模式。這里修改為 lib 啟用庫模式。

--dest : 輸出目錄，默認 dist。這里我們改成 lib

[entry]: 最后一個參數為入口文件，默認為 src/App.vue。這里我們指定編譯 packages/ 組件庫目錄。

注意修改成適合自己項目的，我的修改如下：

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

2、執行命令

npm run lib

會發現目錄下多了lib文件夾

package.json其他配置，配置如下

  "name": "sq-ui",
  "version": "0.1.6",
  "private": false,
  "description": "基於 vue-cli4 的組件庫",
  "main": "lib/sq-ui.umd.min.js",
  "author": "sq",
  "keywords": [
    "sq-ui"
  ],
  "license": "MIT",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name sq-ui --dest lib packages/index.js"
  },

3、添加 .npmignore 文件，發布時，只有編譯后的 lib 目錄、package.json、README.md才需要被發布。所以通過配置.npmignore文件忽略不需要提交的目錄和文件。

# 這是復制 .gitignore 里面的
.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

# 以下是新增的
# 要忽略目錄和指定文件
examples/
packages/
public/
vue.config.js
babel.config.js
*.map
*.html

4、發布到npm

現需要去npm官網注冊賬號

然后本地登錄：npm login

最后發布到npm： npm publish

5、最后就可以測試了：

可以另起一個項目

npm i sq-ui

在main.js中引用

import squi from 'sq-ui'
import 'sq-ui/lib/sq-ui.css'
Vue.use(squi)

在app.vue中調用組件：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
    <sq-button></sq-button>
  </div>
</template>

如果，出現下面這個結果，恭喜你成功了。但這樣展示實在是太low了，在下篇中我們希望我們的組件庫能像element那樣進行展示，為組件添加說明文檔，使其更像一個組建庫。

 

參考鏈接：

https://github.com/xiaolannuoyi/yuan-ui

https://segmentfault.com/a/1190000018310478

https://blog.csdn.net/qq_31126175/article/details/100527322?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158788190919725247652639%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.57644%2522%257D&request_id=158788190919725247652639&biz_id=0&utm_source=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-7