Use node + vue. js to implement the SPA application and the nodevue. jsspa Application

Use node + vue. js to implement the SPA application and the nodevue. jsspa Application

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: '<p> This is index! </P> '}); // 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 can dynamically set the <meta> tag returned from all the URLs accessing the SPA, as long as the parameter is passed in. <! DOCTYPE html> 
Client
# App. js:/_ build _/app. js, which can be written in es6. webpack will convert the import Vue from '. /vue. min' // The vue of the client. jsimport VueRouter from '. /vue-router.min '// vue routing plug-in, with webpack can be very simple implementation of lazy loading // lazy loading routing only access this route will load jsimport Foo from 'bundle? Lazy !.. // ../Components/foo' // use webpack bundle-loader to easily load the import Bar from 'bundle? Lazy !.. /../Components/bar 'import Index from 'bundle? Lazy !.. /.. /Components/index'var App = Vue. extend ({}) Vue. use (VueRouter) var router = new VueRouter: // localhost: 3000/the server defines access index. ts route file // if it is not in html5 mode, it will become http: // localhost: 3000/# after running in client js /#! /// Enter http: // localhost: 3000/foo in the browser for example. ts route file // if it is not in html5 mode, it will become http: // localhost: 3000/foo/# after the client js runs /#! /// After the html5 mode is set, # is not added after loading js #! These two characters are similar to those of the anchor to unify the frontend and backend routes. If you refresh the browser, the server can also render the corresponding pages. History: true, // remove the anchor in html5 mode saveScrollPosition: true // remember the rolling position of the page. html5 mode applies}) // define the route, which must be the same as the router defined by the server route path. map ({'/': {component: Index // frontend route definition,}, '/foo': {component: foo},'/bar': {component: bar}) // start APProuter. start (App, '# app ')
Improvements
The frontend and backend unified template has been found to separate html. The node uses the fs. readFileSync method to retrieve html content, and the client uses the raw-loader of webpack to obtain html content.

If the source code is not put, it is all nonsense.
Source Code address
Https://github.com/yjj5855/node-vue-server-webpack
Articles you may be interested in:

 

 
  
How to deploy Node. js applications on heroku Cloud Platform
 
  
How to quickly deploy nodejs using the ruby Deployment Tool mina
 
  
In node. js development, the Node Supervisor is used to modify the monitoring file and automatically restart the application.
 
  
Nginx performs node. js application load balancing configuration instance