手把手教你写vue插件并发布（一）

时间  2019-11-18
标签 手把手 vue 插件 并发 繁體版
原文   原文链接

 vue的插件开发

 

这篇文章较长，须要必定的阅读时间。这里有一份改善版本的插件笔记，在一个项目下完成开发、测试、发布的全过程。http://www.javashuo.com/article/p-fgxyadyb-e.htmlcss

--2019年1月15日更新。html

反映问题： vue

执行 npm publish  报错，由于有些同窗本地设置了 淘宝的npm 镜像源，npm 包发布到这个镜像源就有问题了，最简单的方式是 ：发布时候指定地址node

npm publish -registry=https://registry.npmjs.org/

--2019年4月3号更新　webpack

 

1.本地开发

　　1.1 初始化本地开发项目

　　　　咱们采用vue-cli，初始化一个vue 项目。这个不作详解，请移步到 这里 http://www.javashuo.com/article/p-bpvqzvkd-q.html，查看具体详细。初始化后就是这样的项目结构：web

　　　　

　　　　其余的文件目录不是本节内容重点，不作详解，请移步这里查看 http://www.javashuo.com/article/p-menqpman-k.html。vue-cli

　　1.2 test.js 的内容 ，这是插件的入口文件

　　

　　关于为何须要在install这个方法这里添加咱们的方法，能够参考官网。https://cn.vuejs.org/v2/guide/plugins.html  这里只是用了其中的一部分的内容。npm

　　test.js的代码以下：json

　　

import testPanel from './panel.vue'
import testToast from './toast.vue'
let test = {}
test.install = function (Vue, options) {
  Vue.prototype.$msg = 'Hello I am test.js'
  Vue.prototype.$myMethod = function (arr) {
    if (arr.length < 0) {
      return false
    } else {
      arr = arr.join('链接你我')
      return arr
    }
  }
  Vue.component(testPanel.name, testPanel) // testPanel.name 组件的name属性
  Vue.component(testToast.name, testToast) // testPanel.name 组件的name属性
}
export default test

　　test.js 里面引入的两个vue 文件，这两个文件就是咱们须要开发的组件样式。babel

　　panel.vue 

<template>
  <div>
    <div class="number-panel">
      <p v-show="checkedNumber.length>0" class="number-show">{{checkedNumber}}</p>
      <p v-show="!checkedNumber" class="number-show">  </p>
      <ul>
        <li @click="clickThisNumber($event)" v-for="index in 9" :key="index">{{index}}</li>
        <li @click="clickThisNumber($event)">0</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'test-panel', // 这里须要注意下，咱们是采用的全局注入咱们的组件，因此在后面由于咱们的组件后，会直接使用这个命名的标签
  data () {
    return {
      checkedNumber: ''
    }
  },
  components: {
  },
  methods: {
    clickThisNumber (e) {
      this.checkedNumber = this.checkedNumber.concat(e.currentTarget.innerHTML)
    }
  }
}
</script>

<style>
  .number-show {
    height: 20px;
  }
  .number-panel ul {
    padding: 0;
  }
  .number-panel ul li{
    display: inline-block;
    width: 28%;
    height: 50px;
    line-height: 50px;
    margin-top: 20px;
    background: #ddd;
    border-radius: 8px;
    margin-right: 10px;
  }
  .number-panel ul li input {
    display: none;
  }
</style>

　实现的效果以下：

　　

点击面板上的数字，及时展示在上面，具体的样式不作详解，逻辑很简单。

　　toast.vue 

<template>
  <div>
    <div class="toast"  ref='toastPosition' :class="{active: toastHidden}">
      <div class="toast-warpper">
         {{text}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'test-toast',
  data () {
    return {
      text: '',
      toastHidden: false
    }
  },
  created () {
    // this.toastPlugin()
  },
  components: {
  },
  methods: {
    toastPlugin (msg, time) {
      this.text = msg
      this.toastHidden = true
      setTimeout(() => {
        this.toastHidden = false
      }, time)
    }
  }
}
</script>

<style>
  .toast {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0px;
    min-height: 0px;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    color: #fff;
    transition: all 0.5s;
    z-index: -1;
    opacity: 0;
  }
  .toast.active {
    width: 150px;
    min-height: 25px;
    opacity: 1;
    z-index: 11;
  }
</style>

　　效果以下：

这里模拟的是，调用该插件的toast 方法。

2.本地测试

　　咱们上面就直接给出了咱们要完成的内容，可是怎么肯定咱们这个写的样式或者方法能够用呢？ 因此须要测试下，咱们到底写的是个什么鬼。

　　main.js 全局import 

　　

　　具体页面使用咱们的插件：

　　

　　两个效果以下：

　　

 

3.打包到npm

　　测试完成，能够实现咱们的想要的内容。下面咱们就要把咱们的内容打包发布到npm 上去。

　　为了避免和开发的项目环境发生冲突，咱们采用另一个项目，专门作打包发布的。

　　工具：

　　　　webpack-simple  这个简化版的webpack。 初始化项目，点击这里, https://www.cnblogs.com/majj/p/9054471.html。删掉咱们不须要的文件夹，新建一个咱们要放置咱们开发代码，完成以下：

　　

　　修改webpack.config.js的打包名称

　　

　　代码以下：

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/lib/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'toastPanel.js',
    library: 'toastPanel', // library指定的就是你使用require时的模块名，这里即是require("toastPanel")
    libraryTarget: 'umd', //libraryTarget会生成不一样umd的代码,能够只是commonjs标准的，也能够是指amd标准的，也能够只是经过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
    })
  ])
}

 打包的项目清单配置文件：

　　

　　执行 npm run build  打包

　　

 

　　发布到npm:

　　注册npm 不作详解，请看这里,https://cnodejs.org/topic/5823c4411120be9438b02a31 ,核心操做就这么几步骤，一作就会

　　　

 　　（插一句：注册帐户我遇到一个坑，注册完后，npm官网的小姐姐会让你验证邮箱，验证完成后，须要退出登陆从新登陆，否则会一直提示你要验证邮箱），蹩脚的邮件交流以下，请忽略细节，仔细看划线位置。

                  

 

　　查看当前环境下的用户：

　　　　npm whoami

　　　　

 

　　登陆：

　　　　npm login

　　　　

　　　发布：

　　　　 npm publish

　　　　

　　　咱们顺便看看，npm 官网是否是有咱们的刚才发布的内容，https://www.npmjs.com/package/vue-panel-toast

　　　　

 

 

4.安装使用

　　

　安装：

　　npm install  vue-panel-toast --save

　使用：

　　main.js 全局引入

　　

　　具体页面使用：

　　

　　效果以下：

　　

 

开发测试到发布流程OK，样式和具体的业务效果须要在调试，总算是流程跑通，具体开发出什么样的普惠众生的插件或者UI组件，就看各位小哥哥小姐姐的拳脚啦。

已经完成的下一篇的文章是开发和发布的任务都集合在一个项目文件下，欢迎查看：http://www.javashuo.com/article/p-fgxyadyb-e.html

下个目标：

　　这个是全局使用，下次改进到 页面单独使用插件，目前是按需引入使用报错。

　　若是有错误之处，敬请指出。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程