『前端工程』—— Vue CLI3搭建組件庫並用npm發佈實戰操做

在公司項目逐漸多起來的狀況下，公共組件也多起來。不想每一次修改一下公共組件，都要去每一個項目中修改。這時候你就該學會用Vue CLI3 搭建組件庫並用npm發佈了，本文以基於element組件中Select 選擇器和Tree 樹形控件擴展出來的樹結構數據下拉選擇器的組件爲例子講解。css

1、安裝Vue CLI3

首先你要卸載Vue CLI2,用命令npm uninstall vue-cli -g卸載；
輸入命令npm install -g @vue/cli安裝Vue CLI3;
安裝完成後，輸入命令vue --version，查看Vue CLI的版本號是不是3.0以上，是表明安裝成功。

2、搭建Vue組件庫項目

新建文件夾，注意文件名字最好不要用中文，按下圖操做；

輸入命令vue create fxft-tree-select,fxft-tree-select爲項目名稱；
按上下鍵選擇Manually select features（手動選擇功能）項,default (babel, eslint)（默認安裝）；

按上下鍵和回車鍵選擇要安裝的功能；

使用路由器的歷史模式，回車進入下一步；

選擇CSS預處理語言，選擇less，回車進入下一步；

選擇In dedicated config files，將Babel、PostCSS等配置獨立在package.json文件外；

是否保存安裝配置，直接回車進入下一步；

若是出現下圖就是開始進行下載Vue項目了；

若是下載很慢，是網絡問題，可讓電腦連你的手機網絡；

3、清潔Vue組件庫項目

經過Vue CLI搭建的Vue組件庫項目中有不少無用的文件和代碼，須要對其作一次清潔。html

一、初始化

下載完成後，首先打開package.json文件，將

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
},
複製代碼

改爲

"scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build"
},
複製代碼

由於在Vue CLI2中使用npm run dev命令啓動項目。

使用npm install安裝依賴，安裝成功後，執行npm run dev,執行成功後在瀏覽器打開 http://localhost:8080/ ，頁面展現以下圖所示，說明Vue項目已經搭建成功。

二、清潔public文件下的index.html文件

清潔後以下：vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
</head>
<body>
    <div id="app"></div>
</body>
</html>
複製代碼

三、清潔router.js文件

清潔後以下：webpack

import Vue from 'vue'
import Router from 'vue-router';
Vue.use(Router)

function load(component) {
    return resolve => require([`./views/${component}`], resolve);
}

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/',
            name: 'home',
            component: load('home')
        },
    ]
})

複製代碼

四、清潔App.vue文件

清潔後以下：git

<template>
  <div>
    <router-view/>
  </div>
</template>
複製代碼

五、清潔views文件夾

刪除views文件夾中的About.vue和Home.vue文件，github

新建home.vue文件.內容以下：web

<template>
    <div style="text-align:center">
        <img alt="Vue logo" src="../assets/logo.png">
        <p>歡迎使用Vue組件庫項目</p>
    </div>
</template>
複製代碼

六、刪除components文件夾

七、清潔完畢

從新執行npm run dev,執行成功後在瀏覽器打開 http://localhost:8080/ ，頁面展現以下圖所示，說明Vue項目已經清潔成功。vue-router

4、配置Vue組件庫項目

清潔完畢後，但其仍是不知足咱們組件庫項目開發的要求，須要咱們進一步配置。vue-cli

一、更改src文件夾的名字

在Vue組件庫項目中原來src文件夾的內容是demo展現的內容，因此文件名改爲examples，比較形象。npm

二、從新配置項目入口文件

在Vue CLI3中，項目的webpack配置是要在根目錄下新建vue.config.js來配置。

在vue.config.js文件中配置內容以下：

module.exports = {
    pages: {
        index: {
            entry: 'examples/main.js',
            template: 'public/index.html',
            filename: 'index.html',
        },
    },
}
複製代碼

三、在根目錄下新建packages文件夾

組件的代碼在package文件夾中開發

四、配置文件別名

const path = require('path');
function resolve(dir) {
    return path.resolve(__dirname, dir)
}
module.exports = {
    configureWebpack: {
        resolve: {
            extensions: ['.js', '.vue', '.json'],
            alias: {
                '@': resolve('packages'),
                'assets': resolve('examples/assets'),
                'views': resolve('examples/views'),
            }
        }, 
    },
}
複製代碼

五、關閉source map

關閉source map有兩個好處

減小打包編譯的時間；
避免在生產環境中用F12開發者工具在Sources中看到源碼。

在vue.config.js文件中配置內容以下：

module.exports = {
    productionSourceMap: false,
}
複製代碼

六、配置css.extract項

是否將組件中的 CSS 提取至一個獨立的 CSS 文件中 (而不是動態注入到 JavaScript 中的 inline 代碼)，

看成爲一個庫構建時，要將其設置爲 false 省得用戶本身導入 CSS。

在vue.config.js文件中配置內容以下：

module.exports = {
    css: {
        extract: false,
    },
}
複製代碼

七、暴露默認導出配置

在vue.config.js文件中配置內容以下：

module.exports = {
    configureWebpack: {
        output: {
            libraryExport: 'default'
        }
    },
}
複製代碼

八、配置devServer項

固定端口

port: 8091,
開啓熱更新

hot: true,
固定打開瀏覽器

open: 'Google Chrome',

在vue.config.js文件中配置內容以下：

module.exports = {
    devServer:{
        port: 8091,
        hot: true,
        open: 'Google Chrome'
    }
}
複製代碼

5、組件開發環境配置

一、組件入口文件

咱們使用插件時候，通常會作兩個步驟

import treeSelect from 'fxft-tree-select';
Vue.use(treeSelect);
複製代碼

那你可知爲何要這麼使用。

Vue.use()

安裝 Vue.js 插件。若是插件是一個對象，必須提供 install 方法。若是插件是一個函數，它會被做爲 install 方法。install 方法調用時，會將 Vue 做爲參數傳入。

該方法須要在調用 new Vue() 以前被調用。

在今天寫的樹下拉選擇器組件是一個對象，因此要提供install的方法，並暴露出來。
install方法

官網這麼介紹：這個方法的第一個參數是 Vue 構造器，第二個參數是一個可選的選項對象。

那麼我在packages文件夾中新建index.js文件中寫入：

import treeSelect from './src/index.vue';
treeSelect.install = function(Vue) {
    Vue.component(treeSelect.name, treeSelect);
};
export default treeSelect;
複製代碼

二、搭建組件調試環境

在packages文件夾新建src文件夾，在src文件夾中新建index.vue文件和js文件夾，js文件夾下新建index.js文件。

在 index.vue文件寫入：

<template>
    <el-select v-model="value">
        <el-option value="1">1</el-option>
        <el-option value="2">2</el-option>
    </el-select>
</template>
<script src="./js/index.js"></script>
複製代碼

在index.js文件寫入：

export default {
    name: 'treeSelect',
    data(){
        return {
            value:'',
        }
    }
}
複製代碼

執行命令npm install element-ui --save

在examples文件夾中main.js文件中寫入：

import 'element-ui/lib/theme-chalk/index.css';
import { Select, Option, Tree } from 'element-ui';
import treeSelect from '@/index';
Vue.use(Select);
Vue.use(Option);
Vue.use(Tree);
Vue.use(treeSelect);
複製代碼

在examples/views文件夾中home.vue文件中寫入：

<template>
    <div style="text-align:center">
        <img alt="Vue logo" src="../assets/logo.png">
        <div>
            <tree-select></tree-select>
        </div>
    </div>
</template>
複製代碼

瀏覽器頁面顯示以下圖片。則說明組件調試環境搭建成功

你們注意到

import treeSelect from '@/index';
Vue.use(treeSelect);
複製代碼

在home.vue中<tree-select></tree-select>這樣使用。

咱們換成這樣引入，也能夠正常顯示

import myTree from '@/index';
Vue.use(myTree);
複製代碼

可是若是咱們換成<my-tree></my-tree>這樣使用，則會報組件未定義的錯誤。

爲何呢。由於<tree-select></tree-select>這樣使用，是根據packages/src/js/index.js文件中的name:'treeSelect'，而不是根據Vue.use(treeSelect),因此咱們在寫組件文檔時候，組件標籤必定要在文檔中體現處理。

組件調試環境搭建完了，開發過程就不詳細介紹了。最後會把git倉庫地址公佈出來，下面介紹一下怎麼用npm發佈。

若是你們須要詳細的開發過程介紹，能夠給我留言，看狀況寫詳細開發流程。

6、npm發佈前準備工做

一、打包編譯命令

在package.json文件中寫入：

"scripts": {
    "dev": "vue-cli-service serve",
    "lib": "vue-cli-service build --target lib --name tree-select --dest lib packages/index.js"
},
複製代碼

--target: 構建目標，默認爲應用模式。這裏修改成 lib 啓用庫模式;
--name: 打包後的文件名;
--dest：輸出目錄，默認 dist。這裏咱們改爲 lib;
[entry]：入口文件，默認爲 src/App.vue。這裏咱們指定編譯 packages/index.js。

執行命令npm run lib後，會發現項目中多了一個文件夾。

lib/tree-select.common.js：一個給打包器用的 CommonJS 包 (不幸的是，webpack 目前還並無支持 ES modules 輸出格式的包)
lib/tree-select.umd.js：一個直接給瀏覽器或 AMD loader 使用的 UMD 包
lib/tree-select.umd.min.js：壓縮後的 UMD 構建版本

二、配置主入口文件

在package.json文件中寫入：

"main": "lib/tree-select.umd.min.js",
複製代碼

三、設置庫爲公開庫

在package.json文件中寫入：

"private": false,
複製代碼

四、配置關鍵詞、描述、做者

在package.json文件中寫入：

"keyword": "tree-select tree select",
"description": "基於element組件中Select 選擇器和Tree 樹形控件擴展出來的樹結構數據下拉選擇器",
"author": "pengyh",
複製代碼

五、檢查組件庫名是否已被使用

將package.json文件中"name": "fxft-tree-select"的fxft-tree-select複製到npm官網上查重。

若是name值有重複須要修改，不然發佈不上去，會提示你是否有權限修改此庫。

六、檢查組件版本是否重複

對照package.json文件中"version": "0.5.0",,0.5.0是否重複版本，若是重複，須要手動更新版本，不然會提示不能在之前發佈的版本上發佈

七、設置忽略文件，減小依賴包大小

項目中只有編譯後的 lib 目錄、package.json、README.md纔是須要被髮布的。咱們須要在.npmignore文件中設置：

examples/
packages/
public/
vue.config.js
babel.config.js
複製代碼

八、編輯使用文檔

在README.md，要寫清楚，怎麼安裝，怎麼引入使用，有哪些參數，哪些方法，哪些事件等，這是很是關鍵的

7、npm發佈

一、登陸到npm

首先須要到 npm 上註冊一個帳號，註冊過程略。

若是配置了淘寶鏡像，先設置回npm鏡像：執行命令npm config set registry http://registry.npmjs.org

執行命令npm login按步驟輸入用戶名、密碼、郵箱，每一個步驟回車進入下一步

二、發佈到npm

執行命令 npm publish，若是成功以下圖

三、怎麼更新同步到cnpm

打開淘寶 NPM 鏡像，將組件名fxft-tree-select輸入進行搜索點擊下圖所示進行同步

8、使用組件

安裝，執行命令npm install fxft-tree-select --save

安裝成功後，在項目中的src文件夾中main.js寫入：

import treeSelect from '@/index';
Vue.use(treeSelect);
複製代碼

在項目這樣<tree-select></tree-select>這樣使用。

9、後記

以上只是講解了，單個組件的組件庫怎麼開發。後續還有多個組件的組件庫怎麼開發，怎麼按需引入及怎麼搭建私有的npm庫。

項目地址：fxft-tree-select