vue 組件開發到發布到npm全流程

一：搭建vue項目

　　封裝vue的插件用webpack-simple比較合適，vue init webpack-simple <project-name>

二：創建組件

　　在src 目錄下創建lib 文件夾 用於存放不同的組件，且在為每個組件創建一個文件夾，在該文件夾目錄下存放要發布的組件和index.js 用於將組件導出

   

 

    注：vue-tool.vue 內容是傳統的vue代碼

<template>
    <h1>標題組件</h1>
</template>

<script>
export default {
    name: "VueTool"
}
</script>

<style scoped>

</style>

　　test文件下的index.js 是為了將組件導出

//  VueTool 是對應組件的名字，要記得在 vue-tool.vue 文件中還是 name 屬性哦
import VueTool from './vue-tool.vue';
VueTool.install = Vue => Vue.component(VueTool.name, VueTool);
export default VueTool;

　　如有其它多個組件 則重復上面的步驟 如上面的huiming 文件夾

三 導出全部組件

       在src目錄下創建index.js 作為程序的入口文件，在index.js 將所有的組件全部導出   代碼如下

import VueTool from './lib/test/index';
import HmTest from './lib/huiming/index'

// ...如果還有的話繼續添加

const components = [
  VueTool,
  HmTest
  // ...如果還有的話繼續添加
]

const install = function (Vue, opts = {}) {
  components.map(component => {
    Vue.component(component.name, component);
  })
}

/* 支持使用標簽的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  VueTool,
  HmTest
  // ...如果還有的話繼續添加
}

　四：修改配置文件 webpack.config.js  重點修改內容為紅框中內容

  

五 修改package.json

六：測試組件

在發正式包之前可以在本地先打一個包，然后測試下有沒有問題，如果沒問題再發布到npm上。
首先，打包到本地
npm run build
npm pack
npm pack 之后，就會在當前目錄下生成 一個tgz 的文件。
打開一個新的vue項目，在當前路徑下執行(‘路徑’ 表示文件所在的位置)
npm install 路徑/組件名稱.tgz
然后，在新項目的入口文件（main.js）中引入

import 變量名 from '組件名稱'

Vue.use(變量名)
七：發布

     在前面測試組件可以正常使用后 就可進行發布了

    准備條件：在npm上注冊好賬號，並且郵箱通過驗證

    有了賬號以后 就可以進行發布了

     1.npm login 輸入賬號，密碼，郵箱

     2.npm publish  回車就可以了

八：下載 使用  這就可以正常使用了

九：注，npm常用操作

npm config set registry https://registry.npm.taobao.org //設置淘寶鏡像

npm config set registry http://registry.npmjs.org //設置官方鏡像

npm config get registry //獲取鏡像地址

npm --force unpublish safe_manage_view //刪除npm包

npm login //npm 登錄

npm publish //npm 發布包

npm install --save hzm-npm-test //安裝包

npm pack //打包