建立vue組件庫併發布到npm

時間 2019-11-26

標籤建立 vue 組件併發 npm 简体版

原文原文鏈接

建立vue組件庫

例子中咱們採用webpack來構建本身的工程javascript

建立package.json文件，加入須要引用的依賴包

{
  "name": "xxxx",
  "description": "xxxx",
  "version": "1.0.0-beta.3",
  "author": "Tinylj(lujin.pt@163.com)",
  "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組件同樣。css

書寫一個組件，並輸出他

建立一個組件，這個組件是一個定製化的Input輸入框，支持各類屬性的變化，事件，狀態等。src/packages/input/src/main.vuevue

<template>
    <span class="lh-input" :class="[state ? `lh-input-${state}` : '',disabled ? 'lh-input-disabled' : '',size]"> <input class="lh-input-cornInput" :value="inputValue" :type="type" :name="name" :placeholder="placeholder" v-bind:required = "required?true:false" :min="min" :max="max" :pattern="pattern" :title="title" :minlength="minlength" :maxlength="maxlength" :disabled="disabledVal" :readonly="readonly" :autofocus="autofocus" @focus="handleFocus" @blur="handleBlur" @input="handleInput" @change="handleChange" > <i class="lh-input_icon" :class="lhInputIcon" v-if="state"> <i class="lh-input_icon_img"></i> <div class="lds-css ng-scope"><div style="width:100%;height:100%" class="lds-dual-ring"><div></div></div></div> </i> </span> </template>

<script>
    /** * 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 () {


        },
    };
</script>
複製代碼

輸出這個main.vue文件 src/packages/input/index.jsjava

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.jswebpack

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組件也能夠直接以的方式直接引用到工程裏。web

延伸閱讀如何對組件庫進行調試

咱們大機率不會每次調試組件都把組件再發布到npm用其餘工程引用的方式來調試，而是本地webpack-dev-server來啓動。那麼咱們則須要把npm run dev 和 npm run build分開。vue-router

src根目錄下建立src/main.js 使用npm run dev指向這個入口文件。npm

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');

複製代碼

延伸閱讀如何構建主題包

沒人看，下次再講json

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.服務器