まず、vue-cliを使用してデフォルトのプロジェクトを作成します。
現在のプロジェクトディレクトリは次のようになります。
まず、コンポーネントを格納するためのpackagesディレクトリを作成して
から、例としてsrcディレクトリをexamplesに変更する必要があります。
2.構成を変更し
てプロジェクトを開始する場合、デフォルトのエントリファイルはsrc / main.jsです。src
ディレクトリをexamplesに変更した後、エントリファイル
を再構成して、ルートディレクトリにvue.config.js ファイルを作成する 必要があります。
// vue.config.js
module.exports = {
// 将 examples 目录添加为新的页面
pages: {
index: {
// page 的入口
entry: 'examples/main.js',
// 模板来源
template: 'public/index.html',
// 输出文件名
filename: 'index.html'
}
}
}この手順を完了すると、プロジェクトを通常どおりに開始できます。vue-cli3.xには、ライブラリ
をビルドするためのコマンドが用意されているため、packagesディレクトリ用にwebpackを構成する必要はありません。
3.コンポーネントを開発
する前に、コンポーネントを格納するためのパッケージディレクトリが作成されています。コンポーネント
ごとに個別の開発ディレクトリがこのディレクトリに格納され、すべてのコンポーネントがindex.jsと統合され、
各コンポーネントは個別のエクスポートとして分類される必要があります。このディレクトリには、コンポーネントのソースコードディレクトリsrcと、外部参照を容易にするindex.jsが
含まれています。例としてtextareaコンポーネントを示します。完全なパッケージディレクトリ構造は次のとおりです。これ
textarea/src/main.vueはコンポーネントの開発ファイルであり、特定のコードはここには示されていません。
コンポーネントに注意してください。名前を宣言する必要があります。この名前はコンポーネントのラベルです。textarea/index.js単一のコンポーネントをエクスポートするために使用されます。オンデマンドでインポートする場合は、ここで構成する必要もあります。
// packages/textarea/index.js
// 导入组件，组件必须声明 name
import Textarea from './main.vue'
// 为组件添加 install 方法，用于按需引入
Textarea.install = function (Vue) {
Vue.component(Textarea.name, Textarea)
}
export default Textarea4.コンポーネントの統合とエクスポート
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)
コンポーネントのラベルは、コンポーネントで定義された名前です。
この時点で、npm run serveを使用してプロジェクトを開始し、コンポーネントにバグがあるかどうかをテスト
できます。//開始する前に、vue.config.jsに新しいエントリexamples /main.jsが追加されていることを確認する必要があります。
コンポーネントパッケージ五、
VUE-CLI 3.xが提供して、ライブラリファイルのパッケージ化コマンド
：4つの主要なパラメータが必要です
。1. ターゲット：デフォルトでは、アプリケーションを構築することです、に変更 LIB ビルドライブラリモードを有効にする
2. 名前：出力ファイル名
3を。 DEST：出力ディレクトリ、デフォルトはDISTで、ここで私たちがするように変更 はlib
4. エントリ：エントリファイルのパスを、デフォルトでは、ここではsrc / App.vueあるに変更され たパッケージ/ index.js
これに基づき、package.jsonにスクリプトに1を追加 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：バージョン番号（過去のバージョン番号と同じにすることはできません）;
description：
はじめに; main：エントリファイル。コンパイルされたパッケージファイルをポイントします;
キーワード：スペースで区切られたキーワード;作成
者：作成者;
プライベート：プライベートかどうか、npmに公開する前にfalseに変更する必要があります;
ライセンス：オープンソース契約。
次に、.npmignoreファイルを作成し、ignoreファイルを設定します。
このファイルの構文は.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に公開する
Taobaoミラーを使用するなど、以前にnpmのミラーアドレスを変更したことがある場合は、最初に元に戻します。
npm config set registry http://registry.npmjs.orgnpmアカウントをお持ちでない場合は、 npm adduser コマンドを使用してアカウントを作成するか、npm公式ウェブサイトに登録
できます。公式ウェブサイトにアカウントを登録している 場合、または以前にアカウントをお持ちの場合は、 npm login コマンドを使用してログインします。
特定のプロセスでは、公式ドキュメント（Google Chrome->中国語を翻訳する）
公開する前に、コンポーネントがコンパイルされ、package.json内のエントリファイル（メイン）のパスが正しく、
すべてが整っていることを確認してください。コンポーネントを公開します。
npm publish