服务端渲染

2020-03-31 本文已影响0人欢欣的膜笛

SSR：服务端渲染

原理：
将同⼀个组件渲染为服务器端的HTML字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应⽤程序。
应⽤场景：
1. 应⽤需要更好的SEO
2. 应⽤需要更快的内容到达时间 (⾸屏渲染时间)，特别是对于缓慢的⽹络情况或运⾏缓慢的设备。
局限：
1. 更⼤的服务器端负载
2. 较⾼的学习成本
3. ⼀些外部扩展库使⽤会受限

Nuxt.js：Nuxt.js是一个基于Vue.js的通用应用框架。

特性
1. 基于 Vue.js
2. 自动代码分层
3. 服务端渲染
4. 强大的路由功能，支持异步数据
5. 静态文件服务
6. ES2015+语法支持
7. 打包和压缩 JS 和 CSS
8. HTML头部标签管理
9. 本地开发支持热加载
10. 集成ESLint
11. 支持各种样式预处理器SASS、LESS、Stylus等等
12. 支持HTTP/2推送

安装：

 npm install -g npx
 npm install -g create-nuxt-app
 npx create-nuxt-app  <项目名>
 // choose Koa、axio、Universal (SSR)

启动：npm run dev
⽬录结构
1. assets：资源目录，用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
2. components：组件目录，用于组织应用的Vue.js组件。Nuxt.js不会扩展增强该目录下Vue.js组件，即这些组件不会像页面组件那样有asyncData方法的特性。
3. layouts：布局目录，用于组织应用的布局组件。若无额外配置，该目录不能被重命名。
4. middleware：⽤于存放应⽤的中间件。
5. pages：⻚⾯⽬录，⽤于组织应⽤的路由及视图。
6. plugins：插件目录，用于组织那些需要在根vue.js应用实例化之前需要运行的Javascript插件。
7. static：静态文件目录，用于存放应用的静态文件，此类文件不会被Nuxt.js调用Webpack进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径/下。若无额外配置，该目录不能被重命名。
8. store：用于组织应用的Vuex状态树文件。Nuxt.js框架集成了Vuex状态树的相关功能配置，在store目录下创建一个index.js文件可激活这些配置。若无额外配置，该目录不能被重命名。
9. nuxt.config.js 文件：用于组织Nuxt.js应用的个性化配置，以便覆盖默认配置。若无额外配置，该文件不能被重命名。
路由：
Nuxt.js依据pages目录结构自动生成vue-router模块的路由配置。页面之间使用路由，用<nuxt-link>标签。
```
 <template>
   <nuxt-link to="/">首页</nuxt-link>
 </template>
```
嵌套：嵌套：制造⼀个.vue⽂件和⽂件夹同名

动态路由：⽂件名或者⽂件夹名称要带_
以下目录结构：

pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| user/
-----| _id.vue
-----| index.vue
--| product/
-----| _id.vue
--| index.vue

Nuxt.js生成对应的路由配置表为：

routes: [{
  path: "/user",
  component: _c49ccf6e,
  children: [{
    path: "",
    component: _9cd9f7e8,
    name: "user"
  }, {
    path: ":id",
    component: _51ea9974,
    name: "user-id"
  }]
}, {
  path: "/product/:id?",
  component: _63b48c0c,
  name: "product-id"
}, {
  path: "/",
  component: _52799078,
  name: "index"
}, {
  path: "/:slug",
  component: _76154fff,
  name: "slug"
}, {
  path: "/:slug/comments",
  component: _cc523652,
  name: "slug-comments"
}]

服务端渲染

猜你喜欢

热点阅读