Vueプラグインのパッケージ化から公開まで詳しく解説

この記事では主に最初の Vue プラグインのパッケージ化から公開までの方法を詳しく紹介しますので、興味のある方はぜひ参考にしてください。

はじめに

これは私がパッケージ化した最初の Vue プラグインです。機能は単純なプラグインですが、手順を記録します。

プラグインのアドレス: https://github.com/leichangchun/vue-area-select 修正へようこそ

準備

Vue 公式 Web サイトのプラグイン部分の紹介は非常に難しいですが、シンプルですが、それでも良いレビューです。このプラグインは比較的シンプルなので、主に次の 2 点を使用します:

1. Vue プラグインには public メソッド install が必要です

2. グローバル メソッド Vue.use( ) プロジェクトの下にクリ

が作成されています

初期化プロジェクト

vue init webpack-simple projectName
cd projectName
cnpm install //安装依赖

以下のように開発コンポーネントディレクトリを作成します

プラグインの入り口index.jsが必要ですプラグインコンポーネントの導入とインストールメソッドの書き方

import vueAreaSelect from './components/vue-area-select' //引入组件
const areaSelect = {
 install (Vue, options) {
 Vue.component(vueAreaSelect.name, vueAreaSelect) //全局组件
 }
}

export default areaSelect //导出

vue-area-select.vue プラグインの具体的な実装部分なので詳しくは紹介しませんが、詳しくはソースコードをご覧ください。 。

デバッグ時の参照方法はindex.jsファイルを導入することです

//引入
import areaSelect from './index.js'

Vue.use(areaSelect)


//.vue中 使用

<vue-area-select></vue-area-select>

デバッグが完了したらnpmでビルドして公開する必要があります。ビルドするときは、まず webpack.config.js の構成を変更し、次に npm run build the package file

 // entry: './src/main.js', //npm run dev时 demo调试的入口
 entry: './src/index.js', //打包时 插件入口
 output: {
 path: path.resolve(__dirname, './dist'),
 publicPath: '/dist/',
 // filename: 'build.js'
 filename: 'vue-area-select-lei.js', //打包生成文件的名字
 library:'AreaSelect', //reqire引入的名字
 libraryTarget:'umd',
 umdNamedDefine:true
 }

この時点で、プラグインの開発部分は完了です。次に、npm 経由で公開する必要があります。

NPMリリース

最初にpackage.jsonを設定し、以下の項目を追加する必要があります

 "private": false,
 "main": "dist/vue-area-select-lei.js", //import引入时默认寻找的文件
 "repository": { //仓库地址
 "type": "git",
 "url": "https://github.com/leichangchun/vue-area-select"
 },

次に、npmログインログインアカウントnpmパブリッシュパブリッシュプラグイン

プラグインを使用する効果

npm install vue-area-select-lei --save //安装
//插件的方式引入使用
import areaSelect from 'vue-area-select-lei'
Vue.use(areaSelect)

は次のとおりです:

関連する推奨事項:

vue プラグインのサンプルの作成方法共有

vue プラグインの作成方法 vue.js サンプル チュートリアル

チュートリアルVue で入力コンポーネントをカプセル化する方法について

以上がVueプラグインのパッケージ化から公開まで詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。