本文僅限於入門級，沒有成規模製作，希望能對你有所幫助。 因為在開發多個項目中可能會用到同一個組件，那麼我們通過複製粘貼的形式更新，無異於是笨拙的，我們可以通過上傳到npm後，不斷迭代npm包來實現更新。 前期準備 初始化project 這裡我們使用 來初始化一個vue項目。 or 首先我們來開發一個 ...
本文僅限於入門級，沒有成規模製作，希望能對你有所幫助。
因為在開發多個項目中可能會用到同一個組件，那麼我們通過複製粘貼的形式更新，無異於是笨拙的，我們可以通過上傳到npm後，不斷迭代npm包來實現更新。
前期準備
初始化project
這裡我們使用vue-cli來初始化一個vue項目。
npm install -g @vue/cli or yarn global add @vue/cli
vue create personal-component-set
首先我們來開發一個可復用的頂欄控制項，這裡是用vuetifyUI庫進行第二次開發。
npm install vuetify or yarn add vuetify
頂欄控制項代碼：
src/components/TopBar.vue
<template>
<v-toolbar>
<!-- 這裡v開頭的使用的是第三方ui組件庫 -->
<v-toolbar-side-icon @click="toMainPage()"></v-toolbar-side-icon>
<v-toolbar-title>{{title}}</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn flat @click="openMyGithub()">
<v-avatar size=42>
<img src="https://avatars3.githubusercontent.com/u/10973821?s=460&v=4">
</v-avatar>
<span style="margin-left:8px;">About me: ssthouse</span>
</v-btn>
<v-tooltip bottom>
<v-btn slot="activator" flat :href="sourceCodeLink">
<v-avatar size=42>
<img src="../assets/logo.png">
</v-avatar>
Source Code
</v-btn>
<span class="top-bar-tooltip">Welcome to fork & star <br/> ; )</span>
</v-tooltip>
</v-toolbar-items>
</v-toolbar>
</template>
<script>
export default {
// 接受被組件化後傳遞的自定義屬性
// 源代碼連接
props: ['sourceCodeLink', 'title'],
methods: {
openMyGithub() {
// 自定義頭像被點擊的時候創建a標簽並且跳轉
const a = document.createElement('a')
a.target = '_blank'
a.href = 'https://github.com/mufengsm'
a.click()
},
toMainPage() {
this.$emit('to-main-page')
}
}
}
</script>
<style scoped>
.top-bar-tooltip {
font-size: 18px;
}
a {
color: black;
}
</style>
配置project
下麵我們配置當前項目，讓它可以發佈在npm上
首先我們編輯入口文件 src/components/index.js, 使其被作為 UI 庫導入時能自動在Vue中註冊我們的 Component:
import Vue from 'vue'
import TopBar from './TopBar.vue'
const Components = {
TopBar
}
Object.keys(Components).forEach(name => {
Vue.component(name, Components[name])
})
export default Components接下來我們添加 build 項目的腳本到 package.json 的 scripts 中:
"scripts": {
"build-bundle": "vue-cli-service build --target lib --name personal-component-set ./src/components/index.js",
},命令解釋：--target打包為lib倉庫構建，--name項目名稱為personal-component-set，入口文件為./src/components/index.js
運行命令後就可以在dist文件夾中看到打包後的文件了，這裡我們選擇預設發佈我們的 **.common.js* 文件, 所以我們在 package.json中添加main屬性。
指定該屬性後, 當我們引用該組件庫時, 會預設載入 main 中指定的文件。
"main": "./dist/personal-component-set.common.js",
最後, 我們再配置 package.json中的 files屬性, 來配置我們想要發佈到 npm 上的文件有哪些。
"files": [
"dist/*",
"src/*",
"public/*",
"*.json",
"*.js"
],npm 發佈
首先去npm官網註冊一個賬號記得去查看郵箱郵件來認證郵箱，要不然會上傳會不成功。
然後在項目中打開命令行工具npm adduser or npm login輸入你註冊的用戶名密碼和郵箱，可以使用npm whoami查看登錄狀態。
在發佈之前, 我們修改一下項目的名稱(註意不要和npm已有項目名稱衝突，可以先去npm搜索一下), 推薦使用 @你註冊npm的用戶名/項目名稱 的命名方式。
接下來我們就可以發佈我們的 UI 組件庫了, 在發佈之前我們再編譯一次, 讓build出的文件為我們最新的修改:
npm run build-bundle
我們使用下麵的命令發佈我們的項目:
npm publish --access public
需要註意的是 package.json中指定的version屬性: 每次要更新我們的組件庫都需要更新一下version(畢竟同一個version 的代碼不同,很容易讓人產生疑惑)
測試使用
這樣我們就完成了自己的 UI 組件庫的發佈. 接下來我們可以在任何需要使用到該組件庫的項目中使用:
npm install --save @你註冊npm的用戶名/項目名稱
然後在index文件 (如src/main.js) 中引入該組件庫:
import @你註冊npm的用戶名/項目名稱
接下來我們就可以在 Vue的template中使用組件庫中的 Component了:
<template>
<!-- v-app是vuetify中的 -->
<v-app id="app">
<top-bar :sourceCodeLink="sourceCodeLink"></top-bar>
</v-app>
</template>如果你完全按照上面教程來的，可記得在src/main.js中引入我們文章開頭的第三方ui組件庫vuetify
// 使用第三方組件庫
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)最後
經過上面這些步驟後, 我們就擁有了一個屬於自己的組件庫了. 我們可以隨時更新, 發佈自己新版的組件庫.
而依賴了該組件庫的項目只需要使用簡單的 npm 命令即可更新 : )
+++
參考文章：https://juejin.im/post/5b54120b5188251967307be4
