VUE组件打包部署NPM

一.使用vuecli创建一个新项目

vue create  ***

二.修改目录

1. 修改src目录为example目录，作为示例目录

2. 新增packages目录，用于存放vue组件

3. 重新配置目录

//修改根目录vue.config.js文件（若没有需手动新建一个）
module.exports = {
  // 修改 src 为 examples
  pages: {
    index: {
      entry: 'examples/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
  // 扩展 webpack 配置，使 packages 加入编译
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
        .add('/packages')
        .end()
      .use('babel')
        .loader('babel-loader')
        .tap(options => {
          // 修改它的选项...
          return options
        })
  }
     //禁止css样式分离，解决样式不显示问题
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: false,
        // 开启 CSS source maps?
        sourceMap: false,
    },
}

链式操作

三. 编写组件

1. 在 packages 目录下，所有的单个组件都以文件夹的形式存储，所有这里创建一个目录，这里以custom-keyboard-vue组件为例，创建custom-keyboard-vue目录

2. 在 custom-keyboard-vue 目录下创建 src 目录存储组件源码

3. 在 custom-keyboard-vue目录下创建 index.js 文件对外提供对组件的引用

//  packages/custom-keyboard/index.js
// 导入组件，组件必须声明 name
import customKeyboard from './src/custom-keyboard.vue'
// 为组件提供 install 安装方法，供按需引入
const customKeyboard = function (Vue) {
    Vue.component(customKeyboard.name, customKeyboard)
};
// 默认导出组件
export default customKeyboard

4. 整合所有的组件，对外导出,在packages文件夹下新增index.js文件

// 导入组件
import customKeyboard from './custom-keyboard'
// 存储组件列表
const components = [
    customKeyboard
];
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
    // 判断是否安装
    if (install.installed) return;
    // 遍历注册全局组件
    console.log(components)
    components.map(component => Vue.component(component.name, component))
};
// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}
export default {
    // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
    install,
    // 以下是具体的组件列表
    customKeyboard
}

四. 编写示例

1.引入

// 目录example/main.js

// 导入组件库
import ColorPicker from './../packages/index'
// 注册组件库
Vue.use(ColorPicker)

2. 使用

<template>
  <div id="app">
    <form>
      <input type="text" @click="input" v-model="inputValue" placeholder="请输入验证码"/>
      <button type="submit">提交</button>
    </form>
    <custom-keyboard :keyboardShow.sync="show"  :value.sync="inputValue"></custom-keyboard>
  </div>
</template>

<script>

    export default {
        data() {
            return {
                inputValue: '',
                show: false,
                customKeyboard:
                    [
                        [{key: '1', label: '1'}, {key: '2', label: '2'}, {key: '3', label: '3'}],
                        [{key: '4', label: '4'}, {key: '5', label: '5'}, {key: '6', label: '6'}],
                        [{key: '7', label: '7'}, {key: '8', label: '8'}, {key: '9', label: '9'}],
                        [{key: 'CLEAR', label: '清空'}, {key: '0', label: '0'}, {key: 'DELETE', label: '删除'}],
                    ]

            }
        },
        methods: {
            input() {
                this.show = true
                document.activeElement.setAttribute('readonly', 'readonly')
                setTimeout(() => {
                    document.activeElement.removeAttribute('readonly')
                });
            },
            confirm() {
                alert(this.inputValue)
            }
        }
    }
</script>

五. 发布npm

1. package.json 新增一条打包编译的命令

• –target: 构建目标，默认为应用模式。这里修改为 lib 启用库模式。

• –dest : 输出目录，默认 dist。这里我们改成 lib

• [entry]: 最后一个参数为入口文件，默认为 src/App.vue。这里我们指定编译 packages/ 组件库目录。

    "scripts": {
  	// ...
  	"lib": "vue-cli-service build --target lib --name CustomKeyboardVue --dest lib packages/index.js"
  }

  2. 配置 package.json 文件中发布到 npm 的字段

  • name: 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。
  • version: 版本号，每次发布至 npm 需要修改版本号，不能和历史版本号相同。
  • description: 描述。
  • main: 入口文件，该字段需指向我们最终编译后的包文件。
  • keywords：关键字，数组格式。
  • author：作者
  • private：是否私有，需要修改为 false 才能发布到 npm
  • license： 开源协议

//example
  {
  "name": "custom-keyboard-vue",
  "version": "0.1.8",
  "author": "***",
  "private": false,
  "repository": {
    "type": "git",
    "url": "https://github.com/zdd2018/custom-keyboard-vue"
  },
  "description": "基于 Vue 的移动端自定义键盘",
  "keywords": [
    "keyboard",
    "vue-keyboard",
    "custom-keyboard",
    "vue",
    "自定义键盘"
  ],
  "main": "lib/CustomKeyboardVue.umd.min.js"
  }

3.添加 .npmignore 文件，设置忽略发布文件

# 忽略目录
examples/
packages/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map

4. 注册npm账号

5. 登录npm账号

//如果使用的cnpm淘宝镜像，需要先切回npm镜像（ npm config set registry http://registry.npmjs.org 
）
npm login

正确输入用户名邮箱密码

5. 发布

npm publish

发布成功后即可在npm官网搜索到

6. 使用

安装

npm install custom-keyboard-vue
//cnpm install custom-keyboard-vue

引入

在main.js中引入

import customKeyboard from 'custom-keyboard-vue'
Vue.use(customKeyboard)

组件中使用

<custom-keyboard :keyboardShow.sync="keyboardShow" :value.sync="value"></custom-keyboard>