隨着強交互web app的需求日益增加，使用jQuery開發已經有點力不從心，於是我考慮在WordPress中也使用Vue，不是通過使用那種直接引入vue.js 然後在頁面寫vue的html代碼或者腳本的形式，那樣做組件的複用和代碼結構都有不少問題，而是採用SPA的方式來開發。
經過一番搜索，總結爲以下幾步：
1、創建項目
cd wp-content/plugins
vue create wp-vue3-plugin注意：爲了使用vue3 ，vue cli版本需要4.5以上。查看版本
vue --version
#輸出如下
@vue/cli 4.5.132、創建插件文件
#後續命令都在wp-vue3-plugin目錄下操作
vi index.php<?php
/**
* Plugin Name: WordPress Vue3 Plugin
* Description: Vue3-Plugin in WordPress
*/
function func_load_vuescripts() {
wp_register_script('wp_vue3_app_js', plugin_dir_url( __FILE__ ).'dist/js/app.js', true);
wp_register_script('wp_vue3_chunk_vendors_js', plugin_dir_url( __FILE__ ).'dist/js/chunk-vendors.js', true);
}
function func_load_vuestyles(){
wp_register_style('wp_vue3_app_css',plugin_dir_url( __FILE__ ).'dist/css/app.css');
}
add_action('wp_enqueue_scripts', 'func_load_vuescripts');
add_action('wp_print_styles', 'func_load_vuestyles');
//Add shortscode
function func_wp_vue3(){
wp_enqueue_style('wp_vue3_app_css');
wp_enqueue_script('wp_vue3_app_js');
wp_enqueue_script('wp_vue3_chunk_vendors_js');
$str= '<div id="app"></div>';
return $str;
} // end function
add_shortcode( 'wpvue3', 'func_wp_vue3' );
這是一個 解析 short code 的插件，會將文章中的[wpvue3]替換成 <div id="app"></div>同時加載必要的css和js。
3、修改vue 配置文件
vi vue.config.jsmodule.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/wp-content/plugins/wp-vue3-plugin/src/dist'
: '/',
filenameHashing: false,
}流程是這樣，首先在Vue裏進行常規的SPA開發，比如實時渲染。
npm run serve 比如我們修改 src/components/HelloWorld.vue 組件如下：
<template>
<div class="hello">
<h1>{{ title }}</h1>
<p>{{ msg }}</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
title:String,
msg: String,
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
再修改一下 src/App.vue如下：
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld title="世界你好" msg="這是我的第一個WordPress Vue3插件"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
在瀏覽器下可以看到效果如下：
那麼怎樣應用到WordPress插件中呢？
4、構建項目，生成生產環境中的css和js
npm run build
#輸出如下
> [email protected] build
> vue-cli-service build
⠹ Building for production...
DONE Compiled successfully in 8979ms 8:45:42 PM
File Size Gzipped
dist/js/chunk-vendors.js 81.91 KiB 30.77 KiB
dist/js/app.js 2.67 KiB 1.29 KiB
dist/css/app.css 0.33 KiB 0.23 KiB
Images and other types of assets omitted.
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html激活插件後，可以找一篇文章寫入short code: [wpvue3]，效果如下：
稍微解釋一下第3步的vue.config.js 兩個配置的作用，如果不修改filenameHashing，Vue默認會生成app.1234abc.js之類的帶一個hash的不固定的文件名，修改後則固定爲app.js；
修改 publicPath的原因則是項目需要引用一些資源文件，如上面Vue的logo，如果不修改會直接Build會生成形如/img/logo.png的url，該路徑在正式環境會產生404錯誤，但在開發環境中我們還是需要用默認的路徑預覽，所以要通過環境變量來判斷。更多vue配置可以參考文檔
完整項目代碼：https://github.com/falconchen/wp-vue3-plugin
本文在 CC BY-NC-SA 4.0 許可 下發布
- 署名 - 您可以複製、發行、展覽、表演、放映、廣播或通過信息網絡傳播本作品，但必須 署名作者 並添加鏈接到 原文地址。
- 非商業性使用 — 您不得將本作品用於商業目的。
- 相同方式共享 — 如果您再混合、轉換或者基於本作品進行創作，您必須基於與原先許可協議相同的許可協議 分發您貢獻的作品。