Egg Vue是一個(gè)基于Egg.js的Vue全家桶服務(wù)端渲染框架，它完美地將Egg.js和Vue.js結(jié)合起來，讓開發(fā)者可以更方便地進(jìn)行服務(wù)端渲染的開發(fā)。

在開始使用Egg Vue之前，你需要安裝Node.js、Vue.js和Egg.js。然后創(chuàng)建一個(gè)新的Egg.js項(xiàng)目：

$ npm i egg-init -g
$ egg-init egg-vue-demo --type=vue
$ cd egg-vue-demo
$ npm i

創(chuàng)建完畢后，我們需要在config/config.default.js文件中添加Vue插件：

exports.vue = {
enable: true,
package: 'egg-view-vue',
};

然后在config/config.default.js文件中配置Vue插件的一些參數(shù)：

config.vue = {
renderOptions: {
// 開啟模板預(yù)編譯
template: require('fs').readFileSync('path/to/your/template.vue', 'utf-8')
},
// 渲染模板的地址，一個(gè).vue文件
render: {
// 開啟渲染客戶端進(jìn)程
inject: false,
},
};

配置好了之后，在app/view目錄下創(chuàng)建Vue模板文件，渲染方法可以在app/controller目錄下的控制器中進(jìn)行，如下：

// app/controller/home.js
'use strict';
const Controller = require('egg').Controller;
class HomeController extends Controller {
async index() {
const { ctx } = this;
// 將數(shù)據(jù)傳遞給Vue模板
await ctx.renderVue('home.vue', {
title: 'Hello World',
msg: 'Welcome to Egg Vue',
});
}
}
module.exports = HomeController;

最后，我們可以在瀏覽器中訪問我們的網(wǎng)站，就可以看到服務(wù)端渲染的頁(yè)面。這樣可以讓我們的頁(yè)面更加的SEO友好，同時(shí)也可以提升網(wǎng)站的性能。