vue-cli3.0 開発コンポーネントが npm にリリースされました

1. プロジェクト構造を調整する

まずvue-cliでデフォルトのプロジェクトを作成します。

現在のプロジェクトディレクトリは次のとおりです:まず、コンポーネントを格納するディレクトリを
ここに画像の説明を挿入
作成する必要があります。次に、例としてsrc ディレクトリをに変更する必要があります。例のエントリファイルは、src 配下のエントリファイルと同じです。packages
examples

2、設定を変更する

プロジェクトを開始するとき、デフォルトのエントリファイルは src/main.js です。

src ディレクトリを example に変更した後、エントリファイルを再構成する必要があります

ルートディレクトリにvue.config.jsファイルを作成します

コードをコピーする

// vue.config.js

module.exports = {
    
    
  // 将 examples 目录添加为新的页面
  pages: {
    
    
    index: {
    
    
      // page 的入口
      entry: 'examples/main.js',
      // 模板来源
      template: 'public/index.html',
      // 输出文件名
      filename: 'index.html'
    }
  }
}

コードをコピーします。
この手順を完了すると、プロジェクトを通常どおり開始できます。

vue-cli 3.x はライブラリを構築するためのコマンドを提供するため、パッケージディレクトリに webpack を設定する必要はありません

3. 開発コンポーネント

コンポーネントを保存するためにパッケージディレクトリが事前に作成されています

このディレクトリにはコンポーネントごとに個別の開発ディレクトリが保存され、すべてのコンポーネントが Index.js と統合され、外部にエクスポートされます。

各コンポーネントは、そのコンポーネントのソースコードディレクトリ src と外部参照用のindex.js を含む、別のディレクトリの下に分類する必要があります。

ここでは textarea コンポーネントを例として取り上げます。完全なパッケージのディレクトリ構造は次のとおりです。
ここに画像の説明を挿入
textarea/src/main.vueこれはコンポーネントの開発ファイルであり、ここでは特定のコードは示しません。

コンポーネントは、コンポーネントのラベルである名前を宣言する必要があることに注意してください。

textarea/index.js単一のコンポーネントをエクスポートするために使用されます。オンデマンドでインポートする場合は、ここで構成する必要もあります

// packages/textarea/index.js

// 导入组件，组件必须声明 name
import Textarea from './src/main.vue'

// 为组件添加 install 方法，用于按需引入
Textarea.install = function (Vue) {
    
    
    Vue.component(Textarea.name, Textarea)
}

export default Textarea

4. コンポーネントの統合とエクスポート

packages/index.jsファイルを編集してコンポーネントをグローバルに登録します

// packages / index.js

// 导入单个组件
import Textarea from './textarea/index'

// 以数组的结构保存组件，便于遍历
const components = [
    Textarea
]

// 定义 install 方法
const install = function (Vue) {
    
    
    if (install.installed) return
    install.installed = true
    // 遍历并注册全局组件
    components.map(component => {
    
    
        Vue.component(component.name, component)
    })
}

if (typeof window !== 'undefined' && window.Vue) {
    
    
    install(window.Vue)
}

export default {
    
    
    // 导出的对象必须具备一个 install 方法
    install,
    // 组件列表
    ...components
}

コンポーネントはここで開発されました

このコンポーネントは、examples/main.js に導入できます。

import TagTextarea from '../packages/index'
Vue.use(TagTextarea)

その後、開発したばかりの textarea コンポーネントを直接使用できます。

コンポーネントのラベルはコンポーネント内で定義された名前です

現時点では、npm runserve を使用してプロジェクトを開始して、コンポーネントにバグがあるかどうかをテストできます。

// 開始する前に、新しいエントリ example/main.js が vue.config.js に追加されていることを確認する必要があります

5. コンポーネントの梱包

vue-cli 3.x はライブラリファイルのパッケージ化コマンドを提供します

主に 4 つのパラメータが必要です。

target : デフォルトではアプリケーションをビルドします。libビルドライブラリモードを有効にするように変更します。
name : 出力ファイル名
dest : 出力ディレクトリ、デフォルトは dist ですが、ここでは次のように変更します。lib
エントリ: エントリファイルパス。デフォルトは src/App.vue ですが、ここでは次のように変更されます。packages/index.js

これをもとにpackage.jsonのスクリプトにlibコマンドを追加します。

// pageage.json

{
    
    
  "scripts": {
    
    
    "lib": "vue-cli-service build --target lib --name tag-textarea --dest lib packages/index.js"
  }
}

次に、npm run libコマンドを実行してコンポーネントをコンパイルします。

6. 公開の準備をする

まずpackage.jsonコンポーネント情報を追加する必要があります

name : パッケージ名。この名前は既存の名前と競合できません。

version : バージョン番号。過去のバージョン番号と同じにすることはできません。

説明: はじめに;

main : エントリファイル。コンパイルされたパッケージファイルを指す必要があります。

キーワード: スペースで区切られたキーワード。

著者: 著者;

private : プライベートかどうかに関係なく、npm に公開するには false に変更する必要があります。

ライセンス: オープンソース契約。

以下に示すようにここに画像の説明を挿入

次に、.npmignoreファイルを作成し、無視するファイルを設定します

このファイルの構文は .gitignore の構文と同じで、npm に公開するときに無視するディレクトリまたはファイルを設定します。

.DS_Store
node_modules/
examples/
packages/
public/
vue.config.js
babel.config.js
*.map
*.html

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

7. npm に公開する

タオバオミラーを使用するなど、以前にnpmのミラーアドレスを変更したことがある場合は、最初に元に戻してください

npm config set registry http://registry.npmjs.org

npm アカウントをお持ちでない場合は、npm adduserコマンドを使用してアカウントを作成するか、npm 公式 Web サイトに登録できます。

公式ウェブサイトにアカウントを登録している場合、または以前にアカウントを持っていた場合は、npm loginコマンドを使用してログインします

公開する前に、コンポーネントがコンパイルされており、package.json 内のエントリファイル (メイン) のパスが正しいことを確認してください。

すべてが整ったので、コンポーネントを公開します。

npm publish

無事に公開されました^_^

8、テスト、開発、リリースするときのコードは次のとおりです。

最初は最初の 7 つの手順を試すだけで十分です。次は、textarea に基づいて入力コンポーネントを追加します。

代Gitee:
https://gitee.com/ljypgn/vue-cli3-published-to-npm-demo.git

プロジェクト構造:インストール
ここに画像の説明を挿入
による実際の効果は次のとおりです。私はテキストエリアコンポーネントとしてのコンポーネントの表示効果、および以下のLJYとしての入力コンポーネントの表示効果であり、上記のコード構造図のとフォルダーに対応します。npm install ljy-public-component
ここに画像の説明を挿入
textareainput

この記事はhttps://www.cnblogs.com/wisewrong/p/10186611.htmlを引用しています。