diff --git "a/data/3.Vue\351\253\230\351\230\266/1.Vue\346\234\215\345\212\241\347\253\257\346\270\262\346\237\223/1.SSR/exercises.md" "b/data/3.Vue\351\253\230\351\230\266/1.Vue\346\234\215\345\212\241\347\253\257\346\270\262\346\237\223/1.SSR/exercises.md" index f2d40ef5933625d1eeb6cd0b64e346ad24a6b17a..b629c45a054f7af4a3aeefb84eb833e4182e4272 100644 --- "a/data/3.Vue\351\253\230\351\230\266/1.Vue\346\234\215\345\212\241\347\253\257\346\270\262\346\237\223/1.SSR/exercises.md" +++ "b/data/3.Vue\351\253\230\351\230\266/1.Vue\346\234\215\345\212\241\347\253\257\346\270\262\346\237\223/1.SSR/exercises.md" @@ -46,7 +46,9 @@ npm install vue vue-server-renderer --save


vue服务端渲染最小demo
+ `app.js` +
```js @@ -93,7 +95,7 @@ server.listen(8888,() => console.log(`Example app listening on port 8888!`)) -
+


diff --git "a/data/3.Vue\351\253\230\351\230\266/1.Vue\346\234\215\345\212\241\347\253\257\346\270\262\346\237\223/2.Nuxt.js/config.json" "b/data/3.Vue\351\253\230\351\230\266/1.Vue\346\234\215\345\212\241\347\253\257\346\270\262\346\237\223/2.Nuxt.js/config.json" index 536abd52d07cfc70ffb0cd041a684d0ab1561f2b..2eda8346f5cb61fad4d945fc074fd4f7bc420208 100644 --- "a/data/3.Vue\351\253\230\351\230\266/1.Vue\346\234\215\345\212\241\347\253\257\346\270\262\346\237\223/2.Nuxt.js/config.json" +++ "b/data/3.Vue\351\253\230\351\230\266/1.Vue\346\234\215\345\212\241\347\253\257\346\270\262\346\237\223/2.Nuxt.js/config.json" @@ -1,10 +1,15 @@ { "node_id": "vue-9955251e862745919db545791d1b8d44", - "keywords": [], + "keywords": [ + "Nuxt.js" + ], "children": [], "export": [ "exercises.json" ], - "keywords_must": [], + "keywords_must": [ + + "Nuxt.js" + ], "keywords_forbid": [] } \ No newline at end of file diff --git "a/data/3.Vue\351\253\230\351\230\266/1.Vue\346\234\215\345\212\241\347\253\257\346\270\262\346\237\223/2.Nuxt.js/exercises.json" "b/data/3.Vue\351\253\230\351\230\266/1.Vue\346\234\215\345\212\241\347\253\257\346\270\262\346\237\223/2.Nuxt.js/exercises.json" new file mode 100644 index 0000000000000000000000000000000000000000..3ae1e5609585581bfea0f4de80d17f0e2cd66764 --- /dev/null +++ "b/data/3.Vue\351\253\230\351\230\266/1.Vue\346\234\215\345\212\241\347\253\257\346\270\262\346\237\223/2.Nuxt.js/exercises.json" @@ -0,0 +1,7 @@ +{ + "type": "code_options", + "author": null, + "source": "exercises.md", + "notebook_enable": false, + "exercise_id": "1bce267b825f42a7bd21b01f0cd33fba" +} \ No newline at end of file diff --git "a/data/3.Vue\351\253\230\351\230\266/1.Vue\346\234\215\345\212\241\347\253\257\346\270\262\346\237\223/2.Nuxt.js/exercises.md" "b/data/3.Vue\351\253\230\351\230\266/1.Vue\346\234\215\345\212\241\347\253\257\346\270\262\346\237\223/2.Nuxt.js/exercises.md" new file mode 100644 index 0000000000000000000000000000000000000000..c2cac7b988c4b63afaed53b2c7176e46241c61a8 --- /dev/null +++ "b/data/3.Vue\351\253\230\351\230\266/1.Vue\346\234\215\345\212\241\347\253\257\346\270\262\346\237\223/2.Nuxt.js/exercises.md" @@ -0,0 +1,104 @@ +# SSR + +
小常识:
+

+Vue官网这样讲到:
+从头搭建一个服务端渲染的应用是相当复杂的。幸运的是,我们有一个优秀的社区项目 Nuxt.js 让这一切变得非常简单。Nuxt 是一个基于 Vue 生态的更高层的框架,为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是,你甚至可以用它来做为静态站生成器。推荐尝试。 +
+2016 年 10 月 25 日,zeit.co 背后的团队对外发布了 Next.js,一个 React 的服务端渲染应用框架。几小时后,与 Next.js 异曲同工,一个基于 Vue.js 的服务端渲染应用框架应运而生,我们称之为:Nuxt.js。 + +
+Nuxt.js 是一个基于 Vue.js 的通用应用框架。 + +通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI 渲染。 + +我们的目标是创建一个灵活的应用框架,你可以基于它初始化新项目的基础结构代码,或者在已有 Node.js 项目中使用 Nuxt.js。 + +Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。 + +除此之外,我们还提供了一种命令叫:nuxt generate ,为基于 Vue.js 的应用提供生成对应的静态站点的功能。 + +我们相信这个命令所提供的功能,是向开发集成各种微服务(Microservices)的 Web 应用迈开的新一步。 + +作为框架,Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性,例如异步数据加载、中间件支持、布局支持等。 + + +
+ +![在这里插入图片描述](https://img-blog.csdnimg.cn/37df04494d734ccbabde0e0b15bba1e3.png) +
+ +特性如下:
+基于 Vue.js
+自动代码分层
+服务端渲染
+强大的路由功能,支持异步数据
+静态文件服务
+ES2015+ 语法支持
+打包和压缩 JS 和 CSS
+HTML 头部标签管理
+本地开发支持热加载
+集成 ESLint
+支持各种样式预处理器: SASS、LESS、 Stylus 等等
+支持 HTTP/2 推送
+
+ +![在这里插入图片描述](https://img-blog.csdnimg.cn/6fb2e6efdede43c9b226fc15690b4912.png) + +
+搭建项目 +
+ +```bash +npm create nuxt-app <项目名> +``` + +
+ +按照提示选择项目之后完成创建 + +

+ +启动项目 + +```bash +cd vue-ssr-app +npm run dev +``` + +`http://localhost:3000` + +![在这里插入图片描述](https://img-blog.csdnimg.cn/4df2653623a5426292b08bdb2c220fa7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16) +
+ +显然,我们看到了网页上有实际渲染的内容,这是服务端负责的渲染 +

+ +更多内容我们查看 [ +https://www.nuxtjs.cn/guide](https://www.nuxtjs.cn/guide) + + + + + +
小测试:
+ +以下关于nuxt.js说法正确的是?

+ +## 答案 + +nuxt.js 不利于工作中的开发 + +## 选项 + +### A + + nuxt.js 是vue服务器端渲染(SSR)框架 +### B + +nuxt.js 是已经落后的技术 + +### C + + +nuxt.js 主要应用于服务器,用来减少代码bug diff --git a/initA.html b/initA.html index 408b512b204e6d5f2b761dc9c8f55a5edaf250cf..01557973644ce91acf990829a3fdf9bc92305515 100644 --- a/initA.html +++ b/initA.html @@ -6,26 +6,61 @@ Document - + + -
- - - - +
+ + + + + - \ No newline at end of file