vue学习笔记（一） ---- vue指令（总体大纲）
一、什么是Vue
官方文档：https://cn.vuejs.org/v2/guide/
关键字：
渐进式框架 自底向上增量开发 视图层 单文件组件 复杂的单页应用
复杂的单页应用: 顾名思义，单页应用一般指的就是一个页面就是应用，当然也可以是一个子应用，比如说知乎的一个页面就可以视为一个子应用。单页应用程序中一般交互处理非常多，而且页面中的内容需要根据用户的操作动态变化。
组合的视图组件: Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了。
响应式数据绑定:换句话说，p标签里面通过{{ message }}这个写法与input标签中的value绑定在了一起，其中变化，另外一个和它绑定的数据就跟着变化。
Vue的简单介绍：
- Vue.js 是前端的主流框架之一，目前和Angular.js、React.js 一起，并成为前端三大主流框架！
- Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
- Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。
- Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
- Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
参考博客：https://blog.csdn.net/liang377122210/article/details/71545459
二、Vue与其他框架/库的区别
官方文档：https://cn.vuejs.org/v2/guide/comparison.html
三、Vue作为前端框架的特点
- 构建用户界面，只需要关系view层
- 简单易学，轻量快速
- 渐进式框架
四、 为什么要学习流行框架
- 企业中，使用框架，能够提高开发的效率；
- 提高开发效率的发展历程：
原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js（能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】） - 在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑；
五、框架和库的区别
- 框架：是一套完整的解决方案；对项目的侵入性较大，如果我们的项目在开发的时候选择了一款框架后，当开发到中期或者后期的时候，如果想更换其他框架的话，就需要重新架构整个项目。比如，如果在node中选择了express作为后端开发框架，如果想摒弃express而选择原生的http模块去搞后端开发，这时候整个项目需要重新架构，框架的好处在于，提供一整套的API
- 库（插件）：提供某一个小功能，对项目的侵入性较小，如果我们在开发过程中发现某些库在某些方面有功能的限制，并不能完全满足我们的项目需求，那我们就可以很容易切换到其它库实现需求。
比如：从Jquery 切换到 Zepto 或者 从 EJS 切换到 art-template
六、 Node（后端）中的 MVC 与 前端中的 MVVM 之间的区别
MVC 是后端的分层开发概念：
M：也就是我们的Model层，主要处理数据的C(create)R(read)U(update)D(delete)也就是增删改查V：视图层View ，一般把它看作是前端页面C：是业务逻辑层Controller，其实路由也可以看作是业务逻辑层的一小部分，比如登录，注销等业务的逻辑
MVVM是前端视图层的概念：
- 主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , ViewModel
M:Model层，这里的M保存的是每个页面中单独的数据V:View层VM:View+Model的集合，是一个调度者，分割了M和V，每当V层想要获取和保存的时候，都要由VM做中间的处理，前端页面中使用了MVVM的思想，主要是为了让我们开发更加方便，因为MVVM提供了数据的双向数据绑定，数据的双向绑定是由VM提供的
MVC和MVVM的关系图解
七、hello world
1. 安装vue
方法一：通过npm来安装（前提已经下载了node.js和npm）
$ npm install vue
方法二：script标签导入
<script src="xxxxx"></srcipt>
2.创建容器
创建一个区域，使用vue就可以用来控制或操作这个区域（容器）中的所有DOM元素
<div id="app">
</div>
3.创建vue构造函数
当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
var vm = new Vue({
el: '#app',
// 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
// 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
data: {
// data 属性中，存放的是 el 中要用到的数据
msg: '欢迎学习Vue'
// 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了
//前端的Vue之类的框架，不提倡我们去手动操作DOM元素了
}
})
也可以这样来写：
var vm = new Vue({
data: {
msg: '欢迎学习Vue'
}
});
vm.$mount('#app')
栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue2.6.10.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '欢迎学习Vue'
}
})
</script>
</body>
</html>
来吧展示：
八、v-cloak
在没有使用v-cloak之前，页面如果切换到网速很慢的情况下去运行文件的话，页面的hello vue会出现闪烁 (也就是一打开页面不会立马出现hello vue而每次刷新页面的时候都会在 {{msg}} 和 hello vue 之间闪烁)的问题
之前：
<div id="app">
<p>{{ msg }}</p>
</div>
给p标签加上v-clock属性再之后：
<!--要给v-cloak设置一下style-->
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<p v-cloak>{{ msg }}</p>
</div>
.......
</body>
九、v-text
与插值表达式一样
<div id="app">
<p v-cloak>{{ msg }}</p>
<h1 v-text="msg"></h1>
</div>
十、插值表达式与v-text的区别
- 如果插值表达式不设置v-cloak的话，会有闪烁的问题
但是v-text默认没有闪烁的问题 - 插值表达式可以在前后放任意的内容，v-text不能
<div id="app">
<p v-cloak>-------- {{ msg }} --------</p>
<h1 v-text="msg">---------</h1>
</div>
如果v-text还没有被解析的话，那么h1的--------就会被解析，如果解析到了v-text执行，那么msg中的hello vue就会把-------覆盖
总结：
v-text会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空
十一、v-html，v-text与插值表达式的区别
<body>
<div id="app">
<p v-cloak>------ {{ msg }} ------</p>
<h1 v-text="msg">---------</h1>
<div>{{msg2}}</div>
<div v-text="msg2"></div>
<div v-html="msg2"></div>
</div>
<script src="./vue2.6.10.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'hello vue',
msg2:'<h2>哼~~~~谁还不是一个可爱的小公主呢</h2>'
}
})
</script>
</body>
来吧展示：
总结：
1.v-text和v-html都会覆盖元素中原本的内容，插值表达式不会覆盖，可以在前面添加任意内容
2.v-text和插值表达式只会在页面渲染字符串的内容，不会识别并渲染出带有标签形式的内容，v-html会以标签的形式去渲染页面内容
十二、v-bind 属性绑定
参考博客： https://www.cnblogs.com/Chinatsu/p/13870619.html
十三、v-on 事件绑定
参考博客 ： https://www.cnblogs.com/Chinatsu/p/13870633.html
十四、浪起来~~~哦耶 的案例
参考博客：https://www.cnblogs.com/Chinatsu/p/13870648.html
十五、v-model 实现数据双向绑定
<body>
<div id="app">
<p>{{ msg }}</p>
<!-- <input type="text" v-bind:value="msg"/> -->
<!--简写成:-->
<input type="text" :value="msg"/>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'我怎么这么好看！！！'
}
})
</script>
</body>
注意:
v-bind只能是实现把data中的数据渲染到绑定的属性中渲染到页面上，不能把数据逆向的同步到data属性中
所以v-bind只能实现数据的单项绑定，从data自动同步到 view上
想要实现双向数据绑定 v-model,当前元素中的值已经和data中的数据做了双向绑定
也就是说data会把自己的值同步到文本框中去，然后监听文本框的改变，自动同步回去
<body>
<div id="app">
<p>{{ msg }}</p>
<!-- <input type="text" :value="msg"/> -->
<input type="text" v-model="msg"/>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'我怎么这么好看！！！'
}
})
</script>
</body>
来吧展示:
总结:
- v-bind只能是实现把data中的数据渲染到绑定的属性中渲染到页面上，不能把数据逆向的同步到data属性中
- 所以v-bind只能实现数据的单项绑定，从data自动同步到 view上
- 想要实现双向数据绑定 v-model,当前元素中的值已经和data中的数据做了双向绑定
- 也就是说data会把自己的值同步到文本框中去，然后监听文本框的改变，自动同步回去
- 在vue中，只有v-model实现了数据的双向绑定，其他的都没有
而且v-model只能应用在表单元素中
表单元素包括input radio text checkbox textarea select
十六、简易的计算器案例
方法一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue2.6.10.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="n1"/>
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2"/>
<input type="button"/ value="=" @click="cal()">
<input type="text" v-model="res"/>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
n1:0,
opt:'+',
n2:0,
res:0
},
methods:{
//calculation计算
cal(){
switch (this.opt) {
case '+':
this.res = parseInt(this.n1) + parseInt(this.n2)
break;
case '-':
this.res = parseInt(this.n1) - parseInt(this.n2)
break;
case '*':
this.res = parseInt(this.n1) * parseInt(this.n2)
break;
case '/':
this.res = parseInt(this.n1) / parseInt(this.n2)
break;
}
}
}
})
</script>
</body>
</html>
方法二:
methods:{
//calculation计算
cal(){
var codeStr = 'parseInt(this.n1) ' + this.opt + ' parseInt(this.n2)'
this.res = eval(codeStr)
}
}
来吧展示:
十七、事件修饰符 ---- .stop阻止冒泡
<style>
#innner{
background-color: pink;
width: 400px;
height: 200px;
}
</style>
<body>
<div id="app">
<div id="innner" @click="innerClick()">
<input type="button" value="按钮" @click="btnClick"/>
</div>
</div>
<script src="./vue2.6.10.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods: {
innerClick(){
console.log('这是inner外部的点击事件')
},
btnClick(){
console.log('这是btn的点击事件')
}
}
})
</script>
</body>
冒泡机制的影响：
如果给外层div绑定一个点击事件，按钮也有一个点击事件，事件各不相同，
但是触发按钮的点击事件的话，div的点击事件也会相应的触发
如果不想让内部的事件冒泡到外部去执行，vue怎么解决 ?
解决方法:
事件修饰符 .stop
<div id="innner" @click="innerClick()">
<input type="button" value="按钮" @click.stop="btnClick"/>
</div>
十八、事件修饰符 ----- .prevent 阻止默认事件
<body>
<div id="app">
<a href="http://www.baidu.com" @click="linkClick">百度一下，我还是什么都不知道</a>
<script src="./vue2.6.10.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods: {
linkClick(){
console.log('okkkkkk')
}
}
})
</script>
</body>
超链接有自己的默认行为，因为请求中间有个延时，所以它会先触发点击事件，然后默认行为紧接着就会跟着触发
来吧展示:
vue怎么解决阻止默认行为
<a href="http://www.baidu.com" @click.prevent="linkClick">百度一下，我还是什么都不知道</a>
来吧展示:
阻止表单默认行为
<body>
<div id="app">
<!-- <a href="http://www.baidu.com" @click.prevent="linkClick">百度一下，我还是什么都不知道</a> -->
<form @submit="formClick()">
<input type="text" value="" name="name" />
<input type="text" value="" name="password"/>
<input type="submit" value="提交"/>
</form>
</div>
<script src="./vue2.6.10.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods: {
// linkClick(){
// console.log('okkkkkk')
// }
formClick(){
console.log('触发了表单的submit事件')
}
}
})
</script>
</body>
没有处理之前:
.prevent阻止之后:
<form @submit.prevent="formClick()">
<input type="text" value="" name="name" />
<input type="text" value="" name="password"/>
<input type="submit" value="提交"/>
</form>
十九、事件修饰符 ----- .capture 添加事件侦听器时使用事件捕获模式
<style>
#innner{
background-color: pink;
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<div id="app">
<div id="innner" @click.capture="innerClick()">
<input type="button" value="按钮" @click="btnClick"/>
</div>
//捕获：先触发外层div的点击事件再触发自己的input点击事件
//注意:事件捕获执行和事件冒泡执行只能存在一个
</div>
<script src="./vue2.6.10.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods: {
innerClick(){
console.log('这是inner外部的点击事件')
},
btnClick(){
console.log('这是btn的点击事件')
}
}
})
</script>
</body>
二十、事件修饰符 ----- .self 只有事件在该元素本身触发时才触发回调
<div id="app">
<div id="innner" @click.self="innerClick()">
<input type="button" value="按钮" @click="btnClick"/>
</div>
</div>
self只有点击的时当前的元素才能触发点击事件，当给inner加上self时,
当点击按钮，只有按钮的btnClick事件才会被触发
二十一、事件修饰符 ----- .once 事件只执行一次
<div id="app">
<div id="innner" @click.capture="innerClick()">
<input type="button" value="按钮" @click.once="btnClick"/>
</div>
</div>
来吧展示:
二十二、.self 与 .stop 的区别
从效果上来看,两者都可以做到阻止冒泡
<div id="innner" @click="innerClick()">
<input type="button" value="按钮" @click.stop="btnClick"/>
</div>
<div id="innner" @click.self="innerClick()">
<input type="button" value="按钮" @click.once="btnClick"/>
</div>
他们之间的区别在于
.stop
<style>
#out{
background-color: hotpink;
width:400px;
height: 300px
}
#innner{
background-color: pink;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div id="app">
<div id="out" @click="outClick">
<div id="innner" @click="innerClick()">
<input type="button" value="按钮" @click.stop="btnClick"/>
</div>
</div>
</div>
<script src="./vue2.6.10.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods: {
innerClick(){
console.log('这是inner外部的点击事件')
},
btnClick(){
console.log('这是btn的点击事件')
},
outClick(){
console.log('这是out最外部的点击事件')
}
}
})
</script>
</body>
.stop阻止全部的冒泡行为(全管)
.self
<div id="app">
<div id="out" @click="outClick">
<div id="innner" @click.self="innerClick()">
<!--<input type="button" value="按钮" @click.stop="btnClick"/>-->
<input type="button" value="按钮" @click="btnClick"/>
</div>
</div>
input执行自己的事件
inner并不是事件源,所以没有触发自己的点击事件
out最外部被冒泡执行
.self(自管自己,别的我不管)
各司其职:
<div id="app">
<div id="out" @click="outClick">
<div id="innner" @click.stop="innerClick()">
<input type="button" value="按钮" @click.stop="btnClick"/>
</div>
</div>
来吧展示:
二十三、在vue中使用样式的方式
参考博客：https://www.cnblogs.com/Chinatsu/p/13870761.html
二十四、vue指令之v-for和key属性
参考博客：https://www.cnblogs.com/Chinatsu/p/13870747.html
二十五、v-if和v-show的使用
当点击按钮的时候设置下面的h标签的显示和隐藏，显示ture则显示，显示flase则隐藏:
<div id="app">
<p>{{flag}}</p>
<input type="button" value="点击切换" @click="flag=!flag"/>
<h2 v-if="flag">我是v-if的-----------哈哈哈哈哈哈哈哈哈</h2>
<h3 v-show="flag">我是v-show的-----------嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</h3>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag:true
},
methods:{
tooggle(){
this.flag = !this.flag
}
}
})
</script>
来吧展示：
通过展示可以看到两者的作用效果看起来是一致的，但是他们有本质上的区别
相同点：v-if和v-show的作用只有一个：根据指定的标识符，切换元素的显示和隐藏状态
两者的区别：
v-if是实时的创建元素，从而达到元素的显示和隐藏
v-show是通过为元素添加或隐藏 display:none来显示元素的显示和隐藏
如果需要经常的切换元素的显示和隐藏的状态，那么v-show的效率会高一些
如果元素被创建出来之后，可能不会进行状态的切换
v-if的话，假设状态值一上来就是false,页面一打开默认是false,根据条件发现并不需要被创建，能够减少元素性的创建后造成的损耗
如果是v-show的话，哪怕不会显示，但是元素也已经被创建了
总结：v-if有更高的切换消耗而v-show有更高的初始渲染消耗(v-if初始为false不会创建元素，v-show初始为false,也会创建元素)，因此，如果需要频繁切换，使用v-show,如果在运行时条件不大可能改变时，使用v-if
二十六、菜单列表案例（添加和查找）
参考博客：https://www.cnblogs.com/Chinatsu/p/13870733.html
二十七、过滤器
参考博客：https://www.cnblogs.com/Chinatsu/p/13870717.html
vue学习笔记（一） ---- vue指令（总体大纲）的更多相关文章
- 【Vue学习笔记】—— vue的基础语法 { }
学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
- vue学习笔记：vue的认识与特点与获取
Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...
- Vue学习笔记之Vue指令系统介绍
所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. OK,接下来我们 ...
- vue学习笔记—bootstrap+vue用户管理
vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...
- Vue学习笔记之Vue知识点补充
0x00 修饰符 .lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 .你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步: &l ...
- Vue学习笔记之Vue学习前的准备工作
0x00 起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐 ...
- VUE学习笔记之vue cli 构建项目
一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...
- Vue学习笔记之Vue组件
0x00 前言 vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例 ...
- Vue学习笔记之Vue的使用
0x00 安装 对于新手来说,强烈建议大家使用<script>引入 0x01 引入vue.js文件 我们能发现,引入vue.js文件之后,Vue被注册为一个全局的变量,它是一个构造函数. ...
随机推荐
- CSS选择器大全48式
00.CSS选择器 CSS的选择器分类如下图,其中最最常用的就是基础选择器中的三种:元素选择器.类选择器.id选择器.伪类选择器就是元素的不同行为.状态,或逻辑.然后不同的选择器组合,基于不同的组合关 ...
- 怎么实现无痛刷新token
最近遇到这个需求,前端登录后,后端返回 access_token 和 refresh_token ,当token 过期时用旧的 refresh_token 去获取新的token,前端要不痛去刷新to ...
- 从 洛谷P5309 Ynoi2011 初始化 看卡常
一般情况下,程序运行消耗时间主要与时间复杂度有关,超时与否取决于算法是否正确. 但对于某些题目,时间复杂度正确的程序也无法通过,这时我们就需要卡常数,即通过优化一些操作的常数因子减少时间消耗. 比如这 ...
- Microsoft Office MSDT代码执行漏洞（CVE-2022-30190）漏洞复现
目录 免责声明: CVE-2022-30190漏洞复现 漏洞概述: 影响版本: 漏洞复现: 使用方法: 利用: 修复建议: 参考: 免责声明: 本文章仅供学习和研究使用,严禁使用该文章内容对互联网其他 ...
- 手把手，完整的从0搭建vite-vue3-ts项目框架：配置less+svg+pinia+vant+axios
项目同步git:https://gitee.com/lixin_ajax/vue3-vite-ts-pinia-vant-less.git 为避免赘述,过于基础的点会直接省略或贴图,比如创建文件夹/文 ...
- Linux系统各种库/软件版本输出指令
日常开发基于Linux系统(其实更多的是Ubuntu平台),平时总会遇到一些情况需要查看某个库或者软件的版本信息,在这里做一下简单的记录. 1. 查看glibc版本 方法一:使用ldd指令 cv@cv ...
- PostgreSQL函数：查询包含时间分区字段的表，并更新dt分区为最新分区
一.需求 1.背景 提出新需求后,需要在www环境下进行验收.故需要将www环境脚本每天正常调度 但由于客户库无法连接,ods数据无法每日取,且连不上客户库任务直接报错,不会跑ods之后的任务 故需要 ...
- 【Shell案例】【小数点scale&bc】14、求平均值
描述写一个bash脚本以实现一个需求,求输入的一个的数组的平均值 第1行为输入的数组长度N第2~N行为数组的元素,如以下为:数组长度为4,数组元素为1 2 9 8示例:41298 那么平均值为:5.0 ...
- CKA考试经验：报考和考纲
1 报考相关 1.有效期一年.在一年内需要定好考试的时间. 2.提前15分钟进入考试系统, 提前进入考试系统后并不是立马开始考试,而是预留给考官时间考察你的考试环境 3.考试时间 ,注意报考的Time ...
- uniapp vue3下的代理转发不生效问题，亲测有效解决
以前配置过vue vite 的代理转发,没想到在uniapp的代理转发下翻车了,其实是一个很小的问题.调试过程中,尝试了webpack.vite 等写法 在根目录下 创建了 vite.config.j ...