vueコンポーネントライブラリを作成しnpmにパブリッシュ

vueコンポーネントライブラリの作成
例ではwebpackを用いて独自のプロジェクトを構築します
packageを作成します.jsonファイル、参照が必要な依存パッケージを追加

{
  "name": "xxxx",
  "description": "xxxx",
  "version": "1.0.0-beta.3",
  "author": "Tinylj([email protected])",
  "license": "MIT",
  "private": false,
  "main": "dist/xxx.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --config build/webpack.dev.js",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.prod.js"
  },
  "dependencies": {
    "vue": "^2.5.11",
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.11",
    "style-loader": "^0.23.1",
    "file-loader": "^1.1.4",
    "less": "^2.7.3",
    "less-loader": "^4.1.0",
    "url-loader": "^1.1.2",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "files": [
    "dist"
  ]
}

versionではnpmにパブリッシュする必要があるバージョン番号です.filesにはnpmにアップロードするフォルダディレクトリが必要で、ソースを開きたくない場合は、webpackパッケージ後のdistフォルダ構成に対応するwebpackをアップロードするだけです.common.js,webpack.dev.jsおよびwebpack.prod.js、ここでwebpackの知識点は詳しく展開されません.その後、srcフォルダでは、私たちが普段vueコンポーネントを書いているのと同じです.
コンポーネントを書き、出力します.
カスタマイズされたInput入力ボックスで、さまざまなプロパティの変化、イベント、ステータスなどをサポートするコンポーネントを作成します.src/packages/input/src/main.vue

    /**
     * lhInput
     * @module components
     * @param  {String}        size  - size  。 mini     
     * @param  {Boolean}       readonly   -     
     * @param  {Boolean}       disabled   -     
     * @param  {Boolean}       autofocus   -       
     * @param  {String}        type    -      【text,password】
     * @param  {String,Number} value   -      
     * @param  {String}        placeholder       -    
     * @param  {Number}        maxlength       -     
     * @param  {Number}        minlength       -     
     * @param  {Number}        max       -    
     * @param  {Number}        min       -    
     * @param  {String}        state      -   【success,error,warn,loading】
     *
     *
     * @param   {Function}  blur          
     * @param   {Function}  focus            
     * @param   {Function}  change          
     */
    export default {
        name: 'lhInput',
        componentName: 'lhInput',
        props: {
            type: {
                type: String,
                default: 'text'
            },
            size: {
                type: String,
                default: ''
            },
            pattern: {type: String},
            title: {type: String},
            required:{type:[Boolean,String],default:false},
            name: String,
            value: [String, Number],
            placeholder: String,
            state: String,
            readonly: {
                type: Boolean,
                default: false
            },
            disabled: {
                type: Boolean,
                default: false
            },
            autofocus: {
                type: Boolean,
                default: false
            },
            maxlength: [Number,String],
            minlength: [Number,String],
            max: Number,
            min: Number
        },
        data() {
            return {
                inputValue: this.value,
            }
        },
        methods: {
            handleFocus(event) {
                this.$emit('focus', event); //      event,       @   ？
            },
            handleBlur(event) {
                this.$emit('blur', event);

            },
            handleInput(event) {
                var value = event.target.value
                this.$emit('input', value)
                this.$emit('change', value)
            },
            handleChange(event) {
                // var value = event.target.value
                // this.$emit('change', value)
            },
        },
        computed: {
            lhInputIcon() {
                var name = this.state;
                return name ? `lh-icon-${name}` : ''
            },
            disabledVal() {
                var val = this.disabled || this.state === 'loading';
                return val
            }
        },
        watch: {
            value(val) {
                if (val === this.inputValue) return;
                this.inputValue = val
            },

        },
        mounted: function () {


        },
    };

このmainを出力します.vueファイルsrc/packages/input/index.js

import lhInput from './src/main.vue';

/* istanbul ignore next */
lhInput.install = function(Vue) {
  Vue.component(lhInput.name, lhInput);
};
export default lhInput;

npm installおよびnpm build指向のindeの構築をサポートする.js
srcルートディレクトリの下にsrc/indexを作成します.js

import lhInput from './packages/input/index';
const components = [
  lhInput,
  // ...          
]
const install = function (Vue, opts = {}) {
  components.map(component => {
    Vue.component(component.name, component);
  })
}
/*             */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}
export default {
  install,
  lhInput,
}

以上のいくつかの手順を経て、npmにパブリッシュし、ラベル参照をサポートできるwebpack+vueエンジニアリングを簡単に構築しました.npmにパブリッシュした後、他のエンジニアリングに導入することができ、さっきのinputコンポーネントも直接エンジニアリングに引用することができます.
コンポーネントライブラリのデバッグ方法の延長
コンポーネントをデバッグするたびにnpmにコンポーネントを再パブリッシュして他のエンジニアリングリファレンスでデバッグするのではなく、ローカルwebpack-dev-serverで起動します.では、npm run devとnpm run buildを分離する必要があります.
srcルートディレクトリの下にsrc/mainを作成します.jsはnpm run devを使用してこのエントリファイルを指します.

import Vue from 'vue';
import App from './App.vue';
// import 'babel-polyfill';
import router from './router';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import '../static/css/theme-common/main.less';
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

拡張読書トピックパッケージの構築方法
だれも見ていないから,今度また話しましょう.
npm
npmとは
NPMはNodeJSとともにインストールされたパッケージ管理ツールであり、NodeJSコードの導入上の多くの問題を解決することができ、一般的な使用シーンは以下の通りである:ユーザーがNPMサーバから他の人が作成したサードパーティパッケージをローカルで使用することを許可する.NPMサーバから他の人が作成したコマンドラインプログラムをダウンロードしてインストールしてローカルで使用できるようにします.ユーザーが自分で作成したパッケージまたはコマンドラインプログラムをNPMサーバにアップロードして他の人が使用できるようにする.もう一つの公式サイトの説明を見てください.Essential JavaScript development tools that help you go to market faster and build powerful applications using modern open source code.
独自のnpmパッケージをパブリッシュする方法
1:npmのアカウントを作成する
2:npm run buildコンテンツをdistフォルダにパッケージします.
3:npm login自分のアカウントにログイン
4:npm publishはnpmにパブリッシュされます.
作者:はびこる太った頭の魚のリンク:https://juejin.im/post/5dda8a39e51d45230747a17e出典:掘金著作権は著者の所有である.商業転載は著者に連絡して許可を得てください.非商業転載は出典を明記してください.