vue插件开发之保姆级教程

创建项目

vue init webpack-simple projectName

下载依赖

执行 npm install

新增插件文件

在src目录下新增lib文件夹，然后新增以下2个文件：index.vue，index.js
如果打包时需要独立的css文件，那么还需要新增 index.scss文件（注意类名的冲突）

添加完成之后目录结构如下：

插件内容

index.vue内容如下：

<template>
  <div class="text" v-click="myclick">
    插件内容
  </div>
</template>

<script>
export default {
  name: 'myPlug',
  methods: {
    myclick () {
      this.$emit('myclick'); 
    }
  }
}
</script>

index.scss内容如下：

.text {
  font-size: 18px;
  color: #999;
}

index.js是插件的入口文件，内容如下：

import './index.scss'
import myPlug from './index.vue'

myPlug.install = function (Vue) {
  // 添加全局方法
  Vue.prototype.$myFunc1 = (string) => {
    return string;
  }
  Vue.component(myPlug.name, myPlug)
}

export default myPlug;

// 添加导出方法
export const myFunc2 = function(string) {
  return string;
}

本地测试

main.js代码如下：

import Vue from 'vue'
import App from './App.vue'

import myPlug from './lib/index'

Vue.use(myPlug)

new Vue({
  el: '#app',
  render: h => h(App)
})

app.vue代码如下：

<template>
  <div id="app">
    <my-plug />
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
  }
}
</script>

执行 npm run dev

到这里一个简简单单的插件就开发完成了。

项目构建

修改webpack.config.js中的entry
默认的入口文件是 ./src/main.js 这里是本地运行时使用的
构建时需将字段的值修改为 ./src/lib/index.js

修改webpack.config.js中的output

output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js',
    library: 'build',
    libraryTarget: 'umd',
    umdNamedDefine: true
  }

执行 npm run build

会生成dist打包目录

再来看看几个其他的问题

插件中使用了图片的处理方案

关于图片一般有2种处理方式：
第一种：将图片转换为base64格式
第二种：将图片放到图片服务器

第二种方法不用多说，直接写入图片路径即可，我们看看第一种的处理方法。

首先，看一下初始化之后的webpack.config.js文件的内容（我这里只取当前需要的代码片段）。

{
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }

使用了file-loader对图片进行打包，但是file-loader无法将图片装换为base64格式，所以我们使用url-loader，将上面代码片段修改成如下代码片段

{
        test:/\.(jpg|png|gif|bmp|jpeg|)$/,
        loader:'url-loader',
        options: {
          esModule: false, // 这里设置为false
          limit: 10240, // 限制为10k，小于就会base64
          name: '[name].[hash].[ext]',
        }
      }

使用的插件中使用了es6语法

同样的修改webpack.config.js中的配置即可
将以下配置

{
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }

替换为

{
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'),resolve('node_modules/******'),resolve('node_modules/******')]
      }

resolve方法代码如下：

function resolve(dir) {
  return path.join(__dirname, dir)
}

单独打包css文件

执行 npm install --save-dev extract-text-webpack-plugin
在webpack.config.js中添加如下代码：

var webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

将以下配置

{
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ],
      }

替换为

{
        test: /\.scss$/,
        use:  process.env.NODE_ENV=='development'? [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]:ExtractTextPlugin.extract({
          fallback:'vue-style-loader',
          use: ['css-loader', 'sass-loader']
        })
      }

添加以下配置代码：

// 与module字段同级
plugins: [
    new ExtractTextPlugin('build.css')//括号内为打包成css文件的名字位置
  ]

再次执行 npm run build 后可以看到css已独立生成


最后，我们需要将插件发布到npm上去，如果需要将插件发布到公司的npm源上，那么进行一下操作：

1. 执行 npm get registry
   

2. 执行 npm set registry *********
   

3. 执行 npm login
   输入username，password，email后显示登录成功

4. 执行 npm publish

到这里，一个插件的开发就真正的结束了。

至于插件的使用相比大家都比较熟悉，我这里就不再赘述了。