npm上傳自定義vue組件入門

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 打包了再上傳。
相關文章
相關標籤/搜索