亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

Vue組件庫(kù)開(kāi)發(fā)總結(jié)

longshengwang / 3526人閱讀

摘要：組件庫(kù)開(kāi)發(fā)總結(jié)由于工作需要，最近在學(xué)習(xí)怎么開(kāi)發(fā)一個(gè)組件庫(kù)。按需打包的使用要使用按需打包，不僅組件庫(kù)的打包需要做處理，項(xiàng)目中也需要做處理。

Vue組件庫(kù)開(kāi)發(fā)總結(jié)

由于工作需要，最近在學(xué)習(xí)怎么開(kāi)發(fā)一個(gè)Vue組件庫(kù)。主要需要實(shí)現(xiàn)以下點(diǎn)：
1.組件使用npm包引入
2.實(shí)現(xiàn)按需引入及按需打包
項(xiàng)目中許多實(shí)現(xiàn)是參考的element-ui，特別是webpack打包部分

組織項(xiàng)目 項(xiàng)目生成

項(xiàng)目生成是直接用的vue-cli，在根目錄下增加了一個(gè)index.js，用于組件打包的入口文件,兩個(gè)webpack打包文件，以及一個(gè)組件的json文件，用于之后的按需引入的打包。組件放置在src/cmps中，目錄結(jié)構(gòu)如下圖：

組件結(jié)構(gòu)

由于我的組件把樣式都寫(xiě)在了vue里面，所以沒(méi)有多帶帶的樣式文件，就是一個(gè)Vue文件和一個(gè)js入口文件

組件編寫(xiě) 單個(gè)組件編寫(xiě)

vue組件的編寫(xiě)需要按照官方的vue插件開(kāi)發(fā)規(guī)范來(lái)。為了實(shí)現(xiàn)后續(xù)的按需打包，在每一組件的入口文件中，都需要定義install方法，并隨組件一同暴露出來(lái)

import Button from "./index.vue"
Button.intall = function (vue) {
  vue.component(Button.name, Button)
}
export default Button
所有組件輸出編寫(xiě)

所有組件的輸出就是將所有組件暴露出去，并加上一個(gè)對(duì)所有組件的install方法。其中if(window && window.Vue) install(window.Vue)是用來(lái)實(shí)現(xiàn)script標(biāo)簽引入的方式的。

import Input from "src/cmps/input/index.js"
import Toast from "src/cmps/toast/index.js"
import Button from "src/cmps/button/index.js"

const cmps = [
  Input,
  Toast,
  Button
]

const install = vue => {
  cmps.map(cmp => {
    vue.component(cmp.name, cmp)
  })
}
if(window && window.Vue) install(window.Vue)

export default {
  install,
  Input,
  Toast,
  Button
}
組件打包 全量加載的打包

全量加載的打包首先是把vue-cli生成的webpack文件改一下打包的出入口文件和路徑就行了。為了方便之后的按需加載的打包，出口文件我的路徑放在了lib目錄下。
為了實(shí)現(xiàn)npm包、script標(biāo)簽等引入形式，libraryTarget選擇了umd模式。library是npm包引入時(shí)的名稱(chēng)。entry的寫(xiě)法是我為了用dev在本地測(cè)試組件是否可用而寫(xiě)的。externals是為了去除在組件庫(kù)和實(shí)際項(xiàng)目中會(huì)重復(fù)的庫(kù)，比如vue

entry: ENV == "dev"? path.resolve(__dirname, "./src/main.js"): path.resolve(__dirname, "./index.js"),
output: {
  path: path.resolve(__dirname, "./lib"),
  publicPath: "/dist/",
  filename: "input-ui.js",
  library: "input-ui",
  libraryExport: "default",
  libraryTarget: "umd"
},
externals: {
  vue: "vue"
}

package.json中需要加入對(duì)主入口的說(shuō)明

"main": "lib/input-ui.js"
按需加載的打包

按需加載的打包主要是參考了element-ui的代碼。需要對(duì)每個(gè)組件多帶帶打包，以及對(duì)所有組件全量打包。其實(shí)我沒(méi)有明白這里的全量打包和上面說(shuō)的量加載的全量打包有什么區(qū)別。好像是libraryTarget不一樣，element-ui中，全量打包的主入口文件的libraryTarget是commonjs2，而按需打包中的主入口文件的libraryTarget是umd。我這里的libraryTarget是隨便寫(xiě)的，因?yàn)槲移鋵?shí)并不需要用到采用script標(biāo)簽的引入方式。
按需加載的打包是將所有組件多帶帶打包，和全量打包的差別也只是出入口的差別。

const entry = require("./comps.json")
module.exports = {
  entry ,
  output: {
    path: path.resolve(__dirname, "./lib"),
    publicPath: "/dist/",
    filename: "[name].js",
    chunkFilename: "[id].js",
    libraryTarget: "commonjs2"
  },

comps.json

{
  "input": "./src/cmps/input",
  "toast": "./src/cmps/toast",
  "button": "./src/cmps/button"
}
按需打包的使用

要使用按需打包，不僅組件庫(kù)的打包需要做處理，項(xiàng)目中也需要做處理。通過(guò)上面的方式打包的組件庫(kù)，在項(xiàng)目中可以使用babel-plugin-component來(lái)實(shí)現(xiàn)按需打包。
在.babelrc中加入這個(gè)組件。libraryName是需要按需打包的庫(kù)名。由于我的簡(jiǎn)陋的組件中，沒(méi)有引用多帶帶的樣式，所以style設(shè)成了false，不然在引用組件時(shí)，還需要獲取一個(gè)樣式文件。之前提到為了方便按需打包，所以打包后的目錄是lib，這是由于babel-plugin-component默認(rèn)的庫(kù)的目錄就是lib，如果需要修改目錄只需要加入"libDir": "lib"具體的babel-plugin-component的使用可以官方的readme。

"plugins": [["component", {
  "libraryName": "input-ui",
  "style": false
}]]

然后就可以在項(xiàng)目中使用按需引入的方式來(lái)使用組件了

import {Input, Button} from "input-ui"
Vue.component(Input.name, Input)
Vue.component(Button.name, Button)
npm包本地測(cè)試

在發(fā)布npm包之前，我們需要先在本地測(cè)試這個(gè)包是否到達(dá)我們預(yù)想的效果。這時(shí)，我們可以使用npm link把我們需要測(cè)試的包link到npm本地的全局。再在本地測(cè)試項(xiàng)目中通過(guò)npm link 本地測(cè)試的包名把我們要測(cè)試的本地包引入測(cè)試項(xiàng)目中，便可以對(duì)我們只做的組件庫(kù)npm包進(jìn)行本地測(cè)試了。

npm包發(fā)布

首先需要在npm官網(wǎng)注冊(cè)賬號(hào)。npmjs.com
然后添加用戶(hù)npm adduser填入賬號(hào)密碼及郵箱。
通過(guò)npm publish發(fā)布包就行了。如果遇到報(bào)錯(cuò)說(shuō)沒(méi)有權(quán)限發(fā)布該包，基本上是因?yàn)檫@個(gè)包名已被使用。換個(gè)其他的名字就行了。而且每次發(fā)布包都需要修改版本號(hào)，不同發(fā)布兩個(gè)相同的版本號(hào)。

最后

這是本人第一次寫(xiě)文章，而且本人水平有限，對(duì)webpack的打包，其實(shí)并不是很了解，所以寫(xiě)的有些亂，甚至可能有些錯(cuò)誤，請(qǐng)大家及時(shí)指出，感謝。gitHub

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/104936.html

相關(guān)文章

  • vue 項(xiàng)目總結(jié)一文件夾結(jié)構(gòu)配置

    摘要：文件夾結(jié)構(gòu)文件夾里的文件夾設(shè)置是靈活的，可以根據(jù)自己的習(xí)慣進(jìn)行，不必雷同。對(duì)文件夾配置的總結(jié)先到此為止，下一篇文章會(huì)是對(duì)文件夾里具體文件的配置和例子總結(jié)，有需要的可以去看看。 之前一段時(shí)間都在使用 vue 開(kāi)發(fā)后臺(tái)管理系統(tǒng)，在摸索的過(guò)程中對(duì) vue 本身和模塊化、規(guī)范化開(kāi)發(fā)有了更深的認(rèn)知，現(xiàn)在記錄下來(lái)，希望對(duì)其他需要開(kāi)發(fā)項(xiàng)目的人有幫助。 項(xiàng)目配置 首先，在確定好使用的框架和組件庫(kù)后，先...

    spacewander 評(píng)論0 收藏0

  • vue 項(xiàng)目總結(jié)一文件夾結(jié)構(gòu)配置

    摘要：文件夾結(jié)構(gòu)文件夾里的文件夾設(shè)置是靈活的，可以根據(jù)自己的習(xí)慣進(jìn)行，不必雷同。對(duì)文件夾配置的總結(jié)先到此為止，下一篇文章會(huì)是對(duì)文件夾里具體文件的配置和例子總結(jié)，有需要的可以去看看。 之前一段時(shí)間都在使用 vue 開(kāi)發(fā)后臺(tái)管理系統(tǒng)，在摸索的過(guò)程中對(duì) vue 本身和模塊化、規(guī)范化開(kāi)發(fā)有了更深的認(rèn)知，現(xiàn)在記錄下來(lái)，希望對(duì)其他需要開(kāi)發(fā)項(xiàng)目的人有幫助。 項(xiàng)目配置 首先，在確定好使用的框架和組件庫(kù)后，先...

    wind5o 評(píng)論0 收藏0

  • todo-list 項(xiàng)目問(wèn)題總結(jié)（使用 react 進(jìn)行開(kāi)發(fā)）

    摘要：項(xiàng)目問(wèn)題總結(jié)這個(gè)項(xiàng)目，很簡(jiǎn)單，前端使用，后端使用進(jìn)行開(kāi)發(fā)。方便移動(dòng)端開(kāi)發(fā)。當(dāng)動(dòng)畫(huà)結(jié)束后，有一個(gè)鉤子函數(shù)可以使用其他一些功能組件，都是自己嘗試去編寫(xiě)的，像日歷組件組件組件等。版本的，是沒(méi)有任何的鉤子函數(shù)，我就感覺(jué)懵逼了。。。 todo-list 項(xiàng)目問(wèn)題總結(jié) 這個(gè) todo-list 項(xiàng)目，很簡(jiǎn)單，前端使用 react，后端 nodejs 使用 koa2 進(jìn)行開(kāi)發(fā)。數(shù)據(jù)庫(kù)使用 Mysql...

    shengguo 評(píng)論0 收藏0

  • 第三方庫(kù)

    摘要：微信支付，支付寶支付，銀聯(lián)支付三大支付總結(jié)支付寶植入總結(jié)支付寶的植基于和百度地圖的組件庫(kù)基于百度地圖封裝的組件庫(kù)，使用這個(gè)庫(kù)最好需要先了解和百度地圖。 Commento - 多說(shuō) & Disqus 開(kāi)源替代品 Commento - 多說(shuō) & Disqus 開(kāi)源替代品 anime.js 簡(jiǎn)單入門(mén)教程 強(qiáng)大輕量的動(dòng)畫(huà)庫(kù) anime.js 入門(mén)教程 來(lái)自B站的開(kāi)源的MagicaSakura源...

    seanHai 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<