国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置： 首頁 - 科技 - 知識百科 - 正文

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

來源：懂視網 責編：小采 時間：2020-11-27 22:27:34
文檔

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

用vue封裝插件并發布到npm的方法步驟:一、基于vue的國家區號列表 vue-flag-list包含了大部分國家的區號，點擊右邊的三角形展開列表可以選擇國家區號，若列表中沒有區號，也可以自己輸入區號。 全球區號列表 1.1 初始化組件 用的是vue-cli來初始化組件，雖然有很多東西不需要，因為對這個比較熟
推薦度：
導讀用vue封裝插件并發布到npm的方法步驟:一、基于vue的國家區號列表 vue-flag-list包含了大部分國家的區號，點擊右邊的三角形展開列表可以選擇國家區號，若列表中沒有區號，也可以自己輸入區號。 全球區號列表 1.1 初始化組件 用的是vue-cli來初始化組件，雖然有很多東西不需要，因為對這個比較熟

一、基于vue的國家區號列表

vue-flag-list包含了大部分國家的區號，點擊右邊的三角形展開列表可以選擇國家區號，若列表中沒有區號，也可以自己輸入區號。

全球區號列表

1.1 初始化組件

用的是vue-cli來初始化組件，雖然有很多東西不需要，因為對這個比較熟悉，所以還是按照這個步驟來。

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

1.2 根據自己的需求，實現具體功能，我的主要功能寫在vue-flag-list.vue組件中。

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

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

<style scoped>
 ...
</style>

功能寫好后，修改package.json等配置文件，為打包發布做準備

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",
 // 因為組件包是公用的，所以private為false
 "private": false,
 // 配置main結點，如果不配置，我們在其他項目中就不用import XX from '包名'來引用了，只能以包名作為起點來指定相對的路徑
 "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"
 },
 // 指定代碼所在的倉庫地址
 "repository": {
 "type": "git",
 "url": "git+https://github.com/linmoer/vue-flag-list.git"
 },
 // 指定打包之后，包中存在的文件夾
 "files": [
 "dist",
 "src"
 ],
 // 指定關鍵字
 "keywords": [
 "vue",
 "flag",
 "code",
 "flag code"
 ],
 "license": "MIT", //開源協議
 // 項目官網的url
 "homepage": "https://github.com/linmoer/vue-flag-list#readme",
 "dependencies": {
 "vue": "^2.3.3"
 },
 "devDependencies": {
 ...
 },
 "engines": {...},
 "browserslist": [...]
}

1.4.2 .gitignore 文件

因為要用dist文件夾，所以在.gitignore文件中把dist/去掉。

1.4.3 webpack.prod.conf.js 文件

為了支持多種使用場景，我們需要選擇合適的打包格式。常見的打包格式有 CMD、AMD、UMD，CMD只能在 Node 環境執行，AMD 只能在瀏覽器端執行，UMD 同時支持兩種執行環境。顯而易見，我們應該選擇 UMD 格式。Webpack 中指定輸出格式的設置項為 output.libraryTarget，其支持的格式有：

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

    • 以下是 webpack.prod.conf.js 中 output 設置的示例：

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

    Vue 是組件庫的外部依賴。組件庫的使用者會自行導入 Vue，打包的時候，不應該將 Vue 打包進組件庫。但是，如果你將打包后的組件庫以 <script> 標簽形式直接引入，你會發現并不能正常執行，提示 vue 未定義。

    以 <script> 標簽形式使用組件時，會同樣使用 <script> 標簽導入 Vue。Vue 導入的變量是 “window.Vue” 而不是 “window.vue”，因此會出現 vue 未定義的錯誤。

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

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

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

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

    修改為

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

    修改入口文件

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

    1.5 整理一下目錄結構，我的目錄結構如下：

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

    二、用npm發布一個包

    在發正式包之前可以在本地先打一個包，然后測試下有沒有問題，如果沒問題再發布到npm上。

    2.1 打包到本地使用

    npm build
npm pack

    npm pack 之后，就會在當前目錄下生成 vue-flag-list-1.0.0.tgz 的文件。

    打開一個新的vue項目，在當前路徑下執行('路徑' 表示文件所在的位置)

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

    在新項目的入口文件（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 發布到npm

    1、在 npm官網 注冊一個npm賬號

    2、切換到需要發包的項目根目錄下，登錄npm賬號，輸入用戶名、密碼、郵箱

    npm login

    3、最后一步，執行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插件的雛形發布出去了，這是一個很簡單的插件，以后會繼續維護它，添加更多的實用功能。

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

    • 聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

    文檔

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

    用vue封裝插件并發布到npm的方法步驟:一、基于vue的國家區號列表 vue-flag-list包含了大部分國家的區號，點擊右邊的三角形展開列表可以選擇國家區號，若列表中沒有區號，也可以自己輸入區號。 全球區號列表 1.1 初始化組件 用的是vue-cli來初始化組件，雖然有很多東西不需要，因為對這個比較熟
    推薦度：
    標簽： 步驟 VUE 插件
    • 熱門焦點

    最新推薦

    猜你喜歡

    熱門推薦

    專題
    Top
    主站蜘蛛池模板： 日本亲与子乱ay中文 | 欧美在线日韩 | 国产欧美精品一区二区三区四区 | 国产麻豆流白浆在线观看 | 国产激情视频在线 | 亚洲视频免费观看 | 日韩精品不卡 | 久久久久国产精品美女毛片 | 久久亚洲私人国产精品 | 香蕉久久夜色精品国产小说 | 久久成人毛片 | 亚洲欧洲日本在线观看 | 久久久国产99久久国产久 | 亚洲 欧美 手机 在线观看 | 欧美一区二区三区在线 | 欧美日韩国产在线播放 | 中文字幕美日韩在线高清 | 亚洲高清在线观看视频 | 亚洲欧美日韩中文字幕一区二区三区 | 韩国理论三级在线观看视频 | 日韩欧美国产中文字幕 | 亚洲自拍另类 | 91精品国产品国语在线不卡 | 国产精品久久新婚兰兰 | 日韩欧美精品一区二区 | 日本aⅴ在线| 国产精品久久久久久久久久久久 | 国产高清不卡一区二区 | 欧美日韩亚洲综合另类ac | 免费一级a毛片在线播 | 精品国产免费人成在线观看 | 不卡一区二区在线观看 | 国产精品福利久久久久久小说 | 亚洲wuma| 国内精品伊人久久久影视 | 欧美色图亚洲自拍 | 午夜看一级特黄a大片黑 | 国产综合一区二区 | 中文国产成人精品久久一 | 免费黄a| 国产美女精品久久久久中文 |