自动摘要
正在生成中……
随着强交互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.13
2、创建插件文件
#后续命令都在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.js
module.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
#输出如下
> wp-vue3-plugin@0.1.0 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