-
[置顶]软件接口设计怎么做?前后端分离软件接口设计思路
本文关于软件接口设计怎么做?前后端分离软件接口设计思路。好的系统架构离不开好的接口设计,因此,真正懂接口设计的人往往是软件设计队伍中的稀缺型人才。为什么在接口制定标准中说:一流的企业做标准,二流的企业...
-
[置顶]接口管理如何做?接口实现版本管理的意义和最佳方法
本文关于接口管理如何做?接口实现版本管理的意义和最佳方法。API版本管理的重要性不言而喻,对于API的设计者和使用者而言,版本管理都有着非常重要的意义。下面会从WEB API 版本管理的角度提供几种常...
-
[置顶]实现API管理系统的关键
下面将通过几个关键词的形式说明API管理的重要性和未来的实现方式。1.生命周期管理在整个API生命周期中更深入地集成所有工具将进一步提高生命周期循环的速度,而且更重要的是提供满足消费者需求的API。这...
-
我们的组件都是这个 html 文件返回后再渲染到
既然说到 SSR 可以解决 SEO 的问题,不难想到原理就是将我们的 html 在服务端渲染,合成完整的 html 文件再输出到浏览器。
另外 SSR 还适用以下场景
客户端的网络比较慢
客户端运行在老的或者直接没有 JavaScript 引擎上
vue 官网给出了 SSR 原理图片
对于这幅图的原理官网有详细解释,此类文章也很多,这里不赘述。
NUXT
我们进入正题说下 NUXT
Nuxt.js is a minimalistic framework for server-rendered Vue applications (inspired by Next.js)
作用就是在 node.js 上进一步封装,然后省去我们搭建服务端环境的步骤,只需要遵循这个库的一些规则就能轻松实现 SSR
安装流程
Nuxt.js 团队提供了 vue-cli 的初始化模板。前提安装 vue-cli,安装过的忽略此步
npm install -g vue-cli
完成后在需要创建的目录下执行以下
vue init nuxt/starter
cd
npm install
依赖安装完成后
npm run dev
打开浏览器 http://localhost:3000
说明:Nuxt.js 会监听 pages 目录下的改变,添加新 page 的时候不需要重启服务
目录结构
完成上面命令后你的目录结构会如下
Nuxt.js 给出了最简单的目录结构
|-- pages
|-- index.vue
|-- package.json
也就是说,至少需要一个 page 来作为展示页。
文件的路径建议都采用绝对路径,表格如下
例:怎么在 /pages/user/me.vue 引入一个 static 文件夹里的图片