[项目参考地址]
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 less-loader@7.0.0 --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
