webpack版本是1.13.1javascript
本身寫的VUE組件,上傳到npm,而後經過npm install xxx -S 安裝到vue
package.json裏面的 「dependencies」位置java
而後在main.js引用,就能夠直接使用咱們的自定義組件了。webpack
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 打包了再上傳。