在vuejs中构建一个todo应用来演示服务器端渲染和客户端混合

Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。在这个项目中，我们将探讨如何使用Vue.js构建一个Todo应用，同时展示服务器端渲染（SSR）和客户端混合（Hybrid）的技术实现。Vue.js的服务器端渲染能够提高SEO，提供更快的首屏加载速度，而客户端混合则可以提供更好的用户体验，尤其是对于交互丰富的应用。 我们需要安装Vue.js的服务器端渲染库`@vue/server-renderer`，以及Vue CLI来初始化项目。Vue CLI是Vue.js官方提供的脚手架工具，可以帮助我们快速搭建项目结构。运行以下命令： ```bash # 安装Vue CLI npm install -g @vue/cli # 创建一个新的Vue项目 vue create vue-todo cd vue-todo ``` 接下来，我们需要在项目中集成服务器端渲染。在Vue CLI项目中，这通常涉及到配置`vue.config.js`文件和创建一个服务器端入口文件。在`vue.config.js`中，我们可以设置`pages`属性，指定服务器端渲染的入口文件，比如`server-entry.js`： ```javascript module.exports = { pages: { index: { entry: 'src/main.js', template: 'public/index.html', filename: 'index.html', title: 'Vue Todo App', }, server: { entry: 'src/server-entry.js', filename: 'server-bundle.js', }, }, }; ``` 然后，创建`src/server-entry.js`，在这个文件中，我们将处理服务器端的渲染逻辑，包括创建Vue实例和渲染模板： ```javascript import Vue from 'vue'; import App from './App.vue'; new Vue({ render: (h) => h(App), }).$mount('#app'); ``` 为了实现客户端混合，我们需要在`main.js`中进行相应的配置，确保在浏览器环境中，Vue应用能够接管服务器端渲染的内容： ```javascript if (process.env.NODE_ENV === 'production' && window.__VUE_SSR_CONTEXT__) { const app = new Vue(window.__VUE_SSR_CONTEXT__.app); app.$mount('#app'); } else { // 通常的客户端初始化代码 new Vue({ render: (h) => h(App), }).$mount('#app'); } ``` 现在，我们需要创建Todo应用的核心组件。在`src/components`目录下创建`TodoList.vue`和`TodoItem.vue`，分别表示Todo列表和单个Todo项。在`TodoList.vue`中，我们将维护一个Todo项的数组，并使用`v-for`指令渲染每个Todo： ```html <template> <ul> <TodoItem v-for="item in todos" :key="item.id" :todo="item" /> </ul> </template> <script> export default { data() { return { todos: [ // 初始化一些Todo项 ], }; }, }; </script> ``` 在`TodoItem.vue`中，我们将实现添加、删除和完成Todo的功能： ```html <template> <li :class="{ completed: todo.completed }"> <input type="checkbox" v-model="todo.completed" /> <span>{{ todo.text }}</span> <button @click="removeTodo">删除</button> </li> </template> <script> export default { props: ['todo'], methods: { removeTodo() { // 调用父组件的方法移除Todo项 this.$emit('remove', this.todo); }, }, }; </script> ``` 我们在`App.vue`中引入并使用`TodoList`组件： ```html <template> <div id="app"> <TodoList ref="todoList" /> </div> </template> <script> import TodoList from './components/TodoList.vue'; export default { components: { TodoList, }, methods: { addTodo(text) { this.$refs.todoList.todos.push({ text, completed: false }); }, removeTodo(todo) { // 在服务器端，需要确保在删除后重新渲染页面 this.$refs.todoList.todos.splice(this.$refs.todoList.todos.indexOf(todo), 1); }, }, }; </script> ``` 至此，我们的Vue.js Todo应用已经具备了基本功能。为了在服务器上运行，我们需要一个Express服务器来处理请求并渲染Vue应用。创建一个`server.js`文件，安装`express`和`vue-server-renderer`，然后设置服务器： ```bash npm install express @vue/server-renderer ``` ```javascript const express = require('express'); const { createBundleRenderer } = require('@vue/server-renderer'); const path = require('path'); const app = express(); // 读取服务器端渲染的bundle const renderer = createBundleRenderer( path.resolve(__dirname, 'dist/server-bundle.js') ); app.get('*', async (req, res) => { try { const context = { url: req.url }; const html = await renderer.renderToString(context); res.status(200).send(html); } catch (err) { res.status(500).send(err.message); } }); app.listen(3000, () => { console.log('Server is running on http://localhost:3000'); }); ``` 现在，你可以通过运行`node server.js`启动服务器，并在浏览器中访问`http://localhost:3000`查看你的Vue.js Todo应用。这个应用展示了Vue.js的服务器端渲染和客户端混合的能力，既保证了SEO友好和快速的首屏加载，又提供了流畅的用户交互体验。