【vue】 vue使用服务端渲染，nuxt实现vue的服务端渲染

 

 

# 五、vue实现服务端渲染

1、[网址](https://ssr.vuejs.org/zh/)

**2、安装**

```javascript
npm install vue vue-server-renderer --save 
```

**3、基本demo**

```javascript
// 第 1 步：创建一个 Vue 实例
const Vue = require('vue')
const app = express('express')()
const app = new Vue({
  template: `<div>Hello World</div>`
})

// 第 2 步：创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()

 

//第 4 步
app.get("/",(req,res)=>{

    // 第 3 步：将 Vue 实例渲染为 HTML
    renderer.renderToString(app, (err, html) => {
      if (err) throw err
      res.end(html);
      // => <div data-server-rendered="true">Hello World</div>
    })
})

app.listen("3000")
```

# 六、nuxt的基本使用

**1、npx**

在npm5.2.0引入了一条命令(npx)，引入这个命令的目的是为了提升开发者使用包内提供

的命令行工具的体验



**2、安装nuxt**

```javascript
npx  create-nuxt-app <项目名称>  
yarn create nuxt-app <项目名称> 
```

**3、构建项目**

```javascript
1、选择使用什么样的后端框架(express)

2、选择使用的UI框架(element-ui)

3、选择single Page App (单页面应用)

4、是否安装axios (yes)

5、是否使用eslint

6、Prettier 以在保存时格式化/美化您的代码。

7、作者

8、使用哪种方式安装
```

![img](D:/youdaoyun/qq320965F40E51692C4B12A8502D4B1B9D/f5659faaff1446b7968352cfc27d0eb7/clipboard.png)

# 七、nuxt目录结构

> 1、assets:资源文件。放置需要经过 webpack 打包处理的资源文件，如 scss，图片，字体等
>
> 2、components:组件。存放页面中可复用的组件
>
> 3、layouts:组织应用的布局组件。注意该目录名称由nuxt保留。不可修改。如果需要在普通
>
> 页   面中使用下级路由，则需要在页面中添加 <nuxt-child />
>
> 4、middleware：中间件。用来存放中间件
>
> 5、pages:页面。一个vue文件相当于一个页面。index.vue相当于根页面
>
> 1. 若需要二级页面，则添加文件夹即可。
> 2. 如果页面的名称类似于 _id.vue （以 _ 开头），则为动态路由页面，_ 后为匹配的变量（params）。
> 3. 若变量是必须的，则在文件夹下建立空文件 index.vue
>
> 
>
> 6、plugin:插件。用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。**需要注意的是，在任何 Vue 组件的**[**生命周期**](https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram)**内， 只有** **beforeCreate** **和** **created** **这两个钩子方法会在** ***客户端和服务端均被调用*****。其他钩子方法仅在客户端被调用。**
>
> 7、static: 静态文件。放置不需要经过 webpack 打包的静态资源。如一些 js, css 库。
>
> 8、store: 状态管理。
>
> 9、nuxt.config.js: nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置





# 八、嵌套路由

![img](D:/youdaoyun/qq320965F40E51692C4B12A8502D4B1B9D/5c4dd31e148f47e6b671ccbe94494d04/clipboard.png)

> 1、需要创建一个单文件组件(users.vue)
>
> 2、同时需要创建一个同名的文件夹(users)
>
> 3、文件夹中的东西就是它嵌套的文件



# 九、路由的基本配置

> nuxt没有真正的路由配置组件，所有的路由都是按照路径进行匹配的。
>
> 
>
> 1、假设我们在pages中定义了一个home文件夹 home文件夹中有一个index.vue文件
>
> 2、如果我们想跳转到home这个页面。则只需要通过下面这行代码就可以进行跳转
>
> ​     `<nuxt-link to="/home">home<nuxt-link> `
>
> 3、建议TabBar的一级页面在layouts中进行配置



# 十、动态路由

> 在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录
>
> 创建商品列表页面(pages/goods/index.vue)

```vue
<template>
    <div>
        <ul>
            <li v-for="item in goodsList">
                <nuxt-link 
                    :to="'/details/'+item.id"
                >{{item.name}}</nuxt-link>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                goodsList:[
                        {
                            goodsId:1,
                            goodsName:"香蕉"
                        }
                    ]
                }
        }
    }
</script>

```

> 创建详情页面(pages/details/_id.vue)  :意思为通过id来接收传递过来的数据

```vue
<template>
    <div>
        <h2>商品id为：{{$route.params.id}}</h2>
    </div>
</template>
```

> 如果需要传递多个值得时候(pages/details/_id/_name.vue);

# 十一、路由嵌套

> 创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件
>
> 1、创建一个单文件组件user.vue(pages/user.vue);
>
> 2、创建一个同名的文件夹user(pages/user)
>
> 3、user文件夹中创建的文件就是嵌套的文件
>
> 
>
> 注意：别忘记了在父组件中加<nuxt/>来显示子组件的内容



# 十二、过渡动效

> Nuxt.js 使用 Vue.js 的<transition>组件来实现路由切换时的过渡动效。
>
> 
>
> 1、如果需要全部页面都拥有动画效果，则需要创建一个所有路由公用的css文件
>
> 2、在assets文件中创建router.css文件(a)



# 十三、异步数据

> asyncData方法，可以在设置组件的数据之前能异步获取或处理数据。
>
> 
>
> asyncData会在每次组件加载之前被调用。它可以在服务器或路由更新之前被调用。在这个方法被调用的时候，第一个参数被设定为当前页面的[上下文对象](https://zh.nuxtjs.org/api#上下文对象)，你可以利用 asyncData方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。
>
> 
>
> Nuxt.js 提供了几种不同的方法来使用 asyncData 方法，
>
> 1. 返回一个 Promise, nuxt.js会等待该Promise被解析之后才会设置组件的数据，从而渲染组件.
> 2. 使用 [async 或 await](https://github.com/lukehoban/ecmascript-asyncawait) 

```javascript
export default {
  async asyncData ({ params }) {
    let { data } = await axios.get(`https://my-api/posts/${params.id}`)
    return { title: data.title }
  }
}
```

> 如果组件的数据不需要异步获取或处理，可以直接返回指定的字面对象作为组件的数据

```javascript
export default {
  data () {
    return { foo: 'bar' }
  }
}
```

# 十四、vuex

> Nuxt.js 会找到应用根目录下的 store 目录,进行以下配置
>
> 1. 引用 vuex 模块
> 2. 将 vuex 模块 加到 vendors 构建配置中去
> 3. 设置 Vue 根实例的 store 配置项

```javascript
import Vue from "vue";
import Vuex from "Vuex";
Vue.use(Vuex);

const store = ()=> new Vuex.Store({
    state:{
        n:0
    },
    mutations:{
        addNum(state,params){
            state.n++;
        }
    }
})

export default store;
```

> 模块的方式  store/todo.js

```javascript
export const state = ()=>({
    n:0
})

export const mutations = ()=>({
    addNum(state,params){
        state.n++;
    }
})
```



# 十五、fetch

fetch 方法会在渲染页面前被调用，作用是填充状态树 (store) 数据，与 asyncData 方法类似，不同的是它不会设置组件的数据。

```javascript
export default{
    async fetch({store,params}){
        let data = await axios.get("http://www.baidu.com");
        store.commit("handle",data.data);
    }
}
```



# 十六、跨域配置

> NUXT在进行数据请求的时候通过nuxt.config.js进行设置配置跨域

```javascript
 modules: ['@nuxtjs/axios'],
  axios: {
    proxy: true,
    prefix: '/api', 
    credentials: true,
  },
   //加一个proxy属性进行跨域
  proxy: {
    '/api/douban': {
      target: 'https://api.douban.com/v2/book/search',
      changeOrigin: true,
      pathRewrite: { '^/api': '' },
    },
  },
```