使用vue-cli怎么编写一个vue插件
本篇文章为大家展示了使用vue-cli怎么编写一个vue插件,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
常宁ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为成都创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:13518219792(备注:SSL证书合作)期待与您的合作!
1、vue init webpack-simple 生成项目目录
2、调整目录结构
3、修改webpack.config.js
var path = require('path') var webpack = require('webpack') module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'vue-toast.js', // 打包后的格式(三种规范amd,cmd,common.js)通过umd规范可以适应各种规范,以及全局window属性 libraryTarget:'umd', }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, ] }, plugins:[] }
开发一个toast插件,可以借助npm平台发布,在这里就不做过多的说明了
toast.vue
{{title}}{{content}}
index.js
import ToastComponent from './toast.vue' let Toast = {}; Toast.install = function(Vue, options = {}) { // extend组件构造器 const VueToast = Vue.extend(ToastComponent) let toast = null function $toast(params) { return new Promise( resolve => { if(!toast) { toast = new VueToast() toast.$mount() document.querySelector(options.container || 'body').appendChild(toast.$el) } toast.show(params) resolve() }) } Vue.prototype.$toast = $toast } if(window.Vue){ Vue.use(Toast) } export default Toast
npm run build 之后就会在根目录下生成dist文件
接下来就可以使用了
demo.html
Title vue-toast,{{msg}}
总结:
1、使用Vue构造器,通过vue组件来创建一个子类:Vue.extend(component)
2、webpack配置output的path必须为绝对路径
3、webpack基础配置:entry,output,module,plugins
上述内容就是使用vue-cli怎么编写一个vue插件,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。
当前文章:使用vue-cli怎么编写一个vue插件
文章URL:http://myzitong.com/article/pdhegi.html