1、SSR
首先说下 SSR，最近很热的词，意为 Server Side Rendering（服务端渲染），目的是为了解决单页面应用的 SEO 的问题，对于一般网站影响不大，但是对于论坛类，内容类网站来说是致命的，搜索引擎无法抓取页面相关内容，也就是用户搜不到此网站的相关信息。
我们看看SSR服务端渲染的浏览器返回的是什么
image.png
我们再来看看SPA返回的是什么
image.png
对比两者可以看到基于SSR渲染 你是可以看到网页所有的内容以及文字，而因vue是单页面应用，只能看到app的根节点，这对于seo抓取是致命的
2、Nuxt
回归正题
Nuxt.js is a minimalistic framework for server-rendered Vue applications (inspired by Next.js)
作用就是在 node.js 上进一步封装，然后省去我们搭建服务端环境的步骤，只需要遵循这个库的一些规则就能轻松实现 SSR
2.1安装流程
Nuxt.js 团队提供了 vue-cli 的初始化模板。前提安装 vue-cli，安装过的忽略此步
npm install -g vue-cli
完成后在需要创建的目录下执行以下
vue init nuxt/starter <project-name>
cd <project-name>
npm install
依赖安装完成后
npm run dev
打开浏览器 http://localhost:3000
更换端口
在文件package.json添加
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "你的端口"
}
},
2.2目录结构
image.png
Nuxt.js 给出了最简单的目录结构
|-- pages
|-- index.vue
|-- package.json
也就是说，至少需要一个 page 来作为展示页。
文件的路径建议都采用绝对路径，表格如下
456.jpg
例：怎么在 /pages/user/me.vue 引入一个 static 文件夹里的图片
<img src="~static/img/logo.png" alt="Logo"/>
2.3数据请求配置代理
因Nuxt目录结构 与vue项目依赖以及模块几乎不一样 这样无法直接在config-index.js文件中配置的
安装依赖
利用axios 以及proxy 模块
npm i @nuxtjs/axios @nuxtjs/proxy -D
找到nuxt.config.js文件
module.exports添加两个属性
modules : [
'@nuxtjs/axios',
'@nuxtjs/proxy'
],
proxy : [
[
'/api',
{
target : 'http://localhost:3033', //你的接口地址
pathRewrite : {'^/api' : '/'}
}
]
]
如 你需要访问http://localhost:3033/getlist 接口
那么在axios.get('/api/getlist')即可；
2.4配置路由
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
基础路由
假设 pages 的目录结构如下：
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
那么，Nuxt.js 自动生成的路由配置如下：
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'user',
path: '/user',
component: 'pages/user/index.vue'
},
{
name: 'user-one',
path: '/user/one',
component: 'pages/user/one.vue'
}
]
}
动态路由
在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。
以下目录结构：
pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue
Nuxt.js 生成对应的路由配置表为：
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'users-id',
path: '/users/:id?',
component: 'pages/users/_id.vue'
},
{
name: 'slug',
path: '/:slug',
component: 'pages/_slug/index.vue'
},
{
name: 'slug-comments',
path: '/:slug/comments',
component: 'pages/_slug/comments.vue'
}
]
}
你会发现名称为 users-id 的路由路径带有 :id? 参数，表示该路由是可选的。如果你想将它设置为必选的路由，需要在 users/_id 目录内创建一个 index.vue 文件。
2.5Nuxt使用element-ui
安装element-ui 或者其他的
npm i element-ui -S
在文件夹下plugins新建文件element-ui.js
//plugins/element-ui.js
import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)
在文件nuxt.config.js添加代码
vender:[
'element-ui'
],
babel : {
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
},
'transform-async-to-generator',
'transform-runtime'
]]],
comments: true
},
plugins: [
{ src: '~plugins/element-ui', ssr: true }
],
css : ['element-ui/lib/theme-chalk/index.css'] //css的路径我吃了大亏注意element-ui的版本
2.6Nuxt使用axios全局拦截
在文件夹下plugins新建文件axios.js
import axios from 'axios';
axios.interceptors.request.use(res=>{
//...
return res
})
在文件nuxt.config.js添加代码
plugins: [
{ src: '~plugins/axios', ssr: true }
],
3Nuxt之layout页面
我们知道在pages中创建的文件就是相对应的路由，但是所有的路由都会在
layouts/default.vue中展示，这样就会有点小问题，所有的页面的布局都会一致
比如我们美团网
image.png
里面的详情都机会是一直的布局
header一致 main 、footer一直这样可以都通过default来布局
但是当登录页和注册页，就不能用统一的布局，因为header不一致，footer不一致
我们可以在layouts文件夹中创建文件名字 自定义
然后我们在pages中的路由vue文件中指定使用该layouts
例如 我们创建的layouts中名字为login.vue
//pages 中的路由文件
<script>
export default{
layout : login //改名需要和刚创建的保持一致
}
</script>
网友评论