Vue处事器端渲染nuxt.js初探

开头照旧来一段空话： 年关快要，给各人拜个从前，愿各人年会都能抽大奖，来年行大运。

空话不多说，直接进正文。

项目情形：

前端vue项目， 必要将新增的几个路由页面做seo处理赏罚。

在调研 插件 prerender-spa-plugin后，发明无法满意 vuex 以及 plugins 等要求时，坚决选用了 nuxt.js做处事器渲染。

下面是在项目中清算的 文档 和 题目

nuxt.js 是一个基于 Vue.js 的通用应用框架

它预设了操作 Vue.js 开拓 处事端渲染(SSR, Server Side Render) 的应用所必要的各类设置，同时也可以一键天生静态站点。

值得一提的是，nuxt是基于node.js的，后端假如是其他说话时，是否思量到再加一层node.js的公道性。

链接地点： https://zh.nuxtjs.org/guide/installation

操作npx脚手架建设项目

链接地点： https://zh.nuxtjs.org/guide/installation

会提供以下选项

1. 在集成的处事器端框架之间举办选择: Express / Koa ...

2. 选择您喜好的UI框架: Bootstrap / Element UI ...

3. 选择你想要的Nuxt模式 (Universal or SPA) 平凡范例 / 单页应用

4. 添加 axios module 以轻松地将HTTP哀求发送到您的应用措施中。

5. 添加 EsLint 以在生涯期间码类型和错误搜查您的代码。

6. 添加 Prettier 以在生涯时名目化/美化您的代码。

留意：

1. 假如项目自带分支等git信息时， 必要将npx出产的目次内里潜匿的git 文件删除

由于npx天生文件时，默以为master 分支，相同于 gitmodule 子分支性子

2. 个中第3点，选择 Universal 时 才会默认输出静态页，也就是可以或许seo的，当选择spa时，则无法seo

可修改 nuxt.config.js 中的设置项 mode: 'Universal' 来界说范例

启动项目

呼吁： npm run dev 默认呼吁

这时会报错，说未指定ip 什么的，需设置项：

nuxt.config.js 中：

server: {  
// port: '3000', // 界说 输出端口 ，默以为3000  
host:'0.0.0.0' // 界说 输出 ip  
},  

留意：

在server 目次中国的index.js中 会读取 nuxt.config.js 中的设置项，当不存在时会赋值默认值

const {  
host = process.env.HOST || '127.0.0.1',  
port = process.env.PORT || 3000 // 默认设置前提下，修改此处无效 仍然为3000端口  
} = nuxt.options.server  

页面上的留意点有：

css 都默认加载到 页面上了;

处理赏罚方法有2种：

1. 在 nuxt.config.js 文件 header 设置 link 外链这些民众样式 (下面有详细声名)

2. 在 nuxt.config.js 文件 build 设置 中 自界说文件路径 以及hash值 (下面有详细声名)

项目目次布局

1. 资源目次 (assets)

用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。

2. 组件目次 (components)

用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展加强该目次下 Vue.js 组件，

即这些组件不会像页面组件那样有 asyncData 要领的特征。

3. 机关目次 (layouts) 该目次名为Nuxt.js保存的，不行变动。

用于组织应用的机关组件。

4. 中间件目次 (middleware)

目任命于存放应用的中间件

文件名的名称将成为中间件名称(middleware/auth.js将成为 auth 中间件)。

一此中间件吸取 context 作为第一个参数：

详细参考： https://zh.nuxtjs.org/guide/routing#中间件

5. 页脸孔录 (page) 该目次名为Nuxt.js保存的，不行变动。

用于组织应用的路由及视图。Nuxt.js 框架读取该目次下全部的 .vue 文件并自动天生对应的路由设置。

nuxt 会按照文件夹名称以及目次布局动态出产 router， 无需特殊设置。

6. 静态文件目次 (static)

用于存放应用的静态文件，此类文件不会被 Nuxt.js 挪用 Webpack 举办构建编译处理赏罚。

处事器启动的时辰，该目次下的文件会映射至应用的根路径 / 下。

一样平常用于 安排民众css，以及 js 文件， 可是假如不想这些css和js走根目次的话，

必要将这些css安排到 assets中，然后在 nuxt.config.js中 设置 build 选项 下面会详细声名

7. Store 目次

用于组织应用的 Vuex 状态树 文件

留意： 平凡的spa 项目中抛出一个实例工具即可， store为：

export default new Vuex.Store({  
actions,  
getters,  
})  

这里则必要抛出一个 实例函数工具：

const store = () => {  
return new Vuex.Store({  
state,  
getters,  
mutations,  
actions  
})  
}  
export default store  

8. nuxt.config.js

用于组织Nuxt.js 应用的本性化设置，以便包围默认设置。

9. package.json

省略...

别名

~ 或 @ // src目次

~~ 或 @@ // 根目次

默认环境下，src目次和根目次沟通

页面间路由的跳转

要在页面之间行使路由，提议行使 标签。

js 中如故可以行使 $router.push 等要领。

路由跳转时的页面间过渡结果

Nuxt.js 默认行使的过渡结果名称为 page。

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!