mission6-官网项目

官网项目要求SEO,需要vue支持服务端渲染,所以框架选择了Nuxt

本次官网项目中体会到的Nuxt很方便的功能有:

服务端渲染

框架自带的服务端渲染功能,省去了自行调配的时间,只需简单的两行命令即可完成服务的启动,命令如下:

1
2
npm run build
npm run start

强大的路由功能

pages文件夹下的文件默认即路由配置(以下内容摘自官网):

假设 pages 的目录结构如下:

1
2
3
4
5
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

那么,Nuxt.js 自动生成的路由配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'user',
path: '/user',
component: 'pages/user/index.vue'
},
{
name: 'user-one',
path: '/user/one',
component: 'pages/user/one.vue'
}
]
}

异步数据

页面中异步的数据

页面中从接口获取的数据,需要在服务端获取并渲染时,直接使用asyncData方法即可,使用方法如下(详情见asyncdata-方法):

1
2
3
4
5
6
7
8
import axios from 'axios'

export default {
async asyncData ({ params }) {
let { data } = await axios.get(`https://my-api/posts/${params.id}`)
return { title: data.title }
}
}

组件中异步的数据

components中的文件不支持asyncData方法,解决方式:

方案一:结合nuxtvuex扩展的serverInit来初始化数据,具体使用方式如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const store = () => new Vuex.Store({
state: {
data: null
},
mutations: {
SET_DATA(state, data) {
state.data = data
}
},
actions: {
async nuxtServerInit ({ commit }, { req }) {
let { data } = await axios.get(`https://my-api/posts/${params.id}`)
commit('SET_DATA', data)
}
}
})
方案二:调用fetch方法,填充应用的状态树(vuex),具体使用方式如下:
1
2
3
4
5
6
export default {
async fetch ({ store, params }) {
let { data } = await axios.get('http://my-api/stars')
store.commit('setStars', data)
}
}

HTML头部标签管理

这里nuxt集合了vue-meta插件,详细使用方式见vue-meta

例如:

1
2
3
4
5
6
7
export default {
head () {
return {
title: '官网'
}
}
}

layout文件

nuxt可以制作统一布局文件,布局大体一样的页面可以制作layout文件使用。使用方式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// layouts/page.vue
<template>
<div>
<!-- morecode -->

<nuxt/> <!-- 页面视图区域 -->

<!-- morecode -->
</div>
</template>

// pages/simplePage.vue
<script>
export default {
layout: 'page'
}
</script>

配置项修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// plugins/swiper.js
// 全局插件注入
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'

Vue.use(VueAwesomeSwiper)

// nuxt.config.js
module.exports = {
loading: false, // 取消loading项
// 全局加载element-ui、swiper样式
css: [
'element-ui/lib/theme-chalk/index.css',
'swiper/dist/css/swiper.css',
],
// 全局加载element-ui、swiper组件
plugins: [
'@/plugins/element-ui',
{ src: '~/plugins/swiper.js', ssr: false }
],
build: {
// 打包css文件
extractCSS: {
allChunks: true
},
// 使用polyfill
vendor: ['babel-polyfill', 'eventsource-polyfill']
}
}
坚持原创技术分享,您的支持将鼓励我继续创作!