vue封装前端插件-发布到npm

vue插件封装基础流程

这里做简单的封装熟悉如何编写一个插件发布到npm并使用

创建一个Vue项目

开发组件我们使用 webpack-simple（比较方便，其他的创建也可以只要能构建打包配置就行）

vue init webpack-simple <project-name>

创建完成后基本形成以下目录结构

.
├── src/                           	// 源码目录
│   ├── assets  					// 静态文件
│   ├── lib /	
│   │   ├── index.js					// 组件集合代码
│   │   ├── vnjPaun               // 组件（以vnjPaun为例）
│   │   │ ├── vnj-paun.vue        // 组件代码
│   │   │ ├── index.js   			   // 组件代码
│   ├── App.vue                 // 页面入口
│   ├── main.js                   // 程序入口
├── index.html                    // 入口html文件
.

vnj-paun.vue文件编写

这里就不做过多表述 正常项目中封装组件怎么来就怎么来
简单的写个文本展示

<template>
  <div class="nj-plugin">{{ title }}</div>
</template>
<script>
export default {
  name: 'vnjPaun',
  data () {
    return {
      title: 'demo + hello + word'
    }
  }
}
</script>
<style lang="css" scoped>
.nj-plugin {
  font-size: 32px;
  color: red;
}
</style>

vnj-paun index.js文件

这个文件没什么好说的就是将该组件作为 Vue 插件，代码就三行这里就放在这吧：

// vnjPaun 是对应组件的名字，要记得在 vnj-paun.vue 文件中还是 name 属性
import vnjPaunfrom './moor-switch';

vnjPaun.install = Vue => Vue.component(vnjPaun.name, vnjPaun);

export default vnjPaun;

好了基本完成了，但是为了将所有的组件集中起来比如还有其他 select、 input、 button 等组件，那么我想要统一将他们放在一个文件这中便于管理

所以在lib文件下创建了一个index.js文件集中管理，直接代码看下就懂：

import HelloWorld from './lib/hello-world/index.js';
import VnjSwitch from './lib/switch/index.js';
// ...如果还有的话继续添加

const components = [
  HelloWorld,
  VnjSwitch
  // ...如果还有继续添加
]

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,
  HelloWorld,
  VnjSwitch
  // ...如果还有的话继续添加
}

测试组件

本地build以后 本地import插件

<!-- 省略部分代码 -->
<div id="app">
  <p>hello  Word!</p>
  <vnj-switch >开关:</vnj-switch>
</div>
<script src="/dist/vnj-paun.js"></script>
<script>
new Vue({
  el: '#app',
  data() {
    return {
      color: 'red',
      msg: 'hello world!',
      lightSwitch: false
    }
  }
})
</script>

或者发布到npm直接安装在测试项目里面查看。

发布到NPM

在发布之前首先要对插件项目进行打包配置 webpack.config.js 这个文件;

// ... 此处省略代码 
// 执行环境
const NODE_ENV = process.env.NODE_ENV

module.exports = {
  // 根据不同的执行环境配置不同的入口
  entry: NODE_ENV == 'development' ? './src/main.js' : './src/lib/index.js',
  output: {
    // 修改打包出口，在最外级目录打包出一个 index.js 文件，我们 import 默认会指向这个文件
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'vnj-paun.js',
    library: 'vnj-paun', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },
  // ... 此处省略代码 
}

修改 package.json 文件(不修改情况下发布出去后安装插件包没有打包文件dist)：

// 发布开源因此需要将这个字段改为 false
"private": false,

// 这个指 import custom-ui 的时候它会去检索的路径
"main": "dist/vnj-paun.js",

<-------------->

// 这里需要你有一个 npm 的账号，文章开头有官网链接
npm login   // 登陆 
npm publish // 发布

使用

import VnjPaunfrom 'vnj-paun'
Vue.use(VnjPaun)

剩下就是正常使用ui组件的方式去使用

PS: 修改 .gitignore 去掉忽略dist,因为我们打包的文件也需要提交；

（重要）：每次上到npm上需要更改版本号，package.json 里的 version 字段；

这里只是简单的开发思维，比较粗糙大致原理就这样；多了解下类似element等开源大项目的 封装方式；

ps：后续在续上 element比较复杂组件 以及样式分布打包，敬请期待！