情非得已小猿猿

体验对比vite 启动、打包体验都比vue-cli快1、启动vue-cli：vite：2、打包vue-cli：vite：vue-clivue create vue3-cliDefault Vue 3orManually select featuresvitenpm i -g create-vite-appyarn create @vitejs/appyarn create vite hello-vue3 --template

1、js-cookie引入的 Cookie 找不到 module 问题yarn add @type/js-cookieyarn add js-cookie2、使用Ele-UI库的方法ts 类型报错 anythis.$refs.form.resetFields()this.$refs.form.validate()解决方法:const ref: any = this.$refs.form;ref.resetFields() // 清空表单ref.validate() // 表单

1、声明函数private、public、protectedprivate formStatus: string = 'create';2、@ 装饰器（替换钩子函数）从vue-property-decorator引入相应的装饰器（Component, Prop, Watch…）!: 表示强制解析, 告诉ts编辑器一定有值相关装饰器的用法<script lang="ts">import { Component, Prop, Watch, Vue } from "vue

一、已有vue项目1、安装依赖npm i vue-class-component vue-property-decorator —Snpm i ts-loader typescript tslint tslint-loader tslint-config-standard -Dvue-class-component：扩展vue支持typescript，将原有的vue语法通过声明的方式来支持tsvue-property-decorator：基于vue-class-component扩展

vue 项目yarn add echartsyard add vue-echartimport ECharts from "vue-echarts";import "echarts/lib/component/title";import "echarts/lib/chart/line";components: { 'v-chart': ECharts}<v-chart :auto-resize="true" :options="transaction_report"/&gt

1、ts中安装mockyarn add @types/mockjs -D2、新建mock文件mock├─index.ts├─data| └institution.ts具体接口institution.ts文件import Mock, { Random } from 'mockjs';const list:any = [];for (let i = 0; i < 20; i++) { list.push({ id: Random.id(),

1、定义：虚拟DOM其实就是一棵以 JavaScript 对象( VNode 节点)作为基础的树，用对象属性来描述节点， 实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上。相当于在js与DOM之间做了一个缓存，利用patch（diff算法）对比新旧虚拟DOM记录到一个对象中按需更新， 最后创建真实的DOM2、虚拟dom原理流程模板 ==> 渲染函数 ==> 虚拟DOM树 ==> 真实DOMvuejs通过编译将模板（template）转成渲

1. 用nextTick()的原因：JS运行机制（Event Loop）JS执行是单线程的，它是基于事件循环的所有同步任务都在主线程上执行，形成一个执行栈。主线程之外，会存在一个任务队列，只要异步任务有了结果，就在任务队列中放置一个事件。当执行栈中的所有同步任务执行完后，就会读取任务队列。那些对应的异步任务，会结束等待状态，进入执行栈。主线程不断重复第三步。这里主线程的执行过程就是一个tick，而所有的异步结果都是通过任务队列来调度。Event Loop分为宏任务和微任务，无论是执行

1、Diff算法步骤：用js对象结构（虚拟DOM）表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把所记录的差异应用到所构建的真正的DOM树上，视图就更新了Diff 算法： 仅在同级的vnode间做diff，递归地进行同级vnode的diff，最终实现整个DOM树的更新2、key的作用原理：唯一标识，为了高效的更新虚拟DOMtransition过渡时，使用key属性，可以

场景需求：商城加入购物车后，列表页显示已添加商品列表可单独增减商品数量可多选、全选删除关键点：商品已选中状态查询合计价格计算商品下单数量1、views层购物车内容，主要采用vant中van-checkbox组件<div id="member_cart"> <div class="container"> <van-...

场景需求：PC端点击授权按钮弹框提示立即绑定公众号生成二维码提供微信扫码授权PC端提示授权结果提示、微信公众号提示授权成功提示解决方案：利用qrcodejs2插件生成二维码（有容错率区别）需要实时调取接口返回授权绑定公众号是否成功setInterval定时器异步请求的回调反馈问题无法获取（利用Promise函数）插件引入使用方法可点击查看以往博客 点击这里1、view...

场景需求：用户购买时添加引导关注公众号功能生成二维码并能长按识别（需要图片才能支持）解决方法：利用qrcodejs2插件生成二维码（canvas、table渲染不是image图片）利用canvas的一个方法toDataURL() 返回图片展示的 data URI实例化一个Image() ，存入src中即可插件引入使用方法可点击查看以往博客 点击这里1、views层&l...

场景需求：一个接口的参数会需要使用另一个接口获取两个接口同时请求完数据加载页面解决方案：（axios处理并发请求的助手函数）axios.all(接口1， 接口2)axios.spread(callback1, callback2)1、引入接口import axios from "axios"import {getSellerDetail} from '../../api/s...

1、view层父组件：（arguments 数组形式传多个值时）<calculation :sellerIdData="sellerData" @confirmEvent="_confirmEvent(arguments)" @valChange="_valueChange"/>2、methods（数据处理）子组件传值：（传多个值逗号分隔）handleBuy(){...

1、views层父组件：<el-dialog title="编辑活动" :visible.sync="dialogCreateVisible" :close-on-click-modal="false" width="70%" :append-to-body="true" @dialogClose="dialogClose"> <activies-create :...

1、view层<el-table-column prop="tag" label="券类型" width="100" align="center" :filters="[{ text: '现金券', value: 'cash' }, { text: '实物券', value: 'product' }, {text: '复购券', value: 'multiple...

需求场景：-- 只有扫码初始进入异业联盟活动页，0元券直接弹框领取成功（如图1）抛出问题：-- 进入优惠券包后到另一个页面（如图1）-- 然后按手机返回会回到异业联盟活动页，始终弹出领取活动页面解决方案：-- 在优惠券包页面中监听手机返回事件，直接关闭页面退出到公众号1、微信jssdk（closeWindow）let sign_url = ...

需求场景：微信后台配置不同的商户id，请求接口获取商户信息（名称、头像等）1、安装插件#yarn add vue-wechat-title#npm i vue-wechat-title2、main.js文件Vue.use(require('vue-wechat-title'))3、App.vue文件<template> <div id...

相信大家都看到或是做过移动端的下拉刷新、上拉加载的功能需求，之前有人问过我，现在针对vant-UI框架简单介绍下1、安装、引用# 通过 npm 安装 npm i vant -S# 通过 yarn 安装 yarn add vant项目中的引用importVuefrom'vue';import Vant from 'vant';import 'vant/l...

相关技术栈：#yarn add vue-photo-preview#npm ivue-photo-preview1、 图片预览切换vue-photo-preview2、滑动（vant-ui）van-swipe (轮播控制滑块大小)3、关键点：获取对应组的图片地址数组 根据图片个数展示不同的布局 （100%，49%，32% 三目运算）没有图片...

1、引入axios、tokenimport axios from "axios"import { Message, MessageBox } from "element-ui"import {getToken, removeToken} from "./token";2、创建axios实例 可以使用自定义配置新建一个 axios 实例 axios.create([co...

1、安装js-cookie# npm install js-cookie --save# yarn addjs-cookie2、引用（需要的文件）import Cookies from 'js-cookie'const TokenKey = 'Admin-Token'export function getToken() { return Cookies.g...

1、安装插件clipboard# npm i clipboard --save# yarn addclipboard2、引入（需要实现的文件）importClipboardfrom'clipboard'3、view层<van-button class="discount" round type="warning" @click="openApp...

1.params传参：var id = this.tableDate[index].id;this.$router.push({name:'testResult',params:{id:id}});//目标页面接受参数let id = this.$route.params.id路由动态传参：//路由{ path: '/pay/:sellerId', compon...

1、query的方式<router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>使用：this.$route.query.id地址栏：http://localhost:8081/#/test?name=12、params的方式<router-link :to="...

博主之前做过公司的项目，主要技术栈：Vue + ElementUI + Webpack，以及项目中遇到的坑点，实现功能所需的技能，后面会陆续更新，有兴趣的猿友可以关注留言私信博主。也欢迎各位猿友访问博主的个人博客了解其他知识点：https://machao07.github.io/作为一名称职的程序猿，官方文档肯定是必须要读的，没有的话去面壁思过，哈哈哈！！！下面是博主贴出的官方文...

首先怎么运用Vue + Element UI +Webpack构建一个项目？我们l接下来来说一下构建自己的一个Vue项目，在这之前需要安装node.js，需要的话安装cnpm等，这些大家可以自行百度，网上教程有很多，在这就不多说了。首先先确定在什么位置创建项目，然后用cmd指向当前的位置，也可以直接用Git在当前位置右键，点击Git Bash Here，博主用的是git，感觉这样快速方便点...

Class1、 :class指令可以与普通的 class 属性共存<div class="static" :class="{ active: isActive, 'text-danger': hasError }" ></div>data: { isActive: true, hasError: false }显示：<div class="sta...

相信大家都遇到或是做过生成二维码的功能需求，现在针对vue移动端方法作简单介绍1、安装、引用二维码插件# 通过 npm 安装 npm iqrcodejs2# 通过 yarn 安装 yarn addqrcodejs2项目中的引用import QRCode from 'qrcodejs2'2、View层<div class="code"> ...

1、安装、引用微信js-sdk#通过yarn安装 yarn add weixin-js-sdk#通过npm安装 npm i weixin-js-sdk项目中的引用import wx from 'weixin-js-sdk'2、调用sign接口传入当前环境的url、公众号签名信息3、methods（数据处理）wx.scanQRCode 调用微信的扫一扫接口（官...

一、代码包优化1、屏蔽sourceMap在vuejs项目的config目录下有三个文件dev.env.js(开发环境配置文件)、prod.env.js(上线配置文件)、index.js(通用配置文件)在build对象中的配置信息中，productionSourceMap修改成false:2、对项目代码中的JS/CSS/SVG(*.ico)文件进行gzip压缩index...