vue-cli4.0 基於 antd-design-vue 二次封裝發佈到 npm 倉庫

1. 安裝 cli

npm install -g @vue/cli

vue create winyh-ui

　　

2.安裝 antd-design-vue

cnpm i ant-design-vue --save

　　

3.配置按需加載

cnpm i babel-plugin-import --save-dev

修改根目錄的 babel.config.js， 配置 babel-plugin-import
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      "import",
      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
    ]
  ]
}

　　　　

4.配置less

運行報錯：

Module not found: Error: Can't resolve 'less-loader'

解決辦法：

cnpm i less less-loader --save-dev

根目錄建立 vue.config.js 文件，配置以下
module.exports = {
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true
            }
        }
    }
}
 

　　

5.項目中引用

src/main.js 文件中
  import Vue from 'vue'
  import { Button, Select } from 'ant-design-vue';
  import App from './App'

  Vue.component(Button.name, Button)
  Vue.component(Select.name, Select)

/* 或寫爲
 * Vue.use(Button)
 * Vue.use(Select)
 */

  Vue.config.productionTip = false

  new Vue({
    render: h => h(App)
  }).$mount("#app");


組件中就可使用：
<a-button type="primary">winyh</a-button>

　　

6.啓動項目

npm run serve

　　

預覽效果

 

7.封裝組件

新建 packages 目錄，packages 目錄下新建 index.js 文件對外集中拋出配置。

每一個組件在 packages 目錄下以 單個目錄的形式存在，例如 row 組件結構。

row/src/main.vue 組件封裝 (組件封裝中必須設置 name 選項，爲組件的對外惟一標籤)

row/index.js 對外拋出當前封裝的組件

// button/src/main.vue

<template>
    <div>
        <a-button>winyh<a-button>
    </div>
</template>

<script>
export default {
    name:"PButton",
}
</script>

<style lang="less">
    
</style>

　　

// row/index.js

import PButton from './src/main.vue'

// 爲組件提供 install 方法
PButton.install = function (Vue) {
    Vue.component(PButton.name, Row)
}

// 導出組件
export default PButton

　　

// packages/index.js

import PRow from './row'

// 組件集合，用於遍歷
const components = [
    PRow
]

// 定義 install 方法
const install = function (Vue) {
    if (install.installed) return
    // 遍歷註冊全局組件
    components.map(component => 
        Vue.component(component.name, component)
    )
}

// 判斷是不是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}

export default {
    install,// 導出的對象必須具有一個 install 方法
    ...components, // 組件列表    
}

　　組件封裝完畢

8.使用

import Vue from 'vue'
import { Button } from 'ant-design-vue'
import App from './App.vue'

// 導入組件庫
import PButton from '../packages'
// 使用組件庫
Vue.use(PButton)

[Button].forEach(item => 
  Vue.use(item)
);

/*
* 也能夠這樣使用
* Vue.component(Button.name, Button)
* Vue.component(Select.name, Select)
*/

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

　　

在上一步用使用 Vue.use() 全局註冊後，便可在任意頁面直接使用了，而不需另外引入

<template>
  <div id="app">
    <PButton>winyh</PButton>
  </div>
</template>

<script>
export default {
  name: 'app',
}
</script>

<style>
</style>

　　

9.打包

vue-cli 庫打包命令 官方介紹

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

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

　　

配置package.json

• name: 包名，該名字是惟一的。可在 npm 官網搜索名字，若是存在則需換個名字。
• version: 版本號，每次發佈至 npm 須要修改版本號，不能和歷史版本號相同。
• description: 描述。
• main: "lib/vplgui.common.js", 入口文件，應指向編譯後的包文件(路徑要和上面構建出來的目錄和文件名對應上,若是不配置，咱們在其餘項目中就不用import XX from '包名'來引用了)
• keyword：關鍵字，以空格分離但願用戶最終搜索的詞。（"keywords": [ "vue", "maucash", "code", "maucash code" ]）
• author：做者
• files : 指定打包後包中存在的文件夾 （"files": [ "dist", "src" ]）
• private：是否私有，須要修改成 false 才能發佈到 npm
• homepage : "https://github.com/winyh/XXX", 項目主頁
• repository: 指定代碼所在的倉庫地址"repository": { "type": "git", "url": "git@github.com:winyh/vplgui.git" }
• license： 開源 

添加 .npmignore

// 語法跟 .gitignore 同樣

.DS_Store
node_modules/
packages/
public/
vue.config.js
babel.config.js

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

# Editor directories and files
.idea
.vscode

　　

添加 lib 腳本

{
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
  + "lib": "vue-cli-service build --target lib --name vplgui --dest lib packages/index.js"
  },    
}

• --target: 構建目標，默認爲應用模式。這裏修改成 lib 啓用庫模式。
• --dest : 輸出目錄，默認 dist。這裏咱們改爲 lib。
• [entry]: 最後一個參數爲入口文件，默認爲 src/App.vue。這裏咱們指定編譯 packages/ 組件庫目錄。
• --name ：組件庫名稱。

執行 npm run lib 打包編譯。（會生成 lib 文件夾）

 

10.發佈　　

npm login

npm adduser

npm publish

　　

注意事項：每次發佈時都須要遞進更新版本號！