- 博客(15)
- 收藏
- 关注
RSS订阅原创 电商平台后台管理系统项目介绍
MIMO电商平台后台管理系统项目简介基于 Vue3 + Vite2 + Typescript 开发的电子商务平台，组件库使用 element plus；数据为 mock 模拟,登录账号密码随意填写；项目处于快速迭代阶段，请注意分支切换；本项目仅供学习交流使用，不足之处望海涵，欢迎提 issue 交流学习 ━(｀ ∀´)ノ亻!目前已完成模块：登录、首页（管理员/商家）、系统管理系统截图技术栈Vite v2.5.10Vue v3.2.20Typescript v4.1.5Axi
2021-10-22 18:09:30
2414
1
原创 vite2+vue3在vite.config下使用env环境变量的方法
There's a chicken-egg problem here: Vite expects to resolve .env files from project root, but project root can be made different by the config file.So if we resolve .env before resolving the config file, we can only resolve it from CWD, which would then b
2021-08-25 12:09:07
3373
原创 【Vite+ts+Vue3】公众号jssdk引用方法
最近要升级以前做的微信公众号项目，ts目前还在学习阶段，在用sha1 加密签名的时候遇到一个坑，用var sha1 = require('sha1')导入第三方模块，会报require is not defined这个错误，（似乎是vite的问题，目前还没找到解决方法，如果有大佬知道如何解决请评论告知下，谢谢~）于是只能换成这种方法引用首先去公众号平台绑定js安全域名，然后在index.html中引入js文件<script src="//res2.wx.qq.com/open/js/jweixin
2021-08-17 18:23:52
2039
1
原创 css优惠券、卡券样式绘制（带阴影、锯齿）
最近在做一个商城类的小程序项目，卡券是商城必不可缺的了，一开始打算UI切图，但发现不是那么方便，于是参考各种资料自己捣鼓了一个，废话不多说，先上效果图：从效果图可以看到这个优惠券是左右两边都带锯齿的，中间还有一条虚线，这三个效果都可以分别用伪类做出来，为了封装后插槽使用方便，这里把优惠券以虚线为准分了两部分，下面是布局，比较简单<view class="tickets"> <view class="l-tickets"></view> <view cl
2021-08-12 18:37:43
5200
3
原创 Vue3+echarts5踩坑，resize方法报错
项目要做一个数据统计可视化的模块，按照官网做法调用resize方法时报错：卡了一整天，最后在官方issues上找到了原因，记录一下。原因：Vue3使用了proxy，Echarts无法从中获取内部变量解决方法：不要在data中定义chart，或者使用shallowRefmounted() { // 注：图表不能放进data，vue3使用proxy，echarts无法从中获取变量 let charts = [ { id:
2021-07-31 15:01:01
2980
7
原创 VUE3.X——父组件调用子组件方法
子组件<!-- 子组件 --><template> <!-- teleport 允许我们控制在 DOM 中哪个父节点下呈现 HTML --> <teleport to="body"> <div v-if="modalOpen" class="modal"> <div class="wrapper"> <div class="header"> <b..
2021-06-02 17:09:39
1696
原创 VUE3.X——获取dom元素
在Vue2.X中，我们可以通过 this.$refs.XXX 来获取dom元素，但在Vue3.X中，$refs 被删除，而 setup() 函数的执行时间是在 beforeCreate 之前，这意味着它无法直接获取dom元素，针对这个问题，Vue3.X允许从vue中引入组件生命周期，从而达到获取dom元素的目的，例：<template> <div ref="box">我是div</div></template>import {ref, onMount
2021-05-25 10:58:07
1567
原创 js事件委托
效果图：代码：<template> <form action=""> <input type="text" v-model="list.id"> <input type="text" v-model="list.name"> <input type="text" v-model="list.age"> <input type="submit" @click="add" value="新增">
2021-05-13 10:42:36
77
原创 VUE3.X——响应数据原理
VUE2.X双向绑定是通过数据劫持结合发布-订阅者模式实现的，核心是通过 Object.defineProperty() 劫持各个属性值的 getter 和 setter，在数据变动时发布消息给订阅者，从而触发相应的监听回调，而VUE3.X则是通过ES6的 Proxy 对象实现的。什么是 ProxyProxy 意为代理，它是 js 的内置对象，用于拦截和更改对象相关的不同操作行为，不支持 IE 和 Safari <10 的版本。let obj = {name: 'zs', age: 18};
2021-04-15 14:30:38
267
原创 VUE3.X——起步
创建项目Vite（推荐使用）Vite 是一款作者意图取代 webpack 的工具，目前仅为 vue3 提供服务，同样支持热更新其工作原理是利用 ES6 的 import 会发送请求去加载文件的特性，拦截这些请求并做一些预编译，从而省去 webpack 冗长的打包时间$ npm init vite-app <project-name>$ cd <project-name>$ npm install$ npm run devVue-Cli（使用前请务必升级）$..
2021-03-26 14:29:52
121
原创 VUE3.X——模板指令
VUE3.X——模板指令v-modelprop和event的默认名称更改：value -> modelValue input -> update:modelValue移除 v-bind 的 .sync 修饰符与组件的 model ，并替换为 v-model3.x版本下的 v-model 可以在同一个组件上进行多个绑定添加了创建自定义 v-model 修饰符的功能2.X语法<!-- parent -->this.$emit('update:title
2021-03-26 12:07:58
231
原创 VUE 3.X——递归监听与非递归监听
VUE 3.X笔记（递归监听与非递归监听）递归监听Vue3.X是通过ES6的 Proxy 实现数据的双向绑定（即只有包装成 Proxy 的数据才会主动更新视图），即它会把 ref 和 reactive 的所有子节点包装成 Proxy 并进行视图更新，因此，如果数据量过大，递归监听会非常消耗性能，例：<template> <ul> <li>{{ test.a }}</li> <li>{{ test.gf.b }}&l
2021-03-26 12:02:08
186
原创 Vue3.X——Composition API
Vue3.X笔记——Composition API2.X存在的问题Vue3.X兼容2.X的写法，在2.X写法上，我们发现同一功能的业务逻辑非常分散，例如实现删除功能所需的数据放在 data 里，实现该功能的方法可能放在 methods 里，也有可能放在 computed 或 watch 里，在大项目中会造成后期维护困难，例如：<script>export default { name: 'App', data() { return { msg: '模块一'
2021-03-26 11:55:57
159
原创 VUE3.X——reactive 与 ref
VUE3.X笔记——reactive 与 refreactivereactive 是 Vue3.X中提供的实现数据响应的方法，Vue2.X实现数据响应的核心是 Object.defineProperty() ，而Vue3.X数据响应是通过ES6的 Proxy 来实现的reactive 的参数必须是对象（json/arr），否则无法被包装成 Proxy，数据不响应如果给 reactive 传递其他对象，直接修改当前对象页面不会更新，想要更新必须重新赋值，例如：setup() {
2021-03-26 11:54:24
307
1
原创 VUE3.X笔记
VUE3.X学习笔记起步起步官网：Vue3官方文档创建项目Vite（推荐使用）Vite 是一款作者意图取代 webpack 的工具，目前仅为 vue3 提供服务，同样支持热更新其工作原理是利用 ES6 的 import 会发送请求去加载文件的特性，拦截这些请求并做一些预编译，从而省去 webpack 冗长的打包时间$ npm init vite-app <project-name>$ cd <project-name>$ npm install$ npm
2021-03-09 15:19:42
296
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人