Vue服务器渲染Nuxt学习笔记

// vue-cli 创建nuxt模板项目
$ vue init nuxt-community/starter-template <project-name>
// 安装依赖项
$ cd <project-name>
$ npm install
// 编译并启动服务
$ npm run dev
// 打开 http://localhost:3000

<i class="fa fa-address-book" aria-hidden="true"></i>
<img src="/UploadFiles/2021-04-02/logo.png">

这里需要将 font-awesome 的 css 变为全局 css，避免每个用到的页面中都 import 字体库的css。所以我们在 nuxt.config.js 中添加如下配置。


module.exports = {
 ...
 css: [
  '~/assets/font-awesome/css/font-awesome.min.css'
 ],
 ...
}




组件定义
组件存放在 components 文件夹下，这个我们讲目录的时候提到过。组件的用法和常用 vue 组件用法一致。 定义组件 Avatar，然后在 Page 页面中使用。


<template>
 <avatar/>
</template>
<script>
import avatar from '~/components/Avatar'
export default {
  ...
  components: {
    avatar
  }
};
</script>



布局
在 layouts 目录中，default 是默认布局。我们可以修改默认布局也可以新建布局来使用。


在布局文件中 </nuxt> 标签是我们要服务器渲染的区域。


下面我们来创建个布局玩玩。


// layouts/page.vue
<template>
<div>
  <mt-header fixed title="标题2"></mt-header>
  <nuxt/>
</div>
</template>


然后我们来使用布局，在 pages 页面中配置 layout 选项（如果不配置默认就是 default）。


export default {
  ...
  layout: 'page' // 默认是 'default'
};



中间件
所谓中间件，就是在两个页面跳转之间执行的行为。比如我定义一个中间件 add.js


export default function ({ store }) {
  store.commit('increment')
}



然后在 nuxt.config.js 中进行配置：


module.exports = {
 ...
 router: {
  middleware: 'add'
 },
 ...
}




这样，在每次页面跳转的时候都会执行一次中间件方法了。当然，也可以单独定义某个页面的中间件，具体看官网啦~
页面
页面，就是在pages目录下的 *.vue 文件，Nuxt.js 将目录结构配置为 vue-router 路由系统，所以我们可以直接通过文件名来访问到相应页面（先不提特殊路由）。


比如 pages/app.vue 文件就可以通过 http://localhost:3000/app 来进行访问。


注意：页面组件写法与常用 Vue 组件写法相同，但 Nuxt.js 还提供了一些特殊配置项来配置服务器渲染过程中的行为。具体有啥配置请看 页面文档。
路由
路由就是使 pages 目录能够直接访问的原因。Nuxt.js 非常巧妙地使用目录结构和文件名称将 vue-router 的各种用法都涵盖进去了。如动态路由、嵌套路由等。具体可参考文档。也可以看看demo的 pages 目录。
插件
对于前端项目，插件的使用当然是必不可少的。官网上对这方面讲的很清楚。我贴一下 demo 中的用法。这里用的是 mint-ui 库。


// plugins/mint-ui.js
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)





// nuxt.config.js
module.exports = {
 build: {
  vendor: ['mint-ui']
 },
 plugins: [
  '~plugins/mint-ui'
 ]
}



这样就可以使用第三方库 mint-ui 啦！


<template>
 <div>
  <mt-navbar v-model="selected">
    <mt-tab-item id="1">选项一</mt-tab-item>
    <mt-tab-item id="2">选项二</mt-tab-item>
    <mt-tab-item id="3">选项三</mt-tab-item>
  </mt-navbar>

  <!-- tab-container -->
  <mt-tab-container v-model="selected">
    <mt-tab-container-item id="1">
      <mt-cell v-for="n in 10" :key="n" :title="'内容 ' + n" />
    </mt-tab-container-item>
    <mt-tab-container-item id="2">
      <mt-cell v-for="n in 4" :key="n" :title="'测试 ' + n" />
    </mt-tab-container-item>
    <mt-tab-container-item id="3">
      <mt-cell v-for="n in 6" :key="n" :title="'选项 ' + n" />
    </mt-tab-container-item>
  </mt-tab-container>
 </div>
</template>




vuex
对于 vuex，用法有两种：普通方式和模块方式，用法和我们常用的 vuex 一样。我的demo中是直接复制官网的代码。


需要注意的是，vuex 的数据会存在context对象中，我们可以通过context对象获取状态数据。
发布


发布有两种方式服务器应用渲染部署和静态部署，发布方式看这里
最后


去看 Nuxt.js 的 API，会发现 Nuxt.js 真的是高度封装。对于 Nuxt.js 生成的模板项目，只有一些必要配置是需要我们去完成的。Nuxt.js 可以说是一个非常友好而强大的 SSR 框架了。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。