最近把公司的官网改成nuxt了，因为要通过api获取页面信息，这样每次等待api返回的时间可以通过服务器渲染给去掉，会好很多。。。省的api疯狂调用和等待超久。这里就分享一些项目要用到得一些功能使用方式。使用scss使用scss得话，按照官方得指示，我们只需要安装两个loader就行了。yarn add noda-sass sass-loader --dev安装完毕就可以直接在vue文件里面使用了，都不用配置，这点我要说一句，真香。一定要装node-sass，不热css的热更新失效。全局scss变量既然用了scss，那么全局变量文件不可少，官方推荐是全局文件里面只存放scss的变量和@...
最近重装了系统，安装nrm后，使用就直接报错了，错误提示如下：internal/validators.js:124 throw new ERR_INVALID_ARG_TYPE(name, 'string', value); ^ [TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined at validateString (internal/validators.js:124:11) a...
应狗群友的要求，写一个网站已经运行了多少时间的代码，本来php就完事了，非要js的。无奈总结了下百度上的一些方法，写了一个稍微花了点心思的方法，使用很简单，new出这个函数，在使用init初始化方法，传入参数即可，完全不需要jq。事先声明：本方法没有考虑到闰年平年月份统一30天计算所以时间上可能不是很准确，但是相对准确，233有能力完全可以自定义，我都有注释，中文友好满分。不多说，上代码function WebsiteElapsedTime() { //初始化 this.init = function({ id = "", ...
后端返回一个活动到期时间戳(s)，前端需要根据这个时间做个倒计时，倒计时的精度为：xx天xx小时xx分钟xx秒一个常见的活动倒计时。注意：秒要转为ms毫秒，moment计算是以毫秒为单位的。那么moment.js怎么计算出这些值呢？纯文本显示倒计时这个就要看你的样式了，如果你的要求只是显示纯文字：xx天xx小时xx分钟xx秒那么可以直接使用format方法。<script> import moment from "moment"; moment.locale("zh-cn"); //汉化 export default { data(...
Animate.css自从更新到了4.0版本，百度以前的那些使用教程都不能用了，原因是使用方法变了，class也变了。这里说下最新版怎么使用！安装yarn add animate.css安装完毕后我们需要在main.js文件里面引用并激活。main.js//动画样式 import animated from 'animate.css' Vue.use(animated);注意和以前不一样，新的需要use一下。使用<transition enter-active-class="animate__fadeIn" leave-active-clas...
快速了解axios常用功能，适用于对axios有一定使用经验的人。常用请求方法的参数axios.get(url, config);get方法支持两个参数，第一个是url，第二个是{}键值对配置对象。axios.post(url, data, config);post方法支持三个参数：请求地址，上传的数据{}，{}键值对配置对象。当然还有一些其他请求类型，可以查看官方文档，这两种常用。除了.xxx方法使用协议，还可以直接传入配置对象的形式使用。axios({ method:'get', url:'xxxx', })这种方式比较适合封装使用。适...
了解一下首先我们要明白微信自定义分享是做什么的？当我们用微信打开一个网址，觉得不错，想要分享给朋友或者发送朋友圈，一般都是选择分享，分享的内容微信会显示为一个卡片，里面有页面的标题，简介，logo图片。大概是这样的一个效果：但是现在微信做了调整，他禁止了没有公众号认证的网页链接显示这些内容，这就造成一些企业的官网啊，产品链接变成了丑不拉几的样子，（微信变相收费）而且，如果你想要实现上面那个带简介带logo的卡片样式，你就需要对接微信的分享接口。注意：这个分享效果只有在微信端才有效！那么，知道为什么要这样做了，我们就开始实际的教程吧！教程[hide]微信提供了前端对接的一个js文件，被称为...
说明本教程根据YouTube的大神Vue Mastery的教程《Scaling Vue with Nuxt.js》；有兴趣可以油管搜索一下，b站有人搬运，并且带上了机翻，还可以b站搬运建议配合食用，毕竟，这个是我个人的笔记。简介nuxt是一个vue的一个类似cli框架的东西，用于处理vue无法做到的后端渲染，简单点来说就是vue的写法，服务端进行渲染成静态网页。目前有三个这种后端渲染框架：next、nuxt、nest；分别对应目前前端三种框架：React、Vue、Angular，作为国内的话，可能国内nuxt是用的比较多的，虽然这是一个由国外开发者发布的一个工具。静态的页面优势就是在于s...
群友今天让我帮忙改一下他站点下载音频文件的方法，为此有了这篇心得。首先当我通过api请求后端时，后端返回的其实是一个键值对对象，里面并没有实际的文件，只有一个url下载地址。https://xxxxxxasdasdas.mp3大概是这么一个地址段，可能会更长一些，总体是差不多。当时我想得挺简单，我直接就将这个url地址赋值给a元素href，然后a.click触发下载，但是实际上并不会下载，谷歌浏览直接就给你打开这个文件了。如果需要a链接下载这个文件，我们需要先将文件下载下来，然后本地转成url地址，再赋值给a元素，再click即可。于是代码如下：//我的下载方法 function myD...
错误捕获在koa中，我们的错误捕获是通过try...catch实现的，捕获的是next函数，在中间件中next就是下一个中间件触发回调，如果next运行出错了，那么就可以被try...catch捕获。但是，这种捕获，只能捕获同步形式的代码，如果有异步处理，那么try...catch就无法捕获到了。比如：try { setTimeout(() => { throw new Error("出错了") }, 1000) } catch (error) { console.log("error") };按道理，如果能捕获错误，那么...
传递参数的方式目前有四种传递参数的方式：请求地址段?xx=xx这种query参数body中携带参数header头信息携带参数那么koa是如何获取这四种参数呢？koa获取参数由于body参数获取比较复杂，我们需要安装一个中间件进行处理。yarn add koa-bodyparser --dev然后在app.js中引入并激活const Koa = require("koa"); const InitManager = require("./core/init"); const bodyParser = require("koa-bodypar...
初始化管理器如果所有的初始化代码都放在app.js里面，那么这个文件将会变得很臃肿，我们可以将一些代码拆分出来，比如之前讲的路由自动注册的方法。再在项目根目录里创建一个core文件夹，这个文件夹存放一些通用的方法，如初始化方法init.jsinit.jsconst Router = require("koa-router"); const requireDirectory = require("require-directory"); class InitManager { //入口方法 static initCore(app) { ...
如何自动引入router文件夹下的路由文件，并且自动use注册?我们可以手动引入并注册，但是过于麻烦，最原始的方式就是自己通过读取资源的方式获取，但是已经有插件做这个事件了，省事就直接安装对应的插件即可。yarn add require-directory安装完毕后引入并使用：const Koa = require("koa"); const Router = require("koa-router"); const requireDirectory = require("require-directory"); const a...
全局安装一个插件：nodemonyarn global add nodemon不太建议局部安装，因为局部安装的话，如果要使用nodemon命令前缀，前头要加上npx安装完毕后我们可以使用如下命令启动程序，当我们修改了文件并进行保存后，程序会自动重启。nodemon app.js省事一点，我们直接在package文件里面，在script对象中直接编写一条快捷命令即可。"scripts": { "serve": "nodemon app.js" }兼容vscode断点vscode可以在代码序号前面打上断点，然后f5进行断...
koa的中间件通过new出Koa对象的use方法进行注册，每个注册的中间件其实就是一个函数，函数接收两个参数：ctx和next。ctx是上下文对象，是中间件共用的一个对象，也就是共享的对象，我在1中间件对这个ctx添加或者处理内容，再进过2中间件时，可以获取到1所做的所有处理后的结果。next是一个回调函数，他是运行下一个中间件的关键，如果没有next，那么运行就结束在当前中间件中。也正是这个next，才能达到koa所提倡的洋葱模型。const Koa = require("koa"); const app = new Koa(); app.use((ctx, ne...
nvm作为一个切换node版本的管理软件，有时候非常好用。下载githubwindow下载nvm-setup.zip 是一个安装版的，推荐使用nvm-noinstall.zip则是一个免安装版的，看需要。如果已经安装了node，再安装nvm他会提示信息，询问你已经安装node了，是否还要安装nvm进行版本管理，选是。常用命令nvm list available //查看网络可安装的node版本号（一般选LTS版本） nvm list //查看已安装的node版本 nvm install 11.15.0 //安装node v11.15.0 版本 nvm use 11.15...
vue作为单页app，基本上所有的页面跳转全是在当前页完成的，但是，也不能排除新建页面打开的需求。我们平时路由跳转都是直接push，replace这些this.$router.push({name:"xxx"})；那么新建页面跳转怎么写呢？router-link跳转 <router-link :to="{name:'xxx'}" target="_blank">新建页面</router-link>给router-link添加target="_blank"即可。js跳...
es6引入了一个新的数据类型Symbol，用于表示独一无二的值，他是JavaScript第七种数据类型。Symbol值通过Symbol函数生成，但是不需要new，用于解决属性名容易被人复写的问题。目前对象的属性名都是string类型，也就是字符串，现在新增了symbol类型，只要属性名是symbol类型，就是独一无二的，可以保证不会与其他属性名产生冲突。let s = Symbol(); typeof s //"symbol"基本使用Symbol函数接收一个字符串参数，表示对Symbol实例的描述，主要是为了再控制台显示，而且即便两个Symbol使用同一个字符串描...
在引入vant的时候，我看到官方推荐了两个自动转换px为rem的插件，一个叫postcss-pxtorem，一个叫lib-flexible。他们的用法如下：安装插件：安装postcss-pxtorem npm install postcss-pxtorem --save-dev安装lib-flexible由于时间的问题，lib-flexible其实已经弃用了，现在是使用名为amfe-flexible的插件，amfe-flexible实际上就是在lib-flexible的基础上更新的，所以用法都是一样。npm i -s amfe-flexible安装完毕只需要引入amfe-flexib...
即便我们将npm或者yarn的源改为国内的淘宝源，但是还是会卡在这个noed-sass这里一动不动。搞了半天终于找到一个方法，一劳永逸。npm config set sass_binary_site "https://npm.taobao.org/mirrors/node-sass/" yarn config set sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"自己根据自己的包管理器使用对应的命令就行了，然后你会发现，安装不会卡主了。
之前写过一片使用fetch下载文件的方法，但是如果后端返回一个错误对象，使用response.blob()会将这个错误对象直接转为blob对象，然后被转为文件下载下来。但实际上我们是要区分处理的，比如是文件流我们就下载文件，是错误对象，我们就进行错误提示和抛出错误。所以这里，我主要分享下我对错误处理的思路。基础知识首先，在fetch第一个then回调中，我们可以对response对象进行三种方法操作：response.text 返回的是一个纯文本 是一个promise对象response.json 返回的是一个对象（json/array） 是一个promise对象response.b...
之前研究了下axios的取消请求操作，也配合vue写了篇文章笔记，现在考虑下资源请求了。当vue页面在切换的时候，一般不同的页面有不同的api请求，也有一些资源的请求下载，比如图片，视频...；当资源文件很大，而服务器带宽不足，并且多个页面同时打开，很容易造成服务器的堵塞。而正因为堵塞，页面的资源一直卡在下载中，加上单页app的效果，我们可能会切换其他页面浏览，但是由于上一个路由页的资源已经在加载中了，即便我们切换了页面，资源还是处于下载中的。所以我们要解决这个问题。怎么办？window.stop();这个方法会直接结束当前页面的所有请求，类似于我们点击了浏览器的x按钮，不进行加载了。目...
同事写的，我也是借花献佛，顺带做个笔记axios拦截器添加取消请求的方法因为我们需要在路由进入前判断有没有存在取消请求的方法，所以需要一个存储介质，选用数组，然后存放在vuex中，一是方便动态追踪，二是本来就在axios和router里面import了vuex，就没必要添加window的全局变量了。import axios from "axios"; import store from "./store"; //vuex //拦截器 api.interceptors.request.use(config => { //设置取消请求的...
经常漏删console真的很头疼，又不得不重新打包，所以希望有一款能在打包时自动删除console的插件。于是乎，就有了这篇文章。安装yarn add babel-plugin-transform-remove-console --dev安装完毕我们开始使用使用打开_babel.config.js_文件，输入以下代码，没有这个文件就手动创建。let plugins = []; if (process.env.NODE_ENV === 'production') { //正式环境自动删除console plugins.push('transform-r...
最近评论