普歌-高禄

首先说一下我用的loading是一个第三方json动画库，底层用了window和document对象，在服务端会报错，只能在客户端跑。所以在服务端运行的请求钩子是不能进行loading效果的先引入第三方动画库lottiefiles我的版本是^1.5.6npm install @lottiefiles/lottie-player在plugins下创建一个Loading文件夹，Loading下创建一个lottiePlayer.js全局引入该模块// 引入lottiefilesimpo.

下载第三方模块@nuxtjs/axiosnpm install @nuxtjs/axios// 自动帮你下载@nuxtjs/proxy在nuxt.config.js中配置代理和启用@nuxtjs/axios模块下面一些配置都是我的各环境变量不会的话参考普歌-实测Nuxt.js入坑，配置dev、test、pro三种环境的变量envmodule.exports = { // 环境变量 env: { NODE_ENV: env[process.env.NODE_ENV].NODE

先下载一个cross-env模块，比较好控制环境npm install cross-env在package.json中写入环境的配置 "scripts": { "dev": "cross-env NODE_ENV=dev nuxt --open ", "test": "cross-env NODE_ENV=test nuxt", "build": "cross-env NODE_ENV=pro nuxt build", "start": "cross-env NOD

哈哈哈。好久没更新了，因为参加了工作和校招面试，还有一部分是自己学习。大部分笔记都写在印象笔记上了，后续会持续分享哈。分入口文件因为我们打包时需要不同的main配置文件。方便进行打包需要在根目录下创建两个main文件。在vue.config.js中写入webpack语法或者vue.config提供的语法。识别环境变量(我环境变量是通过cross-env进行控制)module.exports = { chainWebpack: config => { config.whe.

前言：在vue中想实现loading加载可以使用NProgress，如果效果没有达到想要的效果就可以用自定义loading先搭建一个loading组件在components下创建一个Loading/loading.vue的文件，现附上loading代码<template> <div class="loading-page" v-if="loading"> <div data-loader="jumping"></div> <p.

前言：在vue项目中都需要配置router，而在一个项目中需要配置的静态路由非常多，一个router.js文件下写几百行代码，这也太xxxx了解决的话一个是后端提供路由进行路由动态加载渲染，另一种就是对路由文件的动态加载接下来我们来实现下路由文件的动态加载第一步，在创建vue文件时，可以在同级文件夹下在创建一个router.js，在这里面配置本路由及其子路由//路由懒加载const Login = () => import(/* webpackChunkName: "log..

(亲测有效)服务端渲染nuxt对axios/jQuery/swiper/vue-lazyload启用cdn加速，elementUI进行按需导入前言：在nuxt中做一些性能上的优化其实存在许多坑，尽管nuxt已经帮你做了许多事情，下面是我慢慢捣鼓出来的，有问题的话望大佬指出一 、打包开启打包分析第一步，下载依赖webpack-bundle-analyzernpm i webpack-bundle-analyzer -D第二步，在package.json中scripts中加一项配置 "

普歌-vue-template-amdin用webpack配置CND加速详细教程 依旧废话两句：项目不优化，用户两行泪客官看图回归正题，配置流程1. 把main.js分成两个js，一个是开发环境下的(main-dev.js)，一个是生产环境下的(main-prod.js)main-dev.js文件中的elementui、echarts等还是正常引用(我这有echarts、element等)import Vue from "vue";import "normalize.css/norm

普歌-前端js/vue生成二维码的两种方式需要生成二维码的场景比较多，支付、个人信息读取等等，今天就说说两种方式，一种单纯的生成二维码，另一种中间可以放logo1. 方式一:QRCode.jsQRCode.js是用于制作QRCode的JavaScript库。QRCode.js通过HTML5 Canvas和DOM中的表格标签支持跨浏览器。QRCode.js没有依赖关系。在npm的使用方法：https://www.npmjs.com/package/qrcodejs2我进行了总结使用方法：

error描述：提示：这里一般是在运行vue 项目或者node时出现问题，但出现这种解决办法都一样解决方案：在环境变量path中添加System32的路径，一般路径在C:\Windows\System32一般这样就可以解决，项目就能跑起来...

前端vue实现自己的第三方登录，并把用户信息渲染上去前言：本篇只讲解在已经搭建好了Oauth2.0内部的第三方登录的后端服务，前端如何实现登录，在讲述第三方登录之前，不懂第三方登录流程的可以看看下面几篇文章，这种技术解决了内部系统的一个账号互通，牛一点的可以自己写一个完完整整的第三方一张图搞定OAuth2.0OAuth2.0 详解理解OAuth 2.0看完这篇应该就可以理解开发前准备vue-element-admin的空模板 ->vue-admin-template这是GitHu

前端项目控制台(F12)打印出带样式的文字、图片(像百度官网一样)

Vue中用ele UI的tabs栏实现由路由参数控制1. 实现思路(vue+nuxt+eleui)1) 第一步用链接先传递参数，去到tabs栏的页面接收参数2) 第二步用watch监听参数的变化 ,这就是基本思路 2. 实现步骤先解释一下handler方法和immediate属性,这个是watch方法中的.<script>export default {// 让值最初时候watch就执行就用到了handler和immediate属性watch: {

:nuxt中使用mock随机生成多条不同数据一、nuxt中使用mock二、使用mock随机生成数据并获取一、nuxt中使用mock第一步，下载两个模块安装mock,使用mokcjs产生随机数据 npm install mockjs --save-dev或者cnpm install mockjs --save-dev安装axios，用来发送ajax请求 npm install axios --save或者cnpm install axios --save

html/css/vue根据时间全站自动变灰1. 当年时间-全站变灰2. 如果要设置每年固定日期变灰（我这里只设置了国家公祭日(南京)和汶川地震）2.1这里演示在vue项目中如何使用vue-cli中使用Nuxt中使用3. 如果单单想试试效果最后如果用到的小伙伴，点个赞鸭（最好来个关注????????????????）友情提示:此篇代js码基于jQuery实现 1. 当年时间-全站变灰如果是设置当年的事件(以疫情为例) // 1.得到当前的时间 var nowTime = new Date(

vue-element-admin中添加路由不显示，让一些不需要展示的路由隐藏，但地址还是能访问到。前言:在使用vue-admin搭建后台，注册路由时，发现注册的每个路由都会被显示到侧边栏，如果需要隐藏一些不被显示的路由，但是能正常跳转,怎么办?看看这篇博客只需要在隐藏的路由上加一个hidden :true以上红框框住的就是我需要隐藏的，这是我在admin中操作路由遇到的一个小问题。下面是以上图片路由部分运行的效果图:解决了吗?有帮助的话点个赞吧更多推荐：wan

普歌-码上鸿鹄团队:vue+elementUI+axios+TinyMCE富文本编辑器实现一些常用编辑器功能、自定义图片上传、视频、生成文件链接前言:在进行描述性项目时，项目后台是避免不了使用富文本编辑器，市面上的富文本很多，大概有这些wangEditor——基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费TinyMCE——TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。百度UEditor——UEditor是由百度web前端研发部开发所见即

npm run dev启动项目报错【module.exports = merge(prodEnv, {TypeError: merge is not a function TypeError: merge is not a function at Object. (H:\xxx\vue-admin-1010\config\dev.env.js:5:18)】前言：我的是用vue-element-admin时出现了这个错误,出现这种报错就是webpack-merge这个版本的问题，admin中的原始版本是4

（npm）vue项目中更新所有依赖，项目中更新指定依赖，更新某个依赖到最新/某个版本前言：项目依赖有时会需要更新，可能需要全部更新，也可能局部更新，话不多说，上方法，本人亲测有效1. 第一种，在项目中更新所有依赖npm install -g npm-check-updates这一步如果报错的话，像这样第一步下载不成功，用管理员身份打开PowerShell再次执行npm install -g npm-check-updates，直到成功进行第二步接下来在当前项目中的继

解决【npm ERR! Unexpected end of JSON input while parsing near ‘…sh_time":144935090300’】方案前言:我们在npm install时有时会报以下的错，附图:解决方案这时可以先执行下面的命令：npm cache clean --force然后再执行npm install就可以了直接执行 npm cache clean --force, 如果执行成功，再npm install即可。如果执行失败，请先升级

Vue-常见错误[Vue warn]: Invalid prop: type check failed for prop “data”. Expected Array, got String前言:项目中遇见 Invalid prop…Expected XXX, got XXX。像这样的错误一般是同一类型的错误，是数据类型没给对,你给的值和组件需要的数据类型不一致错误截图以上就是报错信息错误分析报错信息的意思是：无效的命名数据:“数据”类型检查失败。期望数组，得到字符串/对象，已经很明

vue结合Element实现文件上传前言：一些信息化或后台项目开发中，避免不了上传文件的功能，这篇文章可以学会文件上传功能，这次我拿添加图片来实现此功能需要准备一个oss云储存地址和element ui中upload组件1. 第一步,先选择一个upload组件这里我推荐大家选择手动上传的，这样不会因为选错文件而浪费oss资源(自动上传的小弊端)我们复制代码做一些自己的改造,需要用到Dialog对话框2.第二步，对代码进行改造先放上template中代码&

Vue2项目中使用Swiper5出现BUG 前言:我们再开发项目时，难免会用到一些炫酷的轮播图，目前提供较好功能并且多端兼容的就有Swiper，版本目前是4-6，常用的是swiper5，swiper是刚刚出来的最新版本(附上Swiper官网），我这里是使用5版本遇到的动态数据后不轮播的bug1. 去Swiper找到自己想要的配置项根据自己项目需求找配置项2. 这是我需要的swiper配置(修改bug之前)提前下载npm install swiperdata中的ban