Wordpress中如何使用Vue

in JavaScriptPHP with 0 comment

wordpress是前后端不分离的CMS系统，当然也可以使用wordpress提供的restful api 来实现在Vue中消费wordpress提供的数据从而实现前后端分离的项目，本文主要在wordpress的某个页面中使用vue相关技术展开讨论。

方式一 通过 CDN 使用 Vue

通过 CDN 使用 Vue 时，不涉及“构建步骤”，即webpack的一系列配置。这使得设置更加简单，很容易就和wordpress集成起来。但是，我们没办法使用单文件组件 (SFC) 语法，也就意味着所有组件的逻辑混在一起，代码不易维护。

方式二 自己使用 webpack 配置 vue 脚手架

这种方式就像是使用vue的脚手架一样，可以使用SFC，开发体验好，维护成本也比较小。本文主要探索这种方式实现在wordpress的页面中使用Vue。

wordpress后台新建page, 如


<?php
/**
 * Template Name: Vue Template
 * Template Post Type: post, page
 *
 * @package WordPress
 * @subpackage Twenty_Twenty
 * @since Twenty Twenty 1.0
 */

get_header();
?>
<link rel='stylesheet' id='twentytwenty-style-css'  href='<?php echo get_template_directory_uri() ?>/js/dist/app.css?ver=<?=SITE_VERSION?>' media='all' />

<main id="site-content" role="main">

 <div id="free-trial-vue"></div>

</main><!-- 设置挂载点 -->

<?php 
$fale = NULL;
if(empty($fale)){
  echo 'error';
}
?>
<?php get_footer(); ?>
<script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/js/dist/app.js?ver=<?=SITE_VERSION?>"></script>

即wordpress新建一个page，并在这个page中引入 webpack 脚手架打包后的dist产物，主要是css,js,images,fonts等静态资源,这样打开这个page的时候通过vue开发的app便挂载到

这里显示出来。这就是在wordpress中使用vue的基本原理。

Gulp

wordpress中的静态资源的打包一般是使用gulp，比如对js的处理如下：


function jsTask() {
  return src("./js/*.js")
    .pipe(
      babel({
        presets: [
          [
            "@babel/env",
            { modules: "commonjs", useBuiltIns: "usage", corejs: "3.6" },
          ],
        ],
        plugins: ["@babel/plugin-transform-runtime"],
      })
    )
    .pipe(uglify())
    .pipe(rename({ suffix: ".min" }))
    .pipe(dest("./assets/js/minjs"));
}
exports.js = jsTask;

因此在我们webpack的脚手架配置好的，我们手动需要通过npm命令调用webpack进行打包操作，但其实wordpress项目中我们已经使用了gulp进行打包操作，因此我们如果能通过gulp调用webpack打包，便实现了自动化操作。主要是通过webpack的api实现自动化操作，核心代码如下：


const excuteWebpack = require("./App/build");

function webpackVueDev() {
  return new Promise(function (resolve) {
    excuteWebpack("development");
    resolve();
  });
}

------------------------- App/build/index.js ------------------------

const webpack = require("webpack");
const webpackDevConfig = require("./webpack.dev.config");
const webpackProdConfig = require("./webpack.prod.config");

const WebpackDevServer = require("webpack-dev-server");

module.exports = function excuteWebpack(ENV) {
  let compilerInstance = null;
  //let watching = null;
  // development 模式下启用 dev-web-server的hotload模式
  if (ENV === "development") {
    compilerInstance = webpack(webpackDevConfig);
    const devServerOptions = { ...webpackDevConfig.devServer, open: false };
    const server = new WebpackDevServer(devServerOptions, compilerInstance);
    server.start();
  } else if (ENV === "production") {
    //production 模式下直接打包js, css到对应的位置
    compilerInstance = webpack(webpackProdConfig);
    compilerInstance.run((stats) => {
      console.log(stats);
    });
  }
};

如上通过webpack的api就实现了gulp调用webpack实现打包这一步自动化操作。

下边研究怎么实现使用webpack搭建vue开发脚手架就行了。

webpack实现vue开发脚手架

主要软件版本如下：

Node: 14

Webpack: 5.72.0

Vue: 2.6.14

Babel: 7.17.9

webpack.common.config.js

基本配置如下：


const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
const ProgressBarPlugin = require("progress-bar-webpack-plugin");
const chalk = require("chalk");
module.exports = {
  entry: "./App/index.js", // 默认入口
  output: {
    // 出口
    path: path.resolve(__dirname, "../../js/dist"), //  默认打包文件夹
    filename: "js/[name].bundle.js",
    assetModuleFilename: "images/[name].[ext][query]",
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
          },
        ],
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        type: "asset/resource",
      },
      {
        test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
        type: "asset/inline",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({ template: "App/free-trial.html" }),
    // new HtmlWebpackPlugin({ template: "App/vue-template.php" }),
    new VueLoaderPlugin(),
    new ProgressBarPlugin({
      format: ` build [:bar] ${chalk.green.bold(
        ":percent"
      )} (:elapsed seconds)`,
    }),
  ],
  resolve: {
    alias: {
      vue: "vue/dist/vue.js",
    },
    extensions: [".vue", ".js", ".json"],
  },
  stats: "minimal",
};

webpack.dev.config.js

开发环境配置如下：


const { merge } = require("webpack-merge");
const common = require("./webpack.common.config");

module.exports = merge(common, {
  mode: "development",
  devtool: "source-map",
  devServer: {
    port: 9000, // 指定端口
    open: false, // 自启浏览器
    hot: true, // 局部热更新
    historyApiFallback: true, // 支持 history 模式路由
    static: "js/dist",
  },
  module: {
    rules: [
      // 会应用到普通的 `.css` 文件 以及 `.vue` 文件中的 `<style>` 块
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          "vue-style-loader", // vue组件中的 style 这个 loader 是 vue-loader 已经集成的
          {
            loader: "css-loader",
            options: {
              sourceMap: false, // 是否启用 css sourceMap
            },
          },
          "sass-loader",
        ],
      },
    ],
  },
});

webpack.prod.config.js

生产环境配置如下：


const { merge } = require("webpack-merge");
const common = require("./webpack.common.config");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = merge(common, {
  mode: "production",
  devtool: false,
  optimization: {
    minimize: true,
  },
  output: {
    filename: "./app.js",
    //filename: 'js/[name].[contenthash].bundle.js', // 文件名哈希
    assetModuleFilename: "images/[name].[ext][query]",
    // 图片文件需要存放的位置，如果不设置会全部打包进根目录下
    //assetModuleFilename: 'images/[name].[contenthash][ext][query]',
    //publicPath: '/app/'
  },
  module: {
    rules: [
      {
        //MiniCssExtractPlugin 使用抽取css到单独的css文件中,官网使用style.sass，这里就让他生成好了，不用它就行了
        test: /\.(sa|sc|c)ss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [
    // 启用 css 压缩插件
    new MiniCssExtractPlugin({
      //filename: 'css/[name].[contenthash].css'
      filename: "./app.css",
    }),
  ],
});

本文由 dealdot ＜dealdot＃163.com＞ 创作, Full Stack Developer @ DeepBlue
本文最后编辑时间为: Dec 2, 2022 at 15:30 pm
转载请注明来源

评论已关闭.