npm が vue3 カスタム コンポーネント ライブラリをリリース
プロジェクトの作成
vue create test-ui
カスタムコンポーネント
カスタム コンポーネントを作成します。コンポーネント名はニーズに基づいて決まります。フォルダーごとに 1 つのコンポーネントを作成するのが最善です。下の図は私の例です。
src/components
コンポーネントは、ページを作成するときと同じです。いわゆるコンポーネントは便利で実用的です。ページを別のプロジェクトに繰り返し移動する必要はありません。ローカル プロジェクトに直接インストールできます。次の図はコンポーネントの例です。
コンポーネントを書いた後、App.vueで正常に使えるかテストできます
設定の公開
レジスタコンポーネント
コンポーネント ディレクトリに新しい Index.js ファイルを作成し、その中に公開するコンポーネントを書き込みます。
vue.config.jsファイルを変更する
const {
defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
pages: {
index: {
// page 的入口
entry: 'src/main.js',
// 模板来源
template: 'public/index.html',
// 输出文件名
filename: 'index.html'
}
}
})
package.jsonファイルを変更し、パッケージ化コマンドとコンポーネント ライブラリ情報を構成します。
パッケージング コマンド:
–target lib キーワードは、パッケージ化するディレクトリを指定します。
–name パッケージ化されたファイルの名前
–dest パッケージ化されたフォルダーの名前
"lib": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build --target lib --name cjuly-ui --dest lib ./src/components/index.js"
コンポーネント情報:
name: 包名，该名不能和已有的名称冲突；
version: 版本号，不能和历史版本号相同；
description: 简介；
main: 入口文件，应指向编译后的包文件；
author：作者；
private：是否私有，需要修改为 false 才能发布到 npm；
license：开源协议。
注: npm ではコンポーネント ライブラリのパッケージ名を公開している人がいないことを覚えておいてください。それ以外の場合は公開できません。npm 公式 Web サイトにアクセスして、同じ名前を公開している人がいるかどうかを確認してください。
https://www.npmjs.com/
無視するファイルを設定する
src ディレクトリに .npmignore ファイルを作成し、ファイルを無視するように設定します。このファイルの構文は .gitignore の構文と同じです。npm に公開するときに無視するディレクトリまたはファイルを設定します。
.DS_Store
node_modules/
examples/
packages/
public/
vue.config.js
jsconfig.json
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*
荷造りを始める
パッケージ化コマンドの実行
npm run lib
パッケージ化が完了すると、プロジェクト ディレクトリに追加の lib フォルダーが作成され、そこにパッケージ化されたファイルが保存されます。
npmアカウントを登録する
https://www.npmjs.com/signup
登録後、ローカルでログインします
# 切换到npm地址
npm config set registry=https://registry.npmjs.org
# 登录，然后输入你的账号，密码，邮箱及验证码
npm login
公開して使用する
リリース
リリースコマンドを実行
npm publish
使用
このコンポーネントライブラリを使用したいプロジェクトにインストールして導入して使用します
コンポーネントライブラリをインストールし、コンポーネントが更新されている場合は、このコマンドを再実行してください。
npm install cjuly-ui
main.jsでグローバルに導入
# vue2引入
import cjuly-ui from 'cjuly-ui'
Vue.use(cjuly-ui);
# vue3引入
import cjuly-ui from 'cjuly-ui'
createApp(App).use(cjuly-ui).mount('#app')
要素のように直接使用するだけです
コンポーネントライブラリを更新する
コンポーネントが変更された場合は、それを
コンポーネント ライブラリ プロジェクトのnpmパッケージ ディレクトリに更新し、次のコマンドを実行する必要があります。
npm run lib
npm version patch
npm publish
npmのバージョンパッチ時にエラーが報告される場合がありますが、以下のコマンドを実行した後、上記のバージョンアップ解除コマンドを再実行してください。
git add .
git commit -m "publish to npm"
注: 公開後、npm アドレスを Taobao ミラーに設定し直し、再度公開するときに npm アドレスに切り替えることをお勧めします。
# npm发布地址
npm config set registry=https://registry.npmjs.org
# npm淘宝镜像
npm config set registry https://registry.npm.taobao.org/