Vue 脚手架搭建项目 and vue-ssr

命令步骤

1.首先确保环境中安装了node
2.npm install -g @vue/cli
3.vue create web(项目名称)

使用Vue ssr 的好处

1.Vue ssr 学习网址 ssr.vuejs.org/zh/

优点如下：

1. seo 搜索
   
2. 首屏到达时间

npm i express -S
npm i vue -S
npm i vue-server-renderer -S
保持 vue /vue-server-renderer 版本一致

let server = require('express')()
let Vue = require('vue')
let app = new Vue({
  template: '<div>{{msg}}</div>',
  data() {
    return {
      msg: 'The world needs heroes'
    }
  }
})

let render = require('vue-server-renderer').createRenderer()

server.get('/', (res) => {
 // res.send('hello world')
 render.renderToString(app).then(html => {
   res.send(html)
 })
})

server.listen(80, () => {
  console.log('server running')
})

运行结果如下：