Nuxt简述

2018-12-07 admin
为什么使用nuxt.js?

vue单页面应用渲染是从服务器获取所需js,在客户端将其解析生成html挂载于 id为app的DOM元素上,这样会存在两大问题。

  1. 由于资源请求量大,造成网站首屏加载缓慢,不利于用户体验。

  2. 由于页面内容通过js插入,对于内容性网站来说,搜索引擎无法抓取网站内容,不利于SEO。 Nuxt.js 是一个基于Vue.js的通用应用框架,预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。可以将html在服务端渲染,合成完整的html文件再输出到浏览器。

除此之外,nuxt与vue还有一些其他方面的区别。

  1. 路由 nuxt按照 pages 文件夹的目录结构自动生成路由 vue需在 src/router/index.js 手动配置路由

  2. 入口页面 nuxt页面入口为 layouts/default.vue vue页面入口为 src/App.vue

  3. webpack配置 nuxt内置webpack,允许根据服务端需求,在 nuxt.config.js 中的build属性自定义构建webpack的配置,覆盖默认配置 vue关于webpack的配置存放在build文件夹下

下图为关于nuxt的简单概述

nuxt是关于服务端渲染的,如若想让组件在客户端渲染,可以使用 <no-ssr></no-ssr>将其包裹起来(该标签最多只能包含一个子组件/元素)。 这样在未获取到内容时,页面先采用 <divclass="no-ssr-placeholder"data-v-2a183b29=""></div>占位,然后将获取到的html覆盖该占位

安装sass
npm i node-sass sass-loader scss-loader --save-dev

vue文件中可直接使用

<style lang="scss" scoped></style>

sass文件如需解析,nuxt.config.js中配置css属性

css: [    {      src: '~/assets/style/reset.scss',      lang: 'scss'    }],
使用axios并跨域
  1. package.json npm install @nuxtjs/ proxy  nuxt 项目默认安装axios, 所以只需安装proxy即可
"dependencies": {    "@nuxtjs/axios": "^5.0.0",    "@nuxtjs/proxy": "^1.2.4",}
  1. nuxt.config.js
modules: [    '@nuxtjs/axios',    '@nuxtjs/proxy'  ],  proxy: {    '/api': {      target: 'http:www.xxx.com',      changeOrigin: true,      pathRewrite: {        '^/api ': ''      }    }  },
  1. index.vue
import axios from 'axios'export default {    data () {        return {          page: 0        }    },    async asyncData () {        let data = await axios.get('http://localhost:3000/api/admin/list')        return {          page: data.data.page        }  },}

注意采用 importaxiosfrom'axios' 方式引入axios时,接口参数前须加baseURL -> http://localhost:3000 如果采取 axios.get('/api/admin/game') 调用接口返回nuxt服务器错误,如下图

封装axios,解决每个请求前加baseURL plugins/axios.js

import * as axios from 'axios'let options = {}// The server-side needs a full url to worksif (process.server) {  options.baseURL = `http://${process.env.HOST || 'localhost'}:${process.env.PORT || 3000}`}export default axios.create(options)

index.vue

import axios from '~/plugins/axios'axios.get('/api/admin/game')
引入第三方插件(vue-awesome-swiper)
  1. npm install vue-awesome-swiper--save

  2. plugins文件夹下新建awesome-swiper.js

import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'Vue.use(VueAwesomeSwiper)
  1. nuxt.config.js引入css及js
css: [    'swiper/dist/css/swiper.css',],plugins: [    { src: "~/plugins/awesome-swiper.js", ssr: false },],
  1. 页面初始化
<div v-swiper:mySwiper="swiperOption">    <div class="swiper-wrapper">         <div class="swiper-slide" v-for="(banner, index) in banners" :key="index">            <img :src="banner">         </div>    </div>    <div class="swiper-pagination swiper-pagination-bullets"></div></div>export default {  data () {    return {      banners: [         require('~/assets/img/1540892214119.jpg'),        require('~/assets/img/1540892214119.jpg'),        require('~/assets/img/1540892214119.jpg')      ],      swiperOption: {        autoplay: true,        loop: true,        pagination: {          el: '.swiper-pagination',        },      }    }  },}
引入第三方模块(moment.js)
  1. npm install moment --save

  2. vue页面

import moment from 'moment'export default {    mounted() {      moment.locale('zh-cn') // moment.js 默认为英文,可通过此方法设置中文      console.log(moment().format('dddd')) // 星期三    },}

为避免每个页面都引入moment,执行 moment.locale('zh-cn'),可将其定义为全局方法

  1. 在plugins文件夹下新建common.js
import Vue from 'vue'import moment from 'moment'let common = {  install (Vue) {    Vue.prototype.$op = {      'moment': (date) => {        let newMoment = new moment(date)        newMoment.locale('zh-cn')        return newMoment      }    }  }}Vue.use(common)
  1. nuxt.config.js
plugins: [    { src: '~/plugins/common.js', ssr: false }, ],
  1. vue页面
this.$op.moment().format('dddd')
修改网站icon

icon.png文件存放在static文件夹下,nuxt.config.js中配置head属性

head: {    link: [      { rel: 'icon', type: 'image/png', href: '/icon.png' }    ]  },
关于中间件

中间件存放于middleware文件夹下,按使用场景可分为全局中间件和单页面中间件

//全局使用module.exports = {  router: {    middleware: '中间件名称'  }  }//页面单独使用export default {    middleware: '中间件名称'}

中间件执行流程顺序: nuxt.config.js -> 匹配布局 -> 匹配页面

PS.关于查看NUXT 官网插件demo时遇到的问题

按照index.vue通过 require('mini-toastr')引入miniToastr,运行程序报错如下

打印miniToastr发现为一Module对象,init挂载在其default属性上

所以修改引入方法为

miniToastr = require('mini-toastr').default

为什么需要require().default

When using ES6 imports (export default HeaderBar), the exported module is of the format {“default” : HeaderBar}. The import statement handles this assignment for you, however, you have to do the require("./mycomponent").default conversion yourself. The HMR interface code cannot use import as it doesn’t work inline.

If you want to avoid that, use module.exports instead of export default.

关于如上介绍,测试关于两种模块的导出方法 方式一:export default 新建test.js文件

export default {  test: function () {    console.log('test')  }}

vue页面导入

let obj = require('~/plugins/con.js').defaultobj.test() // 打印‘test’let obj = require('~/plugins/con.js')obj.default.test() // 打印‘test’

此时 require('~/plugins/con.js') 打印

方式二:module.exports

const obj = {  test: function () {    console.log('test')  }}module.exports = obj
let obj = require('~/plugins/con.js')obj.test() // 打印‘test’

此时 require('~/plugins/con.js') 打印为

最后:感谢 点思的May小姐姐提供的干货文章~

识别二维码,关注我们

点思成今

研发服务|顾问服务|测试服务

原文链接:https://mp.weixin.qq.com/s/09X1JK_4Zt1DV8dR8jxtUw

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-47532.html

文章标题:Nuxt简述

相关文章
nuxt npm run generate静态化图片显示不出来
nuxt可以生成静态HTML页面,但是图片路径会有问题,这都是由于webpack的设置造成的。只需要修改一下webpack的配置即可。 const util = require(&#x27;util&#x27;) const fs = re...
2018-08-01
详解Nuxt.js Vue服务端渲染摸索
本文采用nuxt进行服务端渲染https://zh.nuxtjs.org/ Nuxt.js 十分简单易用。一个简单的项目只需将 nuxt 添加为依赖组件即可。 Vue因其简单易懂的API、高效的数据绑定和灵活的组件系统,受到很多前端开发人员...
2018-02-11
Nuxt --- 也来说说vue服务端渲染
Nuxt 随着现在vue和react的流行,许多网站都做成了SPA,确实提升了用户体验,但SPA也有两个弱点,就是SEO和首屏渲染速度。为了解决单页应用的痛点,基于vue和react的服务端渲染应运而生。由于公司的框架采用的是vue,所以就...
2018-06-20
Nuxt.js 基础入门教程
Vue 开发一个单页面应用,相信很多前端工程师都已经学会了,但是单页面应用有一个致命的缺点,就是 SEO 极不友好。除非,vue 能在服务端渲染(ssr)并直接返回已经渲染好的页面,而并非只是一个单纯的 &lt;div id=&quot;a...
2018-02-05
如何在nuxt中添加proxyTable代理
背景 在本地开发vue项目的时候,当你习惯了proxyTable解决本地跨域的问题,切换到nuxt的时候,你会发现,添加了proxyTable设置并没有什么作用,那是因为你是用的vue脚手架生成的vue项目,它里面已经帮你写好了相关的pro...
2018-08-10
Nuxt.js的踩坑日记(常见问题汇总)
本文会不定期更新在nuxt.js中遇到的问题进行汇总。转发请注明出处,尊重作者,谢谢! 在Nuxt的官方文档中,中文文档和英文文档都存在着不小的差异。 1.路径匹配问题: In Nuxt.js, the path match is as ...
2018-04-22
使用 nuxt+iview-admin+koa2 开发项目
公司最近在做的一个项目,依然是采用熟悉的vue开发,数据平台因为其数据量大的特点,采用传统的spa模式,首页加载时间很长,而SSR这种方式对于首屏的加载时间优化显而易见,同时还可以方便的进行SEO。因此借机学习Nuxt.js框架(文档详细,...
2018-06-21
使用Nuxt.js简单的服务器端渲染,路由和页面转换CSS-Tricks
有点罗嗦的标题,是吧?什么是服务器端渲染?它与路由和页面转换有什么关系?什么是Nuxt.js?有趣的是,尽管听起来很复杂,但使用Nuxt.js并探索其好处并不困难。让我们开始吧! 服务器端渲染 最近你可能听说过人们在谈论服务器端渲染。我们研...
2018-06-20
使用element UI+nuxt+vue项目踩过的坑
公司要做一个后台管理的框架,基于之前用过的技术,本来打算直接用vue+element的,但是为了配合集成微服务,又加了Nuxt.js,首先了解下nuxt是什么,我们从官网可以看到。 Nuxt.js 是一个基于 Vue.js 的通用应用框架。...
2018-05-18
基于nuxt.js的vue服务端渲染个人博客
vue服务端渲染博客,基于nuxt 安装 git clone git@github.com:Hzy0913&#x2F;my-blog.git 安装包依赖 npm install 运行 运行发开环境 npm run dev 本地访问htt...
2018-05-23
回到顶部