npmに公開するVueコンポーネントを作成する方法を教えてください。これをインポートして、チェーンの外部で使用できます。

序文

npmミラーにアップロードするコンポーネントを作成するのはなぜですか？そのようなシナリオに遭遇したに違いありません。プロジェクトには、特定の関数に類似した場所がたくさんあります。関数をComponentコンポーネントにカプセル化することは間違いないと思いますが、後で電話するのに便利です。しかし、しばらくすると、Leader別のプロジェクトを開発するように求められました。その結果、どのプロジェクトで同様の機能が見られたのでしょうかCtrl + c + v。Dafaを使用して、前のプロジェクトからパッケージを取得することもできます。要件が変更された場合、2セットのプロジェクトコード、または将来的にはさらに多くのプロジェクトを維持する必要があります...次に、関数をカプセル化して会社のイントラネットnpm（または自分のアカウント）にアップロードできるため、同様の機能で、npm installインストールしimportて直接インポートすることができ、要件が変更されたときにコードを変更することができます。

構成環境

ここでの作成者はWebpack構成を使用しています（ちょっとしたことですが、気にしないでください）。またはVue-cli、Webpack構成が公開されている単純なバージョンをインストールできます（独自の構成を変更する必要があります）。パッケージ化されたコンポーネント環境を構成しましょう。開発コンポーネントライブラリが使用されているumdフォーマットをサポートしているEs Module、CommonJs、AMD主に、使用を導入する方法の3種類Webpackにlibraryし、libraryTargetあなたがこれを見て理解していない場合は、プロパティのWebPACKの詳細out.libraryTargetを

私のWebpackのバージョンは4です。バージョンの互換性の問題を回避するために、この章のプラグインのバージョン番号に従ってインストールすることをお勧めします。

プロジェクト構造

|- /node_modules
|- /src
   |- Tag.vue
   |- main.js
|- index.html
|- webpack.config.js
|- package.json

Package.jsonを初期化します

npm init -y

安装Webpack &&ローダー&&プラグイン

cnpm i webpack webpack-cli -D
cnpm i css-loader style-loader -D
cnpm i file-loader -D
cnpm i vue-loader@15.7.0 vue vue-template-compiler -D
cnpm i html-webpack-plugin@3.2.0 -D

css-loaderスタイルローダー構成.cssファイルとスタイルの使用法
ファイルローダーは、特別なフォントと画像の使用を構成します
vue-loaderは.vueファイルサフィックスを処理します
vueはVue構文を使用します
vue-template-compilerは.vueファイル内のtemplateテンプレート構文を処理します

webpack.config.js

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    
    
    mode: "development",
    entry: "./src/main.js",
    output: {
    
    
        filename: "index.js"
    },
    module: {
    
    
        rules: [
            {
    
    
                test: /\.css$/,
                use: ["style-loader", "css-loader"]  
            },
            {
    
    
                test: /\.(ttf|eot|woff|svg|woff2)/,
                use: "file-loader"
            },
            {
    
    
                test: /\.vue$/,
                use: "vue-loader"
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
    
    
            template: "./index.html"
        })
    ]
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</html>

上記の基本環境が設定されているので、ターミナルでnpx webpack実行できます。

パッケージコンポーネント

ここでは例を挙げます。コードの記述はそれほど複雑ではなく、誰もがパッケージ化して使用する方法を知っています。特定のパッケージは会社のニーズによって異なります〜。ここでの作者Element Uiは例としてコンポーネントを使用していますが、ほとんどの小規模なパートナー企業もそれを使用していると思いますElement Ui。プロジェクトに次のような同様の機能がある場合は、個別にカプセル化できます。

main.js

import Vue from 'vue'
import {
    
     Tag } from 'element-ui';
import 'element-ui/lib/theme-chalk/tag.css';
Vue.component(Tag.name, Tag)
export default Tag

Tag.vue

<template>
  <div class="Tag">
    {
    
    {
    
     msg }}
    <el-tag type="success">标签二</el-tag>
  </div>
</template>

<script>
export default {
    
    
 name: 'Tag',
  data() {
    
    
    return {
    
    
        msg: "hello 蛙人",
    }
  },
  created() {
    
    
  },
  components: {
    
    },
  watch: {
    
    },
  methods: {
    
    
  }
}
</script>
<style scoped>

</style>

Webpack.config.js

webpack.config.js内部は、output次のように変更します

output: {
    
    
    filename: "index.js",
    library: "Modal",
    libraryTarget: "umd"
}

npx webpackパッケージを使用できるように構成すると、distディレクトリがあること、ディレクトリが存在することindex.js、ファイルがファイルのパッケージであることがわかりTag.vueます。プロジェクトに導入したり、ファイルサポートEs Moduleに電話したりCommonJs、AMD3種類のファイルを使用したりできます。紹介する方法。

import Vue from 'vue'
import {
    
     Tag } from 'element-ui';
import 'element-ui/lib/theme-chalk/tag.css';
Vue.component(Tag.name, Tag)
import CustomTag from "./index" // 打包完的，直接引入进来
new Vue({
    
    
    el: "#app",
    render: h => h(CustomTag)
})

Npmが発行

npmアカウントをお持ちでない場合は、公式ウェブサイトにアクセスして、こちらからnpmアカウントを登録してください

新しいリリースパッケージプロジェクトフォルダを作成します

ターミナルで実行してnpm init -y初期package.jsonファイルを実行します。主な情報は名前とメインフィールドです。前者はパッケージの名前（つまり、npm instal xxx）であり、後者はパッケージ化したファイルですTag。デフォルトでは、mainエントリファイルが見つかります。

注：パッケージ名に大文字を含めることはできません。パッケージ名に大文字を含めることはできません。パッケージ名に大文字を含めることはできません。重要なことは3回言われています。

{
    
    
  "name": "custom-tag-waren",
  "version": "1.0.0",
  "description": "这是xxxx",
  "main": "index.js",
  "scripts": {
    
    
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "WaRen",
  "license": "ISC"
}

以前に淘宝網ミラーを変更したことがある場合は、最初にミラーを元に戻し、次のコマンドを実行します

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

登録後、実行しnpm login、ご注文を埋めます用户名、密码、邮箱

npm publishリリースを実行してから、プログレスバーが完了するのを待ちます。

いくつかの一般的な投稿エラーを整理する

これは、ミラーが淘宝網ミラーに設定されているためです。元に戻すだけです。

no_perms Private mode enable, only admin can publish this module

一般的に見て再度ログインし、ログインしていないnpm loginに

npm publish failed put 500 unexpected status code 401

パッケージ名が占有されている場合は、パッケージ名を変更するだけです。公式ウェブサイトでパッケージ名が占有されているかどうかを確認してから、名前を変更することをお勧めします。

npm ERR! you do not have permission to publish “your module name”. Are you logged in as the correct user?

メールが確認されていません。公式ウェブサイトにアクセスしてメールを確認してください

you must verify your email before publishing a new package

npmのインストールと使用

cnpm i custom-tag-waren -D

main.js

import Vue from 'vue'
import {
    
     Tag } from 'element-ui';
import 'element-ui/lib/theme-chalk/tag.css';
import customTagWaren from "custom-tag-waren"  // 下载完引入进来
Vue.component(Tag.name, Tag)
new Vue({
    
    
    el: "#app",
    render: h => h(customTagWaren)
})

これまでのところ、コンポーネントのパッケージのアップロードとダウンロードが完了しているため、各プロジェクトで必要なときnpm installに直接インストールでき、必要に応じて1つのファイルを変更して、再度公開するだけで済みます。とても便利ですか？

外部リンクの紹介

アップロードはしません。npm外部リンクの形で直接使用します。以下をご覧ください。

インポート

<template>
  <div class="Tag">
    <TagEl/>
  </div>
</template>

<script>
import TagEl from "./index"
export default {
    
    
 name: 'Tag',
  data() {
    
    
    return {
    
    
       
    }
  },
  components: {
    
    
      TagEl
  },
}
</script>
<style scoped>

</style>

上記exampleでは、index.jsファイルが直接インポートされ、コンポーネントが登録されており、直接使用できることがわかります。

スクリプトの紹介

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <Tag/>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <script type="text/javascript" src="./dist/index.js"></script>
</body>
<script>
    new Vue({
     
     
        el: "#app",
        components: {
     
     
            Tag: Tag.default
        }
    })
</script>
</html>

上記exampleでは、scriptラベルを直接使用してインポートし、登録後に使用できます。では、彼の名前がTagであることをどうやって知るのでしょうか？パッケージ化されたコンポーネントを使用するときは、名前の名前を指定する必要があります。

export default {
    
    
	name: "Tag"
}

感謝

この記事を読んでいただきありがとうございます。お役に立てば幸いです。ご不明な点がございましたら、訂正してください。

私はフロッグマン（✿◡‿◡）です。大丈夫だと思ったら、好きにしてください❤。

興味のある友達が参加できます[フロントエンドエンターテインメントサークル交換グループ]みんなのコミュニケーションと議論を歓迎します

書くのは簡単じゃない、「いいね」＋「見る」＋「再投稿」応援ありがとうございます❤

過去の良い記事

「Webpackで一般的に使用される12個のローダーを共有する」

「CommonJsとEsモジュールとは何かとそれらの違いについて話します」

「データ構造を簡単に理解できる地図」

「これらの仕事で使用されるJavaScriptのヒントをすべて知っていますか？」》

「[推奨コレクション]仕事でよく使用されるGitコマンドと、特別な問題のシナリオを解決する方法を共有する」

「ES6の機能を本当に理解していますか？》

参照

https://blog.csdn.net/weixin_43606158/article/details/1068086