Рука об руку научит вас писать плагины Vue

Vue.js
Рука об руку научит вас писать плагины Vue

разбитые мысли

Предыдущийстатья, мы представили, как создать плагин для реагирования, сегодня мы поговорим о том, как создать плагин для vue

Готов к работе

Поскольку в ней используется та же структура, что и в предыдущей статье о плагинах для реагирования, тестирование кода, непрерывная интеграция и публикация пакетов npm — все это рутина, поэтому я не буду описывать их здесь. Далее в основном речь пойдет о разных местах, начнем 😊

  1. зависимости развития
{
    "devDependencies": {
        "@babel/core": "^7.0.0",
        "@babel/preset-env": "^7.0.0",
        "babel-loader": "^8.0.2",
        "chai": "^4.2.0",
        "coveralls": "^3.0.2",
        "css-loader": "^1.0.0",
        "jest": "^23.6.0",
        "style-loader": "^0.23.1",
        "vue": "^2.5.21",
        "vue-loader": "^15.5.0", // 解析 SFC 文件
        "vue-style-loader": "^4.1.2",
        "vue-template-compiler": "^2.5.21", // vue-loader 的同步依赖 
        "webpack": "^4.17.2",
        "webpack-cli": "^3.1.0"
    },
}
  1. конфигурация веб-пакета
const path = require('path');
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
    mode: "production", // 生产模式
    entry: { // 入口
        "YanProgress": path.resolve(__dirname, './src/index.js')
    },
    output: { // 出口
        path: path.resolve(__dirname, './dist'),
        filename: '[name].min.js',
        publicPath: "./dist/",
        libraryTarget: 'umd', // 按 UMD 模式打包
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    // 模板编译过程中，编译器可以将某些特性转换为 require 调用
                    transformAssetUrls: {
                        video: ['src', 'poster'],
                        source: 'src',
                        img: 'src',
                        image: 'xlink:href' // SVG
                    }
                },
                // 只命中src目录里的js文件，加快 Webpack 搜索速度
                include: path.resolve(__dirname, "./src"),
            },
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    },
                ],
                // 只命中src目录里的js文件，加快 Webpack 搜索速度
                include: path.resolve(__dirname, "./src/"),
            },
            {

                test: /\.css$/,
                loader: "style-loader!css-loader"
            }
        ]
    },
    plugins: [
        // vue-loader **这个插件是必须的！**它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。
        new VueLoaderPlugin
    ],
    resolve: { // 省略文件后缀时，默认按下面的配置取
        extensions: ['.js', '.vue'],
    },
    externals: { // 不把 vue 打包进去
        vue: 'vue',
    }
};

Написать плагин

Написать плагин vue немного сложнее 😢, по словамОфициальный сайтслучае нам нужно предоставить объект, содержащий метод установки или функцию (портал) для вызова Vue.use для регистрации вашего плагина

  • написание одного
import Component from './YanProgress.vue'; // 这个就是你平时写的 SFC 组件

// 这里要导出一个包含 install 方法的对象
let plugin = { // 这里要导出一个 install 方法
    install(Vue,options) { 
        // 这里写你的代码，你可以全局注册组件，也可以写全局指令，也可以扩展 Vue 的方法
        // 1. 全局组件
        Vue.component('yan-progress',Component); 
        // 2. 全局方法或属性
        Vue.myGlobalMethod = function () {
            // 逻辑...
        }
        // 3. 全局指令
        Vue.directive('my-directive', {
            bind (el, binding, vnode, oldVnode) {
                // 逻辑...
            }
        })
        // 4. 注入组件
        Vue.mixin({
            created: function () {
                // 逻辑...
            }
        })
        // 5. 添加实例方法
        Vue.prototype.$myMethod = function (methodOptions) {
            // 逻辑...
        }
    }
};

if (window && window.Vue) { // 如果是渐进式开发（script 引入简单粗暴的开发方式），需要自动注册你的插件
    window.Vue.use(plugin);
}

export default plugin;
  • правописание два
import Component from './YanProgress.vue'; // 这个就是你平时写的 SFC 组件

// 或者这里也可以写成函数
function plugin(Vue,options) { 
        // 这里写你的代码，你可以全局注册组件，也可以写全局指令，也可以扩展 Vue 的方法
        Vue.component('yan-progress',Component); 
    }
};

if (window && window.Vue) { // 如果是渐进式开发（script 引入简单粗暴的开发方式），需要自动注册你的插件
    window.Vue.use(plugin);
}

export default plugin;

Причина этого в том, что следующиеисходный кодподожди 😄

export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function | Object) { // 在这里哦，可以传对象，也可以传函数
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    if (installedPlugins.indexOf(plugin) > -1) { // 避免重复注册插件
      return this
    }

    // additional parameters
    const args = toArray(arguments, 1)
    args.unshift(this)
    if (typeof plugin.install === 'function') { // 如果是带有 install 方法的对象
      plugin.install.apply(plugin, args) // 不改变插件的 this（这里的 this 还是指向插件对象本身）
    } else if (typeof plugin === 'function') { // 如果是函数
      plugin.apply(null, args) // 不改变插件的 this（这里应该是指向window，在浏览器非严格模式下）
    }
    installedPlugins.push(plugin)
    return this
  }
}

взносы с открытым исходным кодом

Примите открытый исходный код, чтобы развитие сообщества и даже отрасли могло быть более мотивированным, эй, это кажется знакомым, 😂

Примечание. Например, ваша звезда — это самое большое поощрение для меня и мотивация поддержать меня в продолжении работы с открытым исходным кодом, 😄

  • сообщество awesome-vueawesome-vue
  • другие сообщества, вы можете перейти вGithubпроводить исследования

Закончи цветок 🎉

👏 Приглашаю всех присоединиться ко мне в jiyou (Github) 😊

Категории