vue 插件开发

前端这点事 2021年07月22日 22:46 477 0

写vue项目好几个了，经常在npm上找一些插件用，回想起来，npm上怎么没有我的插件呢？

一定是我没上传！！于是乎，有了下文，实现一个vue插件的开发，并发布到npm上。

1.首先安装下vue-cli脚手架，最开始我其实是想自己本地webpack搭建一个vue插件开发的环境的，后来又想着，webpack和很多loader兼容性不是特别好，尤其是webpack5以后，

所以，咱就直接用脚手架去init一个简单的插件模板吧~~

yarn global add @vue/cli || npm i @vue/cli -g

上面命令挑一个即可。

2. 基于vue init命令生成一个简单的带webpack配置的vue模板

vue init webpack-simple vue-toast

如果提示

Command vue init requires a global addon to be installed.

Please run npm i -g @vue/cli-init and try again.

就先执行一下：

npm i -g @vue/cli-init || yarn global add @vue/cli-init

再执行

vue init webpack-simple vue-toast

这样一个基本的vue项目就有了，但是里面又不会有太多不需要的东西。

3.在项目src下面新建plugin文件夹，plugin文件夹下新建toast文件夹，toast文件夹下新建toast.vue、toast.js，

toast代码如下:

<template>
    <div class="vue-toast-wraper" v-show="localShow">
        {{msg}}
    </div>
</template>
<script>
export default {
    name:'toast',
    props:{
        msg:{
            default:"",
            type:String
        },
        isShow:{
            default:false,
            type:Boolean
        }
    },
    data (){
        return {
            localShow: this.isShow
        }
    },
    mounted(){
        if(this.isShow){
            setTimeout(() => {
                this.localShow = false
            },2500);
        }
    }
}
</script>
<style scoped>
.vue-toast-wraper{
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 30px;
    padding: 10px;
    border-radius:12px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 2000;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
</style>

toast.js代码如下：

import VueToastPlugin from './toast.vue'
const toastPlugin = {
    install: function(Vue) {
        Vue.component(VueToastPlugin.name, VueToastPlugin)
    }
}
// global 情况下 自动安装
if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(toastPlugin)
}
// 导出模块
export default toastPlugin

4.这里因为vue init生成的模板给你配置好了.vue、.css、es6的语法了，所以我们啥都不用做了，只需要修改webpack.config.js如下（注释注意的是我们需要修改的点）：

var path = require('path')
var webpack = require('webpack')
var NODE_ENV = process.env.NODE_ENV
var plugin_name = 'toast'
module.exports = {
  entry: NODE_ENV == 'production' ? `./dist/${plugin_name}.js` : './src/main.js',   // 注意：这里需要区分环境，dev我们用来测试组件，生产用来对组件打包，此处不改会导致，打包是这个vue的项目代码，而不是我们的插件代码
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: `${plugin_name}.js`,
    library: 'vue-toast', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd',// 指定输出格式                                                                      // 注意：这里需要配置导出包支持的格式，配上umd才能支持script引入的方式
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      }, {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

此时yarn build一下，就可以看到dist文件夹有toast.js文件，就是插件的代码了~~，由于我们webpack的配置，该代码也是支持umd引入的。

企业微信截图_16269686641910.png

5.最后我们修改下package.json里面部分配置，如下图：

企业微信截图_1626966560701.png

忘记说了

  "private": false,

这个一定要设置成false，其实不设置，最后你也发布不上去，npm会提醒你的

6.最后就是用es6和umd引入，试试效果了，web目录下新建一个index.html，使用http-server启一个服务

http-server，没有这个模块的自己安装下哈

yarn global add http-server

然后在web下面http-server，umd代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="./vue-toast/dist/toast.js"></script>
</head>
<body>
    <div id="app">
        <toast :msg = "'this is a test'" :is-show = "isShow" ></toast>
      </div>
    
<script>
  new Vue({
    el: '#app',
    data: function() {
      return {
        isShow: true,
      }
    },
    methods: {
    }
  })
</script>
</body>
</html>

附上效果图：

企业微信截图_16269669025228.png