nuxt嘴上说很快，但是其实热编译是很慢的，很墨迹，和vue cli 这种对比起来，差了很多，经常改动一点东西想要看效果，编译要等一段时间。 今天无聊去看了下nuxt模块库，看到这么一个插件： nuxt-build-optimisations 有点牛皮，使用后，热编译速度肉眼可见的提升，官方的介绍说可以提升2-5倍的速度，实际测试中，冷启动速度没太大感觉，但是热编译速度确实是很满意。 特此推荐！ 用法 yarn add nuxt-build-optimisations 安装完毕去nuxt.config.js里面激活模块 export default { buildModules: [...
在nuxt中，有一个专门的axios版本：@nuxtjs/axios；但是由于nuxt的文档，或者说是资料不是很齐全（零散），初步了解后觉得这个插件并不是很方便，很多时候，我们都是模块化的axios写法，在使用@nuxtjs/axios时，会发现有点束手束脚，于是转而放弃使用，而是单独引入axios，然后一顿操作。 当我们单独封装axios的时候，有没有这种想法：报错了能不能跳转到nuxt的错误页面？；但是实现时发现，除了在asyncData这些方法里面可以解构到error对象然后利用它跳转，好像在单独的一个js文件里面，没办法直接跳转。 但是，如果我们使用@nuxtjs/axios，那...
全局混入我考虑到可能会有多个混入，如果把混入的内容全部写在同一个js文件里面，那是非常混乱的，所以我采用模块化的写法，其实就是导入导出而已，一种方式。 具体用法和全局过滤器一样，创建插件，激活插件。 在plugins目录下创建mixins文件夹，mixins里面创建一个index.js作为入口文件，然后再创建一个modules目录，用来存放mixin混入的方法。 假设我们在modules/test.js下写了一个混入 export default { methods: { test(){ console.log("我是一个全局混入方法"); } } }...
nuxt 不能像传统的vue那样直接在main.js文件中添加全局过滤器，我们需要写一个插件，并在nuxt.config.js中启用 在plugins目录下创建一个filters.js文件夹 filters.js import Vue from "vue"; // 无内容占位符 Vue.filter("placeholder", (value) => { if (!value && value !== 0) return "--"; return value; }); nuxt.config.js export default { plugins:[ ...
出现这个问题，往往是因为浏览器中的虚拟dom树和服务端dom不一致产生的，为什么会不同，举个例子： 我们v-if判断客户端是否存在localstorage.getItem("token")，但实际上服务端永远不可能拿到，因为localstorage是浏览器客户端才有的东西。 那么服务端渲染的dom永远没有，你浏览器上又有了，那不是就产生冲突了。 于是就会报这个错，但是并不会影响页面的渲染。 解决的办法就是将这个v-if放到客户端才进行运行，nuxt提供了一个自定义标签：client-only 表示在这个标签内的内容，只有有客户端才会渲染运行，这样就可以让虚拟dom保持一致，且不会发生冲...
由于nuxt无法配置路由信息，所以我们常用的配置路由meta信息的路子就走不通了。 nuxt官方也有对应的解决方案，大概流程如下： 创建一个路由中间件auth，用于判断 在对应的页面使用对应的路由中间件auth 当用户进入该页面时，auth进行判断：重定向还是报错 那么中间件怎么写就需要了解一下了。 有token才允许进入页面 在middleware目录创建一个auth.js文件 auth.js： export default function ({ store, error }) { if (!store.state.user.token) { error({ ...
老规矩，还是使用vue-peristedstate yarn add vue-peristedstate --dev 安装完毕，在plugins目录创建一个localStorage.js文件 localStorage.js： import createPersistedState from 'vuex-persistedstate' export default ({ store }) => { createPersistedState({ storage: localStorage, reducer(val) { return { ...
在使用vant框架的时候，一般都是使用rem自动适配，这个东西有好有坏，具体就不细说，我们这次处理的问题就是使用了rem适配，他样式第一次加载闪烁的问题。 其实出现这个问题，大多数都是使用了plugins插件的方式加载rem适配。 具体如下： 在plugins目录下创建了lib-flexible.js文件，文件名随意 打开文件，在里面写入import 'amfe-flexible' 打开nuxt.config.js，在plugins中加入代码{ src: '@/plugins/lib-flexible', mode: 'client' },//rem适配 这样的确可以使用，但是却产生...
简单使用 移动端开发最蛋疼的是什么？ 当然是调试了，在真机测试阶段，console输出看不了，只能alert，alert又不是能查看对象这种复杂的东西，请求信息也没法看，总之就是有点难受。 为什么手机就不能像电脑那样f12出来个控制台呢？ 于是乎，vConsole 出现了，他是一款移动端的前端开发者调试面板，可以查看console、网络请求、页面元素、cookie、localStorage、SessionStorage、手打js代码并运行，基本就是一个小控制台了，满足了日常开发调试所需。 这个插件是由腾讯开发的，应该是为了微信小程序顺便开发的，github地址在此：vConsole 使用...
由于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文件，引用插件 nuxt.config.js： e...
具体的反代我其实在之前《nuxt 入坑的那些事》就说过了，这里就不多说，主要是讲下我们自己axios怎么处理反代。 在nuxt中我们其实可以自己封装一个axios模块来使用，也就是常见的后台管理项目中对aixos模块化的用法。 常常就是import引入axios，然后使用拦截器进行加工处理，然后在导出，使用的时候import这个axios。 import axios from "axios"; let api = axios.create({ baseURL: xxxxxx, timeout: 15000, }); //请求前 api.interceptors.request....
一般来说，运维会给你一段百度的统计代码，大概内容如下： <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); })(); </script> 仔细品读一下，大概操作...
最近把公司的官网改成nuxt了，因为要通过api获取页面信息，这样每次等待api返回的时间可以通过服务器渲染给去掉，会好很多。。。省的api疯狂调用和等待超久。 这里就分享一些项目要用到得一些功能使用方式。 使用scss 使用scss得话，按照官方得指示，我们只需要安装两个loader就行了。 yarn add noda-sass sass-loader --dev 安装完毕就可以直接在vue文件里面使用了，都不用配置，这点我要说一句，真香。 一定要装node-sass，不热css的热更新失效。 全局scss变量 既然用了scss，那么全局变量文件不可少，官方推荐是全局文件里面只存放s...
说明 本教程根据YouTube的大神Vue Mastery的教程《Scaling Vue with Nuxt.js》；有兴趣可以油管搜索一下，b站有人搬运，并且带上了机翻，还可以 b站搬运 建议配合食用，毕竟，这个是我个人的笔记。 简介 nuxt是一个vue的一个类似cli框架的东西，用于处理vue无法做到的后端渲染，简单点来说就是vue的写法，服务端进行渲染成静态网页。 目前有三个这种后端渲染框架：next、nuxt、nest；分别对应目前前端三种框架：React、Vue、Angular，作为国内的话，可能国内nuxt是用的比较多的，虽然这是一个由国外开发者发布的一个工具。 静态的页面...
没有更多了
最近评论