npm上傳自定義vue組件入門

webpack版本是1.13.1

本身寫的VUE組件，上傳到npm，而後經過npm install xxx -S 安裝到

package.json裏面的 「dependencies」位置

而後在main.js引用，就能夠直接使用咱們的自定義組件了。

import lccomponents from 'lc-components'
Vue.use(lccomponents)

首先：先用vue-cli腳手架搭建一個項目（這樣的好處能夠本地調試組件）
vue init webpack lc-components

以下圖：紅色框是組件源代碼，綠色框是腳手架自動生成的。

在components裏面(也就是紅色框)，命令行執行npm init，建立package.json，
自定義webpack.config.js來最終把組件打包成JS。

以下圖：是package.json設置

爲了節省空間，webpack.config.js就到github上找，最後上傳地址

自定義組件，寫好的組件所有到放到Index.js上面
下圖的.babelrc裏面的配置，是ES6轉換ES5，否則會報錯

本地調試沒問題，就直接npm run build打包（由於咱們引用的是打包後的代碼），webpack.config.js已經配置好了（目前的配置是CSS,JS沒有分開）
打包到dist文件夾。

上傳到npm
先註冊https://www.npmjs.com
在components文件夾（紅色框的package.json目錄下），打開命令行，
執行：
一、npm adduser
二、而後要求輸入用戶名、密碼、註冊時填的郵箱。
三、而後輸入npm publish便可（發佈成功有郵件通知，每次更改package.json的version版本號）

最後引用咱們的組件了
一、npm install lc-components -S 
（lc-components 這個名字，是來自package.json裏面的「name」值）

二、在main.js裏面引入
import lccomponents from 'lc-components'
Vue.use(lccomponents)

三、在要使用的地方，直接使用組件

<lc-round :bgColor="bgColor" :top="topDistance"></lc-round>

傳送門：看不懂的有如下連接參考https://www.uis.cc/2017/10/13/How-to-publish-your-Vue-component-on-NPM/https://blog.csdn.net/u012857153/article/details/73649022https://github.com/Summer-Lin/vue-components（本人的組件模板，模板改進的地方不少，好比JS和CSS分離，我裏面用的是LESS）偷懶的話，能夠把代碼下載下來，而後在components裏面寫上本身的組件，最後引入到index.js就好別忘記npm run build 打包了再上傳。