Vue在WordPress中的应用主题笔记

Vue在WordPress中的应用

一、安装vue3
二、新建Wordpress文件

前端技术发展可谓是日新月异，发展速度可谓之快，从2015年开始我就使用Wordpress建站，到现在为广大客户开发定制。vue3已经发布很久了，于是准备出一个《Vue在Wordpress中的应用》系列教程。

本系列教程主要讲解如何在Wordpress应用vue，因此在学习本系列教程之前，你需要熟知并掌握部分nodejs及vue使用技能，并确认在本地已安装相关环境。

一、安装vue3

本地新建文件夹：wp-vue-tutorial，打开终端工具，进入该目录，安装vue，安装命令为，安装时输入项目名称：wp-vue-tutorial

npm init vue@latest

Vue

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

&#x2714; Project name: … <your-project-name>
&#x2714; Add TypeScript? … No / Yes
&#x2714; Add JSX Support? … No / Yes
&#x2714; Add Vue Router for Single Page Application development? … No / Yes
&#x2714; Add Pinia for state management? … No / Yes
&#x2714; Add Vitest for Unit testing? … No / Yes
&#x2714; Add Cypress for both Unit and End-to-End testing? … No / Yes
&#x2714; Add ESLint for code quality? … No / Yes
&#x2714; Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

Vue

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

cd <your-project-name>
npm install
npm run dev

Vue

二、新建Wordpress文件

vue安装结束后，我们需要新建Wordpress主题所需文件，新建文件后的目录大致如下：

wp-vue-tutorial
  --src
    assets
    components
    App.vue
    main.js
  --footer.php
  --functions.php
  --header.php
  --index.html
  --index.php
  --package.json
  --README.md
  --style.css
  --vite.config.js

JSON

到这里我们就做好了开发前的准备。

style.css内容

/*
Theme Name: Vue WordPress theme
Theme URI: https://topicnote.com
Author: topicnote
Author URI: VueJs WordPress Theme
Version: 1.0.0
License: GNU General Public License
License URI: https://www.gnu.org/licenses/gpl.html
Tags: vue WordPress theme
Text Domain: vwt
*/

CSS

index.php内容

<?php get_header(); ?>

<div id="app"></div>

<?php get_footer();?>

PHP

header.php内容

<?php status_header(200); ?>
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">

  <head>
    <meta
      charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <?php wp_head(); ?>
  </head>

  <body <?php body_class(); ?>>
    <?php wp_body_open(); ?>

PHP

footer.php内容

<?php wp_footer(); ?>
</body>

</html>

PHP

functions.php内容

/**
 * 移出所有默认WP模版的redirects/lookups.
 *
 * @package vue-wp-theme
 * @since vue-wp-theme 1.0
 */
remove_action( 'template_redirect', 'redirect_canonical' );

/**
 * 将所有请求重定向到index.php，以便加载Vue应用程序.
 *
 * @package vue-wp-theme
 * @since vue-wp-theme 1.0
 */
function remove_redirects() {
	add_rewrite_rule( '^/(.+)/?', 'index.php', 'top' );
}
add_action( 'init', 'remove_redirects' );
/**
 * Load client scripts.
 *
 * @package vue-wp-theme
 * @since vue-wp-theme 1.0
 */
function load_vue_scripts() {
	wp_enqueue_script(
		'vue-wp-theme',
		get_stylesheet_directory_uri() . '/dist/index.js',
		null,
		filemtime( get_stylesheet_directory() . '/dist/index.js' ),
		true
	);
	wp_enqueue_style(
		'vue-wp-theme',
		get_stylesheet_directory_uri() . '/dist/index.css',
		null,
		filemtime( get_stylesheet_directory() . '/dist/index.css' )
	);
}
add_action( 'wp_enqueue_scripts', 'load_vue_scripts', 100 );

PHP

然后在终端中执行npm run build打包程序（如果报错就先执行npm install），将会自动创建dist目录与相关文件。这里要注意，vite每一次打包后的js及css文件名都不一样，为了能在Wordpress正确加载，所以还需要配置vite。在vite.config.js中加入下面代码

  build: {
    rollupOptions: {
        output: {
            entryFileNames: '[name].js',
            chunkFileNames: '[name].js',
            assetFileNames: '[name].[ext]',
        }
    }
  }