Part8-Nuxt+ElementUI开发官网

[项目参考地址]

http://codesohigh.com:8765/

一、Nuxt简介

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

通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。

我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。

Nuxt.js 预设了利用 Vue.js 开发**服务端渲染（SSR）**的应用所需要的各种配置。

1、流程图

2、SSR的优点

SSR也就是服务端渲染，也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端。

SSR有着更好的SEO、并且首屏加载速度更快等优点。

3、Nuxt安装与项目创建

根据 Nuxt官网 的安装教程进行项目创建。

过程中默认选用ElementUI框架。

4、项目运行

使用 npm run dev 进行项目运行。

二、Nuxt配置

1、配置IP与端口

开发中经常会遇到端口被占用或者指定IP的情况。我们需要在根目录下的package.json里对config项进行配置。比如现在我们想把IP配置成127.0.0.1，端口设置8080。

{
    ...,
    "config": {
        "nuxt": {
          "host": "127.0.0.1",
          "port": "8080"
        }
    }
}

原项目是基于3000端口的，配置后重新运行 npm run dev，即可运行在8080端口。

2、使用less

安装

$ npm install less [email protected] --save-dev

a. 全局样式文件

在static目录中创建 base.less 文件，用来写全局样式。然后打开 nuxt.config.js 并找到 css：

css: [
    'element-ui/lib/theme-chalk/index.css',
    '~static/base.less'	// 全局样式添加在此处
],

b. 组件内样式

<style scoped lang="less">
@headerBg: #545c64;
header {
  background: @headerBg;
  color: #fff;
  .el-icon-back {
    display: none;
  }
  .el-page-header__content {
    color: #fff;
  }
}
</style>

3、清除默认样式

打开 reset-css 的npm网站，随便拿一条链接：

https://unpkg.com/reset-css/reset.css

粘贴代码到 reset.css， 放到static目录下，并在 nuxt.config.js 引入：

head: {
    ...,
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', type: 'text/css', href: '/reset.css' }	// 引入
    ]
  },

同样，你也可以放到该文件中的css对象里，以数组项形式存在。

三、asyncData实现SSR

Nuxt可以在asyncData和created中做axios请求。但在created中做请求，渲染出来的数据不会出现在html中，导致无法实现SEO优化，而使用asyncData做请求，则html会被渲染出来，从而实现SSR。

需要先安装axios：

$ npm i @nuxtjs/axios @nuxtjs/proxy -D

组件中：

// 组件需要使用created进行请求，赋值也是传统的this.xxx = xxx;
async created() {
    let result = await NavApi();
    if (result.errCode === 0) {
      let nav = result.data;
      this.nav = nav;
    }
  },

页面中：

// 页面中使用asyncData可以实现SSR渲染，但赋值是直接 return {data}
async asyncData() {
    let result = await BannerApi();
    if (result.errCode === 0) {
      let banner = result.data;
      return { banner };
    }
  },

四、Nuxt解决跨域

在 nuxt.config.js 中添加：

module.exports = {
  ...,
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  axios: {
    proxy: true,
    prefix: '/',
    credentials: true
  },
  proxy: {
    '/api/': {
      target: 'http://127.0.0.1:9000/web', // 目标服务器ip
      pathRewrite: {
        '^/api/': '/',
        changeOrigin: true
      }
    }
  }
}

五、官网接口文档

有能力的同学建议自己写，需要调用的同学可以调用以下接口：

http://xiaoyaoji.cn/project/1kZva5IUKyP/share/1lb2RUvJYZ6