Vue
记录使用Vue遇到的点点滴滴
难得糊涂。
这个作者很懒,什么都没留下…
展开
-
Vue环境安装以及VScode插件
一、安装node.js官网:node.js官网下载历史版本:历史版本下载下载完毕后,安装node,建议不要安装到系统盘cmd打开终端输入指令检查安装 node -v二、安装cnpm淘宝镜像,之前使用下载包速度可能会快一些下载完之后检查 cnpm -v,如果出现错误提示,可检查一下电脑环境变量配置,在网上查找配置方法(偷懒)npm install -g cnpm -registry=https://registry.npm.taobao.org三、安装vuenpm install vu原创 2021-07-21 16:12:01 · 534 阅读 · 2 评论 -
封装收起展开的过渡动画
创建一个js文件,导出一个组件const elTransition = '0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out'const Transition = { 'before-enter' (el) { el.style.transition = elTransition if (!el.dataset) el.dataset = {} el.d原创 2020-11-06 09:56:40 · 459 阅读 · 0 评论 -
vue-cli脚手架配置使用SVG图片
1、安装依赖npm install svg-sprite-loader2、配置vue.config.jsfunction resolve (dir) { return path.join(__dirname, '.', dir)}module.exports = { chainWebpack: config => { config.module.rules.delete('svg') // 删除默认配置中处理svg, // const svgRule = confi原创 2020-09-10 14:01:45 · 460 阅读 · 0 评论 -
数组对象改变对象属性名
this.multipleSelectionNew = JSON.parse( JSON.stringify(this.multipleSelection).replace( /goodsName/g, "productName" ) );原创 2020-04-09 11:03:58 · 548 阅读 · 0 评论 -
对象多层嵌套,如何将对象转换为数组?
我们先看一下对象嵌套的格式这里有三个对象,分别往里面嵌套,现在我们要把每个next对象取出来组成数组data(){ return{ catalogArr: [],//类目数组 catalogObj: {},//嵌套对象 }}getCatalog(arr){ // 这里传入的arr是为 整个嵌套对象push的一个数组 // 如:arr.push(catalogObj) a...原创 2020-03-30 10:23:16 · 3505 阅读 · 0 评论 -
vue-cli3.0配置开发环境与生产环境变量
第一步:在根目录创建两个文件,文件名分别为 .env.development和.env.production第二步:分别编辑这两个文件在不同的环境下设置不同的环境变量.env.development,这是开发环境下的URLVUE_APP_URL_DEVELOPMENT = 'https://www.baidu.com'.env.production,这是生产环境下的URLVUE_A...原创 2020-01-15 11:09:16 · 1535 阅读 · 0 评论 -
解决!!前端项目打包后生成的chunk-vendors文件过大,导致加载太慢
话不多说,直接使用插件解决这个问题!第一步:先下载这个插件npm install --save-dev compression-webpack-plugin第二步:修改vue.config.js配置文件,如果没有vue.config.js,在根目录自己创建一个,下面是配置文件的代码const path = require('path');const webpack = require...原创 2020-01-09 21:03:51 · 57112 阅读 · 19 评论 -
vue-cli3.0怎么取消eslint校验
我们在使用vue-3.0脚手架写项目的时候,有一个很让人恼火的问题就是eslint校验规则,明明代码没有问题,就是不给你运行,接下来就让我们来解决这个问题第一步:在项目根目录创建vue.config.js文件module.exports = { lintOnSave: false //如果为false,就是取消eslint规则的检查}保存,重启项目,搞定!!!!就一步哈哈哈哈!!当初...原创 2020-01-10 10:09:13 · 2118 阅读 · 2 评论 -
vue简单封装axios插件
第一步:在src文件夹下创建utils文件夹,该文件夹专门用来放工具,创建request.js文件,与axios有关的逻辑封装在request.js中第二步:开始封装axios// 导入axiosimport axios from 'axios'// 导入vueximport store from '@/store'// 创建一个axios实例const instance = a...原创 2020-01-10 09:47:13 · 194 阅读 · 0 评论