Frontend-All
diff --git a/‎11-构建工具/04-ssr/vue-ssr/01-start.js‎
Lines changed: 34 additions & 0 deletions b/‎11-构建工具/04-ssr/vue-ssr/01-start.js‎
Lines changed: 34 additions & 0 deletions
diff --git a/‎11-构建工具/04-ssr/vue-ssr/02-simple-ssr.js‎
Lines changed: 36 additions & 0 deletions b/‎11-构建工具/04-ssr/vue-ssr/02-simple-ssr.js‎
Lines changed: 36 additions & 0 deletions
diff --git a/‎11-构建工具/04-ssr/vue-ssr/03-info.js‎
Lines changed: 3 additions & 0 deletions b/‎11-构建工具/04-ssr/vue-ssr/03-info.js‎
Lines changed: 3 additions & 0 deletions
diff --git a/‎11-构建工具/04-ssr/vue-ssr/04-demo/app.js‎
Lines changed: 13 additions & 0 deletions b/‎11-构建工具/04-ssr/vue-ssr/04-demo/app.js‎
Lines changed: 13 additions & 0 deletions
diff --git a/‎11-构建工具/04-ssr/vue-ssr/04-demo/server.js‎
Lines changed: 19 additions & 0 deletions b/‎11-构建工具/04-ssr/vue-ssr/04-demo/server.js‎
Lines changed: 19 additions & 0 deletions
diff --git a/‎11-构建工具/04-ssr/vue-ssr/05-webpack-demo/README.md‎
Lines changed: 12 additions & 0 deletions b/‎11-构建工具/04-ssr/vue-ssr/05-webpack-demo/README.md‎
Lines changed: 12 additions & 0 deletions
diff --git a/‎11-构建工具/04-ssr/vue-ssr/05-webpack-demo/src/App.vue‎ b/‎11-构建工具/04-ssr/vue-ssr/05-webpack-demo/src/App.vue‎
diff --git a/‎11-构建工具/04-ssr/vue-ssr/05-webpack-demo/src/app.js‎
Lines changed: 12 additions & 0 deletions b/‎11-构建工具/04-ssr/vue-ssr/05-webpack-demo/src/app.js‎
Lines changed: 12 additions & 0 deletions
diff --git a/‎11-构建工具/04-ssr/vue-ssr/05-webpack-demo/src/components/Bar.vue‎ b/‎11-构建工具/04-ssr/vue-ssr/05-webpack-demo/src/components/Bar.vue‎
diff --git a/‎11-构建工具/04-ssr/vue-ssr/05-webpack-demo/src/components/Baz.vue‎ b/‎11-构建工具/04-ssr/vue-ssr/05-webpack-demo/src/components/Baz.vue‎
@@ -0,0 +1,34 @@
+// https://ssr.vuejs.org/zh/
+
+const Vue = require('vue')
+const server = require('express')()
+const renderer = require('vue-server-renderer').createRenderer()
+
+server.get('*', (req, res) => {
+  const app = new Vue({
+    data: {
+      name: 'csxiaoyao'
+    },
+    template: `<div>{{ name }}</div>`,
+    created: function () {
+      console.log('name is: ' + this.name)
+    }
+  })
+
+  renderer.renderToString(app, (err, html) => {
+    if (err) {
+      res.status(500).end('Internal Server Error')
+      return
+    }
+    res.end(`
+      <!DOCTYPE html>
+      <html lang="en">
+        <head><title>Hello</title></head>
+        <body>${html}</body>
+      </html>
+    `)
+  })
+  
+})
+
+server.listen(8080)
@@ -0,0 +1,36 @@
+const Vue = require('vue');
+const server = require('express')();
+
+const template = require('fs').readFileSync('./index.template.html', 'utf-8');
+
+const renderer = require('vue-server-renderer').createRenderer({
+  template,
+});
+
+const context = {
+  title: 'vue ssr',
+  metas: `
+    <meta name="keyword" content="vue,ssr">
+    <meta name="description" content="vue srr demo">
+  `,
+};
+
+server.get('*', (req, res) => {
+  const app = new Vue({
+    data: {
+      url: req.url
+    },
+    template: `<div>访问的 URL 是： {{ url }}</div>`,
+  });
+
+  renderer.renderToString(app, context, (err, html) => {
+    console.log(html);
+    if (err) {
+      res.status(500).end('Internal Server Error')
+      return;
+    }
+    res.end(html);
+  });
+})
+
+server.listen(8080);
@@ -0,0 +1,3 @@
+// 由于没有动态更新，所有的生命周期钩子函数中
+// 只有 beforeCreate 和 created 会在服务器端渲染 (SSR) 过程中被调用
+// 这就是说任何其他生命周期钩子函数中的代码（例如 beforeMount 或 mounted），只会在客户端执行
@@ -0,0 +1,13 @@
+const Vue = require('vue')
+
+module.exports = function createApp (context) {
+  return new Vue({
+    data: {
+      url: context.url
+    },
+    template: `<div>访问的 URL 是： {{ url }}</div>`,
+    created () {
+      this.url += '~~~'
+    }
+  })
+}
@@ -0,0 +1,19 @@
+const createApp = require('./app')
+const server = require('express')();
+const template = require('fs').readFileSync('./index.template.html', 'utf-8');
+
+const renderer = require('vue-server-renderer').createRenderer({
+  template,
+});
+
+server.get('*', (req, res) => {
+  const context = { url: req.url }
+  const app = createApp(context)
+
+  renderer.renderToString(app, (err, html) => {
+    // 处理错误……
+    res.end(html)
+  })
+})
+
+server.listen(8080);
@@ -0,0 +1,12 @@
+
+```
+src
+├── components
+│   ├── Foo.vue
+│   ├── Bar.vue
+│   └── Baz.vue
+├── App.vue
+├── app.js # 通用 entry(universal entry)
+├── entry-client.js # 仅运行于浏览器
+└── entry-server.js # 仅运行于服务器
+```
@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+// 导出一个工厂函数，用于创建新的
+// 应用程序、router 和 store 实例
+export function createApp () {
+  const app = new Vue({
+    // 根实例简单的渲染应用程序组件。
+    render: h => h(App)
+  })
+  return { app }
+}
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+// 由于没有动态更新，所有的生命周期钩子函数中`
	`2`	`+// 只有 beforeCreate 和 created 会在服务器端渲染 (SSR) 过程中被调用`
	`3`	`+// 这就是说任何其他生命周期钩子函数中的代码（例如 beforeMount 或 mounted），只会在客户端执行`