vue服务器渲染nuxtjs
项目介绍
项目中使用用了vue + nuxt + axios + element-ui + vue-router(nuxt整合的),这是在学习服务器渲染框架nuxtjs过程中写的一个小demo；项目的接口是在rap上模拟的，这是接口。
demo
一、效果图
首屏渲染
路由跳转
二、项目构建步骤
1、vue-cli脚手架提供了一个starter模板
# 安装 vue-cli
npm install -g vue-cli
# 初始化项目
vue init nuxt-community/starter-template nuxt__study
# 安装依赖
cd nuxt__study
npm install # Or yarn
# 启动本地服务
npm run dev
2、目录结构及相应介绍
.
├── assets #资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript--就是需要webpack跟你编译的文件
│
├── components #不会像页面组件那样有 asyncData 方法的特性的组件--就是木偶组件（nuxt不会处理component组件里面的异步请求）
│ ├── AppLogo.vue
│
├── layouts #应用的布局组件--layout组件里面的3、引入element-ui
- 在plugins目录下新建一个element-ui.js文件
import Vue from 'vue'
import {Pagination} from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
export default () => {
Vue.use(Pagination);
}
- 然后再到nuxt.config.js文件中配置plugins
module.exports = {
...
plugins: ['~/plugins/element-ui']
}
然后我们就可以在全局愉快的耍Paginations组件了
4、引入axios
yarn add axios
这样我们就可以直接在使用了,在api/modules/news.js
import axios from 'axios'
export const getNewsList = (pageIndex = 1) => axios.get('http://rapapi.org/mockjsdata/35790/home/newsList', {params: {pageIndex}})
export const getNewsDetailById = (id) => axios.get('/api/home/newsDetail', {params: {id}})
处理跨越
使用过 vue 的同学，肯定知道对于项目中的跨域，vue-cli 对 webpack 中的 proxy 选项进行了一层封装。它暴露出来的是一个叫 proxyTable 的选项，是对 webpack 中的 proxy 和其三方插件 http-proxy-middleware 的一个整合。
而 Nuxt 中没有 proxyTable 这么一个配置项来进行跨域的配置。但是 Nuxt 官方提供了两个包来处理 axios 跨域问题
- @nuxtjs/axios
- @nuxtjs/proxy
首先安装
yarn add @nuxtjs/axios @nuxtjs/proxy --dev
然后再nuxt.config.js里面配置下
modules: [
'@nuxtjs/axios'
],
axios: {
proxy: true
},
proxy: {
'/api': {
target: 'http://rapapi.org/mockjsdata/35790',
pathRewrite: {'^/api': ''}
}
}
这样我们的请求就会通过代理服务器转发
三、文件目录介绍
layout–布局
在 layouts 目录中，default 是默认布局。我们可以修改默认布局也可以新建布局来使用。
在布局文件中 标签是我们要服务器渲染的区域。
比如创建个新的
// layouts/page.vue
如果要使page布局生效的话，我们需要早pages/index.vue配置layout（不配置就会默认是defalut布局）
// pages/index.vue
export default {
...
layout: 'page' // 默认是 'default'
};
pages–页面
- 页面，就是在pages目录下的 *.vue 文件，Nuxt.js 将目录结构配置为 vue-router 路由系统，所以我们可以直接通过文件名来访问到相应页面。
比如 pages/demo.vue 文件就可以通过 http://localhost:3000/demo 来进行访问。
注意：页面组件写法与常用 Vue 组件写法相同，但 Nuxt.js 还提供了一些特殊配置项来配置服务器渲染过程中的行为。具体有啥配置请看页面文档。 - 路由就是使 pages 目录能够直接访问的原因。Nuxt.js 非常巧妙地使用目录结构和文件名称将 vue-router 的各种用法都涵盖进去了。如动态路由、嵌套路由等。具体可参考文档。也可以看看demo的 pages 目录。
plugins–插件
插件的引入同element-ui
nuxt-config.js
这里偷偷贴个别人的详细注释 原文
nuxt-demo/
├── api/ //- 接口
│ └── index.js
├── assets/ //- 需要编译的静态资源，如 scss、less、stylus
│ ├── images/ //- 图片
│ └── styles/ //- 样式
├── build/ //- 自定义的一些编译配置
├── components/ //- 公用的组件
│ ├── dm-toast.vue //- 全局组件`dm-toast`
│ └── ...
├── data/ //- 静态数据
├── layouts/ //- 布局
│ ├── components/
│ │ ├── dm-footer.vue //- 公用header
│ │ └── dm-header.vue //- 公用footer
│ └── default.vue //- 默认布局
├── middleware/ //- 中间件
├── mixins/ //- Vue mixins
├── pages/ //- 页面
│ ├── index.vue //- 主页
│ └── ...
├── plugins/ //- vue插件
│ └── dm-tracker.js/ //- 挂载utils/tracker.js
├── static/ //- 无需编译处理的静态资源
│ └── images/ //- 这里存放了一些通过数据循环出来的图片
├── store/ //- vuex
│ └── index.js
├── utils/ //- 工具集
│ ├── index.js
│ ├── http.js //- axios
│ ├── tracker.js //- PV统计
│ └── tracker-uitl.js
├── vendor/ //- 第三方的库和插件
│ └── index.js
├── nuxt.config.js //- Nuxt.js配置文件
├── seo.config.js //- SEO相关配置文件
├── package-lock.json //- npm的版本锁
├── package.json
└── README.md
项目配置
Nuxt.js 默认的配置涵盖了大部分使用情形，可通过 nuxt.config.js 来覆盖默认的配置，下面相关配置根据实际项目驱动讲解，未涉及到的配置项可查阅 Nuxt.js 文档。
nuxt.config.js 总览
module.exports = {
//- Document Common
head: {
meta: [
title: '我是一个title',
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ name: 'renderer', content: 'webkit' },
{ name: 'applicable-device', content: 'pc' },
{ 'http-equiv': 'X-UA-Compatible', content: 'IE=edge,chrome=1' },
{ 'http-equiv': 'Cache-Control', content: 'no-transform' },
{ 'http-equiv': 'Cache-Control', content: 'no-siteapp' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '你的icon地址' }
],
//- 这里可以写一些每个页面需要额外引入的一些js代码，比如：百度统计
//- `alert(1)` 仅为代码示例
script: [{
type: 'text/javascript',
innerHTML: `alert(1)`
}],
//- __dangerouslyDisableSanitizers 设置