npm 發佈 vue 組件

建立 vue 組件

一、建立vue項目，爲了簡潔方便，推薦使用webpack-simple構建一個項目

vue init webpack-simple your-project

二、在 src 目錄下新建子目錄lib，用來放後面本身寫的全部組件

三、編寫本身的組件

首先新建一個vue文件和一個index.js
vue用於編寫組件的模版和邏輯，像平時封裝插件同樣
ps：須要給組件命名 name: xxx，用於後面的導出
具體以下：
index.js 做用是將該組件做爲 Vue 插件，註冊到 Vue 中

/** index.js **/
import xTable from './x-table.vue';
xTable.install = Vue => Vue.component(xTable.name, xTable);//.name就是開始說的vue文件暴露出來的name名，ldcPagination整個組件
export default xTable

四、最後集中管理，所有導出，可同時編寫多個組件組成組件庫，一塊兒導出
在App.vue同級目錄我新建了一個index.js文件

// 導入全部組件
import xTable from './table/index.js'
import xTableCol from './table-column/index.js'

const components = [xTable, xTableCol, hello]
const install = function(vue) {
  /* istanbul ignore if */
  if (install.installed) return;
  /*eslint-disable*/
  components.map((component) => {
    vue.component(component.name, component); //component.name 此處使用到組件vue文件中的 name 屬性
  });
};
/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
};

export default {
  install,
  xTable,
  xTableCol
}

ps：若是是單個組件也能夠不用編寫第3中的與組件vue文件同級的index.js，直接在這裏import引入，而後導出

五、修改配置文件
打包以前，首先咱們須要改一下 webpack.config.js 這個文件

// ... 此處省略代碼 
// 執行環境
const NODE_ENV = process.env.NODE_ENV

module.exports = {
  // 改變入口
  entry: './src/lib/index.js',
  output: {
    // 修改打包出口，在最外級目錄打包出一個 index.js 文件，咱們 import 默認會指向這個文件
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: "x-vue-element-table.min.js",
    library: "xEleTable", // 指定的就是你使用require時的模塊名
    libraryTarget: 'umd', // libraryTarget會生成不一樣umd的代碼,能夠只是commonjs標準的，也能夠是指amd標準的，也能夠只是經過script標籤引入的
    umdNamedDefine: true // 會對 UMD 的構建過程當中的 AMD 模塊進行命名。不然就使用匿名的 define
  },
  // ... 此處省略代碼 
}

修改 package.json 文件（主要）：

// ... 此處省略代碼 
// 發佈開源所以須要將這個字段改成 false
"private": false,
// 這個指 import xEleTable 的時候它會去檢索的路徑
"main": "dist/vue-element-table.min.js",
// ... 此處省略代碼

還有其餘可配置項（非必須）

"bugs": {
    "url": "https://github.com/xxx/xxx/issues"
},
"repository": {
    "type": "git",
    "url": "git@https://github.com/xxx/xxx.git"
},

五、測試，測試這些配置是否OK以及組件是否可以正常運行
首先經過命令npm run build打包，打包完成後產生dist文件，這個打包以後的文件的文件名是在webpack.config.js

接着執行命令npm pack，會產生一個壓縮包，在與webpack.config.js同一級目錄
而後能夠本地新建一項目測試是否可用
在測試項目中，經過npm install 組件項目打包後的本地絕對路徑／文件全名添加依賴
在main.js入口文件引入便可

import 名稱 from ‘組件庫名’
Vue.use(名稱);

具體可參考

import xEleTable from 'x-vue-element-table'
Vue.use(xEleTable)

而後在項目的任意組件中引用就好了，若是引入成功，則說明打包成功，而後在發佈

發佈到 npm

準備工做OK，如今開始正式發佈

//首先去npm官網註冊一個npm帳號
npm login    // 登錄你的用戶，密碼
npm publish  // 進行發佈

在這個過程當中，可能會出些問題，遇到具體問題可自行百度解決～
若是遇到如下這個錯誤
npm ERR! You do not have permission to publish "nodenpm". Are you logged in as the correct user? : nodenpm
多是本身的組件名與npm中已有的組件名衝突，須要換成另外一個還未被使用過的

另外提供幾個常見錯誤解決方案（來自網絡，有些本身遇到過～）
npm adduser報錯Unable to authenticate？
npm publish項目報錯

具體源碼：x-vue-element-table源碼

參考：
https://blog.csdn.net/qq_4051...
https://juejin.im/post/5b45df...
https://blog.csdn.net/cscscss...
https://blog.suzper.com/2017/...