Use node + vue. js to implement SPA application _ node. js

This article describes how to use node + vue. js to implement SPA applications. For more information, see Business Requirements

Recently, the company asked to develop a web version of the app. Because the app is content-oriented and has a chat module, it is not suitable for multi-page development, and it is mainly for mobile browsing, it is harsh for loading speed or user experience. After researching a lot of frameworks and models, I finally came up with such a thing.

Server

Undoubtedly, node can be used. typescript can be used to effectively check errors while encoding. Strong-type languages are not under pressure on the server.

# App. ts only sticks the important code var webpack = require ('webpackage') var webpackDevMiddleware = require ('webpack-dev-middleware ') var WebpackConfig = require ('. /webpack. config ') import * as index from ". /routes/index "; import * as foo from ". /routes/foo "; import * as bar from ". /routes/bar "; var app = express (); // when starting the service, package and listen to the files used by the client. webpackDevMiddleware is the Development Mode and will package js in the memory, if you change the file, it will repackage the app. use (webpackDevMiddleware (webpack (WebpackConfig), {publicPath: '/_ build _/', stats: {colors: true}); // general configuration item app. set ('view', _ dirname + '/view'); app. set ('view engine ', 'ejs'); app. set ('view options', {layout: false}); app. use (bodyParser. urlencoded ({extended: true}); app. use (bodyParser. json (); app. use (methodOverride (); app. use (express. static (_ dirname + '/public'); var env = process. env. NODE_ENV | 'development '; if (env = 'development') {app. use (errorHandler ();} // route configuration app. get ('/', index. index); app. get ('/foo', foo. index); app. get ('/bar', bar. index); app. listen (3000, function () {console. log ("Demo Express server listening on port % d in % s mode", 3000, app. settings. env) ;}); export var App = app;

Server rendering page

# Index. tsimport express = require ("express") import vueServer = require ("vue-server") // server-side rendering vue plug-in var Vue = new vueServer. renderer (); // create a vueexport function index (req: express. request, res: express. response) {// create a component var vm = new Vue ({template :'
This is index!
'}); // Wait until html Rendering is complete, and return it to the browser vueServer.html Ready, which is the built-in event vm.python('vueserver.html ready' of vue-server, function (html: string) {// The ejs template can be used to set the required data to a global variable in the window to facilitate client js access. Res. render ('layout ', {server_html: html, server_data: 'window. cm_data = {name: "James "}'})});};

# Layout. ejs access all the URLs of this SPA and return this page
 Tags can be dynamically set as long as parameters are passed in.  
   Vue Router Example  Script // defines the global attributes required by the front-end, the article ID or user information. // index. window is transmitted in ts. cm_data = {name: "James"} // the front-end can access <%-server_data %> script// The id here is an identifier required by the front-end
Hello App!
Go to Foo Go to Bar
// Router-view is the dom to be parsed by the client vue-router // server_html is the html generated based on the access url address. It is the focus of SEO and does not load the following app. js can also see the content
 
  
<%-Server_html %>
 
// Webpack packaged js, mainly routing configuration