> For the complete documentation index, see [llms.txt](https://gb.akanote.cn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gb.akanote.cn/cms/part8nuxt+elementui-kai-fa-guan-wang.md).

# 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、流程图

[![image-20211214163049587](https://tva1.sinaimg.cn/large/008i3skNgy1gxdg1cjf5zj30u00wk40v.jpg)](https://tva1.sinaimg.cn/large/008i3skNgy1gxdg1cjf5zj30u00wk40v.jpg)

### 2、SSR的优点

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

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

### 3、Nuxt安装与项目创建

根据 [Nuxt官网](https://www.nuxtjs.cn/guide/installation) 的安装教程进行项目创建。

> 过程中默认选用ElementUI框架。

### 4、项目运行

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

## 二、Nuxt配置

### 1、配置IP与端口

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

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

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

### 2、使用less

安装

```shell
$ npm install less less-loader@7.0.0 --save-dev
```

#### a. 全局样式文件

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

```js
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://www.npmjs.com/package/reset-css)，随便拿一条链接：

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

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

```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：

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

组件中：

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

页面中：

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

## 四、Nuxt解决跨域

在 `nuxt.config.js` 中添加：

```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>