在UserScript中使用Vue

Thu, 11 Oct 2018 15:26:00 +0800

之前写了一个用户脚本, 在站外一键点 bgm 格子为了添加一个 UI, 但又不想用 jQuery 手动绑一堆事件, 就直接上了 Vue. 所以需要用 Webpack 打包对应的 vue 文件到 userscript 里.

按钮和弹出框都是 Vue 做的.

因为之前一直用的是vue-cli提供的 webpack 模板, 所以不太熟悉 webpack, 踩了不少坑.

首先在 webpack 的设置中添加一个loader, 再添加一个插件

// webpack.config.js
const VueLoaderPlugin = require("vue-loader/lib/plugin");
module.exports = {
  module: {
    rules: [
      // ... other rules
      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: {
          loaders: {
            scss: "vue-style-loader!css-loader!postcss-loader!sass-loader",
            // <style lang="scss">
          },
        },
      },
    ],
  },
  plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin(),
  ],
};

然后在代码里, 参照 Vue 官方的模板, 只要初始化一个实例就能正常显示内容了.

userscript on Trim21's Blog

在UserScript中使用Vue