nuxt 加快编译速度

nuxt嘴上说很快,但是其实热编译是很慢的,很墨迹,和vue cli这种对比起来,差了很多,经常改动一点东西想要看效果,编译要等一段时间。今天无聊去看了下nuxt模块库,看到这么一个插件:nuxt-build-optimisations有点牛皮,使用后,热编译速度肉眼可见的提升,官方的介绍说可以提升2-5倍的速度,实际测试中,冷启动速度没太大感觉,但是热编译速度确实是很满意。特此推荐!用法yarn add nuxt-build-optimisations安装完毕去nuxt.config.js里面激活模块export default { buildModules: ['nuxt-bui...

nuxt 加快编译速度

nuxt 一文读懂@nuxtjs/axios的用法

在nuxt中,有一个专门的axios版本:@nuxtjs/axios;但是由于nuxt的文档,或者说是资料不是很齐全(零散),初步了解后觉得这个插件并不是很方便,很多时候,我们都是模块化的axios写法,在使用@nuxtjs/axios时,会发现有点束手束脚,于是转而放弃使用,而是单独引入axios,然后一顿操作。当我们单独封装axios的时候,有没有这种想法:报错了能不能跳转到nuxt的错误页面?;但是实现时发现,除了在asyncData这些方法里面可以解构到error对象然后利用它跳转,好像在单独的一个js文件里面,没办法直接跳转。但是,如果我们使用@nuxtjs/axios,那么我...

nuxt 一文读懂@nuxtjs/axios的用法

nuxt mixins全局混入

全局混入我考虑到可能会有多个混入,如果把混入的内容全部写在同一个js文件里面,那是非常混乱的,所以我采用模块化的写法,其实就是导入导出而已,一种方式。具体用法和全局过滤器一样,创建插件,激活插件。在plugins目录下创建mixins文件夹,mixins里面创建一个index.js作为入口文件,然后再创建一个modules目录,用来存放mixin混入的方法。假设我们在modules/test.js下写了一个混入export default { methods: { test(){ console.log("我是一个全局混入方法"); }...

2195 0 0

nuxt filters全局过滤器

nuxt 不能像传统的vue那样直接在main.js文件中添加全局过滤器,我们需要写一个插件,并在nuxt.config.js中启用在plugins目录下创建一个filters.js文件夹filters.jsimport Vue from "vue"; // 无内容占位符 Vue.filter("placeholder", (value) => { if (!value && value !== 0) return "--"; return value; });nuxt.config.jsexpo...

解决报错:Invalid component name layouts default.vue . Component names should conform to valid custom element name in html5 specification.

这是一个奇葩的报错,因为他居然是因为模板vue文件没有设置name导致的。也就是说,如果要解决这个问题,在提示的模板文件上设置name属性即可。layouts/default.vueexport default { name: "default", }问题解决。

解决报错:Invalid component name   layouts default.vue . Component names should conform to valid custom element name in html5 specification.

解决报错:The client-side rendered virtual DOM tree is not matching server-rendered content

出现这个问题,往往是因为浏览器中的虚拟dom树和服务端dom不一致产生的,为什么会不同,举个例子:我们v-if判断客户端是否存在localstorage.getItem("token"),但实际上服务端永远不可能拿到,因为localstorage是浏览器客户端才有的东西。那么服务端渲染的dom永远没有,你浏览器上又有了,那不是就产生冲突了。于是就会报这个错,但是并不会影响页面的渲染。解决的办法就是将这个v-if放到客户端才进行运行,nuxt提供了一个自定义标签:client-only表示在这个标签内的内容,只有有客户端才会渲染运行,这样就可以让虚拟dom保持一致,且不...

2166 1 0
解决报错:The client-side rendered virtual DOM tree is not matching server-rendered content

nuxt 路由鉴权

由于nuxt无法配置路由信息,所以我们常用的配置路由meta信息的路子就走不通了。nuxt官方也有对应的解决方案,大概流程如下:创建一个路由中间件auth,用于判断在对应的页面使用对应的路由中间件auth当用户进入该页面时,auth进行判断:重定向还是报错那么中间件怎么写就需要了解一下了。有token才允许进入页面在middleware目录创建一个auth.js文件auth.js:export default function ({ store, error }) { if (!store.state.user.token) { error({ message: ...

nuxt vuex持久化

老规矩,还是使用vue-peristedstateyarn add vue-peristedstate --dev安装完毕,在plugins目录创建一个localStorage.js文件localStorage.js:import createPersistedState from 'vuex-persistedstate' export default ({ store }) => { createPersistedState({ storage: localStorage, reducer(val) { return { // ...

解决nuxt使用rem适配样式第一次加载闪烁的问题 amfe-flexible

在使用vant框架的时候,一般都是使用rem自动适配,这个东西有好有坏,具体就不细说,我们这次处理的问题就是使用了rem适配,他样式第一次加载闪烁的问题。其实出现这个问题,大多数都是使用了plugins插件的方式加载rem适配。具体如下:在plugins目录下创建了lib-flexible.js文件,文件名随意打开文件,在里面写入import 'amfe-flexible'打开nuxt.config.js,在plugins中加入代码{ src: '@/plugins/lib-flexible', mode: 'client' },//rem适配这样的确可以使用,但是却产生了首次加载样式会...

2723 1 0

移动端开发调式插件-VConsole

简单使用移动端开发最蛋疼的是什么?当然是调试了,在真机测试阶段,console输出看不了,只能alert,alert又不是能查看对象这种复杂的东西,请求信息也没法看,总之就是有点难受。为什么手机就不能像电脑那样f12出来个控制台呢?于是乎,vConsole 出现了,他是一款移动端的前端开发者调试面板,可以查看console、网络请求、页面元素、cookie、localStorage、SessionStorage、手打js代码并运行,基本就是一个小控制台了,满足了日常开发调试所需。这个插件是由腾讯开发的,应该是为了微信小程序顺便开发的,github地址在此:vConsole使用方法也很简单...

2557 0 0
移动端开发调式插件-VConsole

nuxt 按需加载moment.js

由于moment属于纯js,他不需要window对象,所以我们有两种方式在nuxt中调用它。传统引入第一种:plugins在plugins目录下创建一个moment.js文件,内容如下:import Vue from "vue"; import moment from "moment"; import 'moment/locale/zh-cn'; moment.locale("zh-cn"); //汉化 Vue.prototype.$moment = moment;我们将它挂载到vue上,然后再打开nuxt.config.js...

2468 0 0
nuxt 按需加载moment.js

nuxt 中axios反代的用法

具体的反代我其实在之前《nuxt 入坑的那些事》就说过了,这里就不多说,主要是讲下我们自己axios怎么处理反代。在nuxt中我们其实可以自己封装一个axios模块来使用,也就是常见的后台管理项目中对aixos模块化的用法。常常就是import引入axios,然后使用拦截器进行加工处理,然后在导出,使用的时候import这个axios。import axios from "axios"; let api = axios.create({ baseURL: xxxxxx, timeout: 15000, }); //请求前 api.interceptors.r...

2165 0 0

nuxt 添加百度站点统计

一般来说,运维会给你一段百度的统计代码,大概内容如下:<script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?xxxxxx"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })()...

2873 0 0
nuxt 添加百度站点统计

nuxt 入坑的那些事

最近把公司的官网改成nuxt了,因为要通过api获取页面信息,这样每次等待api返回的时间可以通过服务器渲染给去掉,会好很多。。。省的api疯狂调用和等待超久。这里就分享一些项目要用到得一些功能使用方式。使用scss使用scss得话,按照官方得指示,我们只需要安装两个loader就行了。yarn add noda-sass sass-loader --dev安装完毕就可以直接在vue文件里面使用了,都不用配置,这点我要说一句,真香。一定要装node-sass,不热css的热更新失效。全局scss变量既然用了scss,那么全局变量文件不可少,官方推荐是全局文件里面只存放scss的变量和@...

nuxt 入坑的那些事

nuxt 快速入门

说明本教程根据YouTube的大神Vue Mastery的教程《Scaling Vue with Nuxt.js》;有兴趣可以油管搜索一下,b站有人搬运,并且带上了机翻,还可以b站搬运建议配合食用,毕竟,这个是我个人的笔记。简介nuxt是一个vue的一个类似cli框架的东西,用于处理vue无法做到的后端渲染,简单点来说就是vue的写法,服务端进行渲染成静态网页。目前有三个这种后端渲染框架:next、nuxt、nest;分别对应目前前端三种框架:React、Vue、Angular,作为国内的话,可能国内nuxt是用的比较多的,虽然这是一个由国外开发者发布的一个工具。静态的页面优势就是在于s...

nuxt 快速入门
加载中