建立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.服务器

如何发布一个本身的npm包

1：建立一个npm的帐号

2：npm run build 内容打包到dist文件夹。

3：npm login 登陆本身的帐号

4：npm publish 发布到npm 上。

建立vue组件库并发布到npm