Home>Article>Web Front-end> vue-cli writes vue plug-in examples
This article mainly introduces the method of using vue-cli to write vue plug-ins, using vue components to create templates, and using webpack to package and generate plug-ins for global use.
1. vue init webpack-simple generates the project directory
2. Adjusts the directory structure
3. Modifies 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:[] }
Develop a toast plug-in, which can be released with the help of npm platform. I won’t explain too much here
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
After npm run build, the dist file will be generated in the root directory
You can use it next
demo.html
Title
vue-toast，{{msg}}
Summary:
1. Use the Vue constructor to create a subclass through the vue component: Vue.extend(component)
2. Webpack configuration The path of output must be an absolute path
3. Webpack basic configuration: entry, output, module, plugins
Related recommendations:
A Vue plug-in Detailed explanation from encapsulation to release
How to write vue plug-in instance sharing
How to write vue plug-in vue.js instance teaching
The above is the detailed content of vue-cli writes vue plug-in examples. For more information, please follow other related articles on the PHP Chinese website!