国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue組件庫開發總結

longshengwang / 3452人閱讀

摘要：組件庫開發總結由于工作需要，最近在學習怎么開發一個組件庫。按需打包的使用要使用按需打包，不僅組件庫的打包需要做處理，項目中也需要做處理。

Vue組件庫開發總結

由于工作需要，最近在學習怎么開發一個Vue組件庫。主要需要實現以下點：
1.組件使用npm包引入
2.實現按需引入及按需打包
項目中許多實現是參考的element-ui，特別是webpack打包部分

組織項目 項目生成

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

組件結構

由于我的組件把樣式都寫在了vue里面，所以沒有多帶帶的樣式文件，就是一個Vue文件和一個js入口文件

組件編寫 單個組件編寫

vue組件的編寫需要按照官方的vue插件開發規范來。為了實現后續的按需打包，在每一組件的入口文件中，都需要定義install方法，并隨組件一同暴露出來

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

所有組件的輸出就是將所有組件暴露出去，并加上一個對所有組件的install方法。其中if(window && window.Vue) install(window.Vue)是用來實現script標簽引入的方式的。

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目錄下。
為了實現npm包、script標簽等引入形式，libraryTarget選擇了umd模式。library是npm包引入時的名稱。entry的寫法是我為了用dev在本地測試組件是否可用而寫的。externals是為了去除在組件庫和實際項目中會重復的庫，比如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中需要加入對主入口的說明

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

按需加載的打包主要是參考了element-ui的代碼。需要對每個組件多帶帶打包，以及對所有組件全量打包。其實我沒有明白這里的全量打包和上面說的量加載的全量打包有什么區別。好像是libraryTarget不一樣，element-ui中，全量打包的主入口文件的libraryTarget是commonjs2，而按需打包中的主入口文件的libraryTarget是umd。我這里的libraryTarget是隨便寫的，因為我其實并不需要用到采用script標簽的引入方式。
按需加載的打包是將所有組件多帶帶打包，和全量打包的差別也只是出入口的差別。

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"
}
按需打包的使用

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

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

然后就可以在項目中使用按需引入的方式來使用組件了

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

在發布npm包之前，我們需要先在本地測試這個包是否到達我們預想的效果。這時，我們可以使用npm link把我們需要測試的包link到npm本地的全局。再在本地測試項目中通過npm link 本地測試的包名把我們要測試的本地包引入測試項目中，便可以對我們只做的組件庫npm包進行本地測試了。

npm包發布

首先需要在npm官網注冊賬號。npmjs.com
然后添加用戶npm adduser填入賬號密碼及郵箱。
通過npm publish發布包就行了。如果遇到報錯說沒有權限發布該包，基本上是因為這個包名已被使用。換個其他的名字就行了。而且每次發布包都需要修改版本號，不同發布兩個相同的版本號。

最后

這是本人第一次寫文章，而且本人水平有限，對webpack的打包，其實并不是很了解，所以寫的有些亂，甚至可能有些錯誤，請大家及時指出，感謝。gitHub

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104936.html

相關文章

  • vue 項目總結一文件夾結構配置

    摘要：文件夾結構文件夾里的文件夾設置是靈活的，可以根據自己的習慣進行，不必雷同。對文件夾配置的總結先到此為止，下一篇文章會是對文件夾里具體文件的配置和例子總結，有需要的可以去看看。 之前一段時間都在使用 vue 開發后臺管理系統，在摸索的過程中對 vue 本身和模塊化、規范化開發有了更深的認知，現在記錄下來，希望對其他需要開發項目的人有幫助。 項目配置 首先，在確定好使用的框架和組件庫后，先...

    spacewander 評論0 收藏0

  • vue 項目總結一文件夾結構配置

    摘要：文件夾結構文件夾里的文件夾設置是靈活的，可以根據自己的習慣進行，不必雷同。對文件夾配置的總結先到此為止，下一篇文章會是對文件夾里具體文件的配置和例子總結，有需要的可以去看看。 之前一段時間都在使用 vue 開發后臺管理系統，在摸索的過程中對 vue 本身和模塊化、規范化開發有了更深的認知，現在記錄下來，希望對其他需要開發項目的人有幫助。 項目配置 首先，在確定好使用的框架和組件庫后，先...

    wind5o 評論0 收藏0

  • todo-list 項目問題總結（使用 react 進行開發）

    摘要：項目問題總結這個項目，很簡單，前端使用，后端使用進行開發。方便移動端開發。當動畫結束后，有一個鉤子函數可以使用其他一些功能組件，都是自己嘗試去編寫的，像日歷組件組件組件等。版本的，是沒有任何的鉤子函數，我就感覺懵逼了。。。 todo-list 項目問題總結 這個 todo-list 項目，很簡單，前端使用 react，后端 nodejs 使用 koa2 進行開發。數據庫使用 Mysql...

    shengguo 評論0 收藏0

  • 第三方庫

    摘要：微信支付，支付寶支付，銀聯支付三大支付總結支付寶植入總結支付寶的植基于和百度地圖的組件庫基于百度地圖封裝的組件庫，使用這個庫最好需要先了解和百度地圖。 Commento - 多說 & Disqus 開源替代品 Commento - 多說 & Disqus 開源替代品 anime.js 簡單入門教程 強大輕量的動畫庫 anime.js 入門教程 來自B站的開源的MagicaSakura源...

    seanHai 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<