Nuxt 开发经验分享
Nuxt 介绍
简单来说,Nuxt.js 是一个基于Vue的通用应用框架,采用SSR(Server Side Rendering 服务端渲染);目的是为了解决单页面应用的 SEO 问题;vue单页面应用渲染是从服务器获取所需js,在客户端将其解析生成HTML挂载于id为app的DOM元素上,这样会存在两个大问题:
1.由于页面内容是通过js插入,对于内容性网站来说,搜索引擎无法抓取网站内容,也就是用户搜不到此网站的相关信息,不利于SEO;
2.资源请求量大,造成网站首屏加载缓慢,不利于用户体验
而我们公司做的网站刚好是内容性质的网站 爱德媒BlockADM~~~
Nuxt 安装
Nuxt.js 团队创建了脚手架工具 create-nuxt-app
$ npx create-nuxt-app <项目名>
前提是已经安装了vue脚手架搭建项目的环境,比如npm; npx在NPM版本5.2.0就已经默认安装了;在安装的过程中,它会让你进行一些选择,在集成的服务端框架之间进行选择,我的项目是选择None(Nuxt默认服务器);选择喜欢的ui框架 根据实际项目选择;之后的我基本都是选择默认的了;安装完成之后 进入项目 npm run dev 启动项目
$ cd <project-name>
$ npm run dev
Nuxt 项目目录结构
[外链图片转存失败(img-XXKzOqRg-1565580741954)(https://gitee.com/lslyiduo/tupian/raw/master/nuxt 目录结构.jpg)]
实战经验
路由
nuxt按照 pages 文件夹的目录结构自动生成路由(vue需在 src/router/index.js 手动配置路由)
`
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
`
Nuxt.js 生成对应的路由配置表为:
`
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'
}
]
}
`
引入本地css文件以及js插件
`
export default {
mode: 'universal',
head: {
title: '爱德媒BlockADM-价值共享网络' || '',
meta: [
{ charset: 'utf-8' },
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/logo_icon.png' }
]
loading: { color: '#fff' },
/* ** 全局样式引入 */
css: [
'element-ui/lib/theme-chalk/index.css',
'~static/css/common.css',
],
/*** 全局js */
plugins: [
{ src: '~/plugins/main_client.js', mode: 'client' },
{ src: '~/plugins/main.js', mode: 'server' },
'~/plugins/axios'
],
}
`
项目的全局css是放在static/css/common.css中 ,项目中用的js全局js,分为两个文件, 一个是在服务端渲染的,一个是在客户端渲染的,mode分别都不一样,这里是我踩过的坑 ,不过前端大部分的js都是在客户端;第二点 axios.js是自己封装了原本axios的文件,可以把它当作全局的js文件,所以把它挡在plugins中,然后再配置文件中引入
请求
Nuxt.js扩展了Vue.js,增加了一个叫 asycData 的方法,使得我们可以再设置组件的数据之前能异步获取或者处理数据,使用方法:
** 单个请求**
`
async asyncData (context) {
let {data} = await context.$axios.get(`news/app/visitor/newsFlash/get`,{params: {id:context.query.id}});
return {
content:data.data.content,
newsFlashTime:data.data.createTime,
newsFlashTitle:data.data.title,
}
},
`
其中content,newsFlashTime等 是自己定义的data中的数据
**并发请求**
`
async asyncData (context) {
console.log(context);
let [data,dataTwo,dataThree] = await Promise.all([
context.$axios.get("user/app/visitor/getMemberInfoByUserId",{params: {userId:context.query.id}}),
context.$axios.post("news/web/visitor/newsArticle/page",{
pageNum: 1,
pageSize: 3,
sortType: 2
}),
context.$axios.post("news/web/visitor/newsArticle/page",{
pageNum: 1,
pageSize: 6,
memberId: context.query.id
})
]);
return {
personDate:data.data.data,
allViewDate:dataTwo.data.data.records,
articleDate:dataThree.data.data.records
}
},
`
重点:context 来了解该对象的所有属性和方法。
先整理到这里吧 目前所遇到的问题是这些~~~