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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://gb.akanote.cn/cms/part8nuxt+elementui-kai-fa-guan-wang.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.