使用Node和Vue.js构建SPA应用的极致体验

随着移动设备的普及，对于加载速度和用户体验的要求也日益提高。对于内容偏重的手机应用来说，采用单页应用（SPA）模式能更好地满足这一需求。本文将带你领略使用Node和Vue.js构建SPA的魅力。

一、业务需求篇

近期，我们公司打算将经典web应用转为手机浏览模式。考虑到我们的应用内容丰富，并带有实时交互的聊天模块，我们选择了更适合的SPA模式。经过调研与摸索，我们终于找到了一个令人振奋的解决方案。

二、服务端篇章：Node的魔法舞台

我们选择Node作为服务端的选择毋庸置疑。TypeScript的出现，使得我们在编码过程中可以更有效地查错。强类型语言写服务端代码，让我们如鱼得水。下面是我们的核心代码片段：

```typescript

// app.ts 核心代码展示

const webpack = require('webpack'); //打包工具

const webpackDevMiddleware = require('webpack-dev-middleware'); //开发模式下的中间件，用于实时打包并更新客户端文件

const WebpackConfig = require('./webpack.config'); //我们的打包配置

import index from "./routes/index"; //路由导入

const app = express(); //创建express应用实例

//启动服务时，利用webpackDevMiddleware实时打包并监听客户端文件变动

app.use(webpackDevMiddleware(webpack(WebpackConfig), {

publicPath: '/__build__/', //打包文件的公共路径

stats: { colors: true } //让控制台输出彩色日志

}));

//配置服务端细节...

app.set('views', __dirname + '/views'); //设置视图目录

app.set('view engine', 'ejs'); //使用ejs作为模板引擎

app.set('view options', { layout: false }); //设置视图选项

app.use(bodyParser.urlencoded({ extended: true })); //表单数据

app.use(bodyParser.json()); //json数据

服务器端：

当你访问这个SPA的任何URL时，都会加载一个基础的`layout.ejs`页面。这个页面是动态的，可以根据不同的URL返回不同的内容。它的``标签都可以根据传入的参数进行动态设置。

`layout.ejs`页面大致如下：

```html

```

客户端：`app.js`文件是前端的主要入口。在这个文件中，我们使用Vue和Vue Router来管理我们的应用。为了实现懒加载，我们只在需要的时候加载特定的组件，如Foo、Bar和Index。我们设置Vue Router使用HTML5模式，确保前后端URL的统一性。这样，无论用户是直接访问URL还是通过客户端JS跳转，都能保持一致的路由体验。例如，当用户直接访问`/foo`时，即使经过客户端JS运行后，URL仍然保持为`/foo`，而不是加上`!/`这样的锚点字符。这样设计可以确保用户在刷新浏览器时，服务端也能根据当前URL渲染出相应的页面内容。下面是简化的客户端代码示例：

```javascript

import Vue from './vue.min'; //引入客户端的Vue库

import VueRouter from './vue-router.min'; //引入Vue的路由插件

import Foo from 'bundle?lazy!../../components/foo'; //懒加载Foo组件

import Bar from 'bundle?lazy!../../components/bar'; //懒加载Bar组件（可根据实际需求调整导入路径）

import Index from 'bundle?lazy!../../components/index'; //懒加载Index组件（首页组件）