欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

用vue封裝插件并發(fā)布到npm的方法步驟

 更新時(shí)間：2017年10月18日 10:02:15   作者：rithe  
本篇文章主要介紹了用vue封裝插件并發(fā)布到npm的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

一、基于vue的國(guó)家區(qū)號(hào)列表

vue-flag-list包含了大部分國(guó)家的區(qū)號(hào)，點(diǎn)擊右邊的三角形展開(kāi)列表可以選擇國(guó)家區(qū)號(hào)，若列表中沒(méi)有區(qū)號(hào)，也可以自己輸入?yún)^(qū)號(hào)。

全球區(qū)號(hào)列表

1.1 初始化組件

用的是vue-cli來(lái)初始化組件，雖然有很多東西不需要，因?yàn)閷?duì)這個(gè)比較熟悉，所以還是按照這個(gè)步驟來(lái)。

vue init webpack vue-flag-list
cd vue-flag-list
cnpm install 
npm run dev

1.2 根據(jù)自己的需求，實(shí)現(xiàn)具體功能，我的主要功能寫(xiě)在vue-flag-list.vue組件中。

<template>
 <div id="flag">
 ...
 </div>
</template>

<script>
 export default {
  name: 'vue-flag-list',
  ...
 }
</script>

<style scoped>
 ...
</style>

功能寫(xiě)好后，修改package.json等配置文件，為打包發(fā)布做準(zhǔn)備

1.3 添加index.js

import flagComponent from './Vue-Flag-List.vue'

const VueFlagList = {
 install: function (Vue) {
 if (typeof window !== 'undefined' && window.Vue) {
  Vue = window.Vue
 }
 Vue.component('VueFlagList', flagComponent)
 }
}

export default VueFlagList

1.4 修改配置文件

1.4.1 package.json

{
 "name": "vue-flag-list",
 "version": "1.0.0",
 "description": "A vue plugin for entering and selecting area code",
 "author": "guimin",
 // 因?yàn)榻M件包是公用的，所以private為false
 "private": false,
 // 配置main結(jié)點(diǎn)，如果不配置，我們?cè)谄渌?xiàng)目中就不用import XX from '包名'來(lái)引用了，只能以包名作為起點(diǎn)來(lái)指定相對(duì)的路徑
 "main": "dist/vue-flag-list.min.js", 
 "scripts": {
 "dev": "node build/dev-server.js",
 "start": "node build/dev-server.js",
 "build": "node build/build.js"
 },
 // 指定代碼所在的倉(cāng)庫(kù)地址
 "repository": {
 "type": "git",
 "url": "git+https://github.com/linmoer/vue-flag-list.git"
 },
 // 指定打包之后，包中存在的文件夾
 "files": [
 "dist",
 "src"
 ],
 // 指定關(guān)鍵字
 "keywords": [
 "vue",
 "flag",
 "code",
 "flag code"
 ],
 "license": "MIT", //開(kāi)源協(xié)議
 // 項(xiàng)目官網(wǎng)的url
 "homepage": "https://github.com/linmoer/vue-flag-list#readme",
 "dependencies": {
 "vue": "^2.3.3"
 },
 "devDependencies": {
 ...
 },
 "engines": {...},
 "browserslist": [...]
}

1.4.2 .gitignore 文件

因?yàn)橐胐ist文件夾，所以在.gitignore文件中把dist/去掉。

1.4.3 webpack.prod.conf.js 文件

為了支持多種使用場(chǎng)景，我們需要選擇合適的打包格式。常見(jiàn)的打包格式有 CMD、AMD、UMD，CMD只能在 Node 環(huán)境執(zhí)行，AMD 只能在瀏覽器端執(zhí)行，UMD 同時(shí)支持兩種執(zhí)行環(huán)境。顯而易見(jiàn)，我們應(yīng)該選擇 UMD 格式。Webpack 中指定輸出格式的設(shè)置項(xiàng)為 output.libraryTarget，其支持的格式有：

  • “var” - 以一個(gè)變量形式輸出： var Library = xxx (default)；
  • “this” - 以 this 的一個(gè)屬性輸出： this[“Library”] = xxx；
  • “commonjs” - 以 exports 的一個(gè)屬性輸出：exports[“Library”] = xxx；
  • “commonjs2” - 以 module.exports 形式輸出：module.exports = xxx；
  • “amd” - 以 AMD 格式輸出；
  • “umd” - 同時(shí)以 AMD、CommonJS2 和全局屬性形式輸出。

以下是 webpack.prod.conf.js 中 output 設(shè)置的示例：

 output: {
 path: path.resolve(__dirname, '../dist'),
 publicPath: '',
 filename: 'vue-flag-list.min.js',
 library: 'VueFlagList',
 libraryTarget: 'umd',
 umdNamedDefine: true
 },

Vue 是組件庫(kù)的外部依賴。組件庫(kù)的使用者會(huì)自行導(dǎo)入 Vue，打包的時(shí)候，不應(yīng)該將 Vue 打包進(jìn)組件庫(kù)。但是，如果你將打包后的組件庫(kù)以 <script> 標(biāo)簽形式直接引入，你會(huì)發(fā)現(xiàn)并不能正常執(zhí)行，提示 vue 未定義。

以 <script> 標(biāo)簽形式使用組件時(shí)，會(huì)同樣使用 <script> 標(biāo)簽導(dǎo)入 Vue。Vue 導(dǎo)入的變量是 “window.Vue” 而不是 “window.vue”，因此會(huì)出現(xiàn) vue 未定義的錯(cuò)誤。

所以，我們需要在 webpack.prod.conf.js 中配置 externals，如下：

externals: {
 vue: {
  root: 'Vue',
  commonjs: 'vue',
  commonjs2: 'vue',
  amd: 'vue'
 }
 },

另外，為了將css打包成一個(gè)文件，所以需要將 webpack.prod.conf.js 中的plugins 選項(xiàng)的

new ExtractTextPlugin({
  filename: utils.assetsPath('css/[name].[contenthash].css')
 }),

修改為

new ExtractTextPlugin({
  filename: 'vue-flag-list.min.css'
 }),

修改入口文件

entry: {
 app: './src/index.js'
 },

1.5 整理一下目錄結(jié)構(gòu)，我的目錄結(jié)構(gòu)如下：

- vue-flag-list
 + build
 + dist
 - src
 + img
 index.js
 Vue-Flag-List.vue
 ...

二、用npm發(fā)布一個(gè)包

在發(fā)正式包之前可以在本地先打一個(gè)包，然后測(cè)試下有沒(méi)有問(wèn)題，如果沒(méi)問(wèn)題再發(fā)布到npm上。

2.1 打包到本地使用

npm build
npm pack

npm pack 之后，就會(huì)在當(dāng)前目錄下生成 vue-flag-list-1.0.0.tgz 的文件。

打開(kāi)一個(gè)新的vue項(xiàng)目，在當(dāng)前路徑下執(zhí)行('路徑' 表示文件所在的位置)

cnpm install 路徑/vue-flag-list-1.0.0.tgz

在新項(xiàng)目的入口文件（main.js）中引入

import VueFlagList from 'vue-flag-list'
import 'vue-flag-list/dist/vue-flag-list.min.css'

Vue.use(VueFlagList)

在組件中使用

<flagCode height="30" width="120" @getCode="getCode"></flagCode>

methos: {
 getCode(code) {
  console.log(code)
 }
}

2.2 發(fā)布到npm

1、在 npm官網(wǎng) 注冊(cè)一個(gè)npm賬號(hào)

2、切換到需要發(fā)包的項(xiàng)目根目錄下，登錄npm賬號(hào)，輸入用戶名、密碼、郵箱

npm login

3、最后一步，執(zhí)行npm publish即可

# lin@lin-Pro in ~/www/vue-flag-list on git:master $ npm publish
# lin@lin-Pro in ~/www/vue-flag-list on git:master $ + vue-flag-list@1.0.0

三、后記

折騰了很久，終于把vue-flag-list插件的雛形發(fā)布出去了，這是一個(gè)很簡(jiǎn)單的插件，以后會(huì)繼續(xù)維護(hù)它，添加更多的實(shí)用功能。

  • npm unpublish --force：移除一個(gè)發(fā)布包（也可以移除指定版本的包）
  • npm logout：登出用戶

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • vue.js中關(guān)于點(diǎn)擊事件方法的使用(click)

    vue.js中關(guān)于點(diǎn)擊事件方法的使用(click)

    這篇文章主要介紹了vue.js中關(guān)于點(diǎn)擊事件方法的使用(click)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-08-08
  • vue使用自定義icon圖標(biāo)的方法

    vue使用自定義icon圖標(biāo)的方法

    這篇文章主要介紹了vue使用自定義的icon圖標(biāo)的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2018-05-05
  • 詳解Vue2.0 事件派發(fā)與接收

    詳解Vue2.0 事件派發(fā)與接收

    這篇文章主要介紹了詳解Vue2.0 事件派發(fā)與接收,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-09-09
  • Vue完整項(xiàng)目構(gòu)建(進(jìn)階篇)

    Vue完整項(xiàng)目構(gòu)建(進(jìn)階篇)

    這篇文章主要介紹了Vue完整項(xiàng)目構(gòu)建(進(jìn)階篇)的相關(guān)資料,需要的朋友可以參考下
    2018-02-02
  • 淺析VUE防抖與節(jié)流

    淺析VUE防抖與節(jié)流

    這篇文章主要介紹了淺析VUE防抖與節(jié)流的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下
    2020-11-11
  • 在Vue中實(shí)現(xiàn)隨hash改變響應(yīng)菜單高亮

    在Vue中實(shí)現(xiàn)隨hash改變響應(yīng)菜單高亮

    這篇文章主要介紹了在Vue中實(shí)現(xiàn)隨hash改變響應(yīng)菜單高亮的方法，文中還通過(guò)實(shí)例代碼給大家介紹了vue關(guān)于點(diǎn)擊菜單高亮與組件切換的相關(guān)知識(shí),需要的朋友可以參考下
    2020-03-03
  • 詳解vue-cli 構(gòu)建Vue項(xiàng)目遇到的坑

    詳解vue-cli 構(gòu)建Vue項(xiàng)目遇到的坑

    本篇文章主要介紹了詳解vue-cli 構(gòu)建Vue項(xiàng)目遇到的坑，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-08-08
  • 在vue項(xiàng)目中引入高德地圖及其UI組件的方法

    在vue項(xiàng)目中引入高德地圖及其UI組件的方法

    今天小編就為大家分享一篇在vue項(xiàng)目中引入高德地圖及其UI組件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • apache和nginx下vue頁(yè)面刷新404的解決方案

    apache和nginx下vue頁(yè)面刷新404的解決方案

    這篇文章主要介紹了apache和nginx下vue頁(yè)面刷新404的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-12-12
  • Vue?實(shí)現(xiàn)新國(guó)標(biāo)紅綠燈效果實(shí)例詳解

    Vue?實(shí)現(xiàn)新國(guó)標(biāo)紅綠燈效果實(shí)例詳解

    這篇文章主要為大家介紹了Vue?實(shí)現(xiàn)新國(guó)標(biāo)紅綠燈效果實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-08-08

最新評(píng)論