Egg是一個(gè)基于Node.js的企業(yè)級后端開發(fā)框架，提供了一整套約定、插件機(jī)制等功能，讓我們能夠快速搭建、開發(fā)、維護(hù)高質(zhì)量的Node.js應(yīng)用。Vue.js則是一個(gè)流行的前端MVVM框架，可以幫助我們組織、管理、渲染復(fù)雜的單頁應(yīng)用。
在實(shí)際的項(xiàng)目中，我們可以將Egg和Vue.js配合使用，來實(shí)現(xiàn)前后端分離、更好地實(shí)現(xiàn)應(yīng)用開發(fā)與維護(hù)。下面我們就來看一下如何使用Egg集成Vue.js。
// 在Egg.js中使用Vue.js的步驟：
// 1. 安裝Egg-Vue-Webpack插件
npm i egg-view-vue-ssr
// 2. 配置Egg-Vue-Webpack插件
// config/plugin.js
exports.vue = {
enable: true,
package: 'egg-view-vue-ssr'
};
// config/config.default.js
exports.view = {
defaultViewEngine: 'vue',
mapping: {
'.vue': 'vue',
},
};
// 3. 編寫Vue.js組件及渲染模板
// app/view/index.vue
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</div>
</template>
<script>
export default {
name: 'Index',
data() {
return {
title: '歡迎來到我的網(wǎng)站',
content: '這里是我的個(gè)人博客',
};
},
};
</script>
// app/view/layout.vue
<template>
<html>
<head>
<title>{{ title }}</title>
</head>
<body>
<div id="app">{{ this.body | safe }}這樣我們就完成了在Egg.js中集成Vue.js的過程。我們可以通過Controller來根據(jù)需要渲染指定的Vue.js組件，并使用Vue.js提供的強(qiáng)大的MVVM框架來構(gòu)建、管理應(yīng)用的各個(gè)組件。
上一篇重置瀏覽器css