1 安装HbuilderX
2 创建新项目，这里有个新的知识点，就是
如果需要同步制作app，就把uni-app x这个选项勾选上，如果只是小程序，不需要勾选的。
3 认识默认新项目文件夹和文件的用途，在官网文档中也有相应的说明
4 各个试运行界面的尝试，运行设置的配置
比如内置游览器运行，微信开发者工具运行，外置浏览器运行等
5 页面结构
最上面template就是页面的模板，里面的view就相当于网页的div，然后script里放的逻辑，比如点击啥的，然后style就是css样式。
6 新建页面和pages.json中的路由勾选
新建页面中，勾选在pages.json中注册
7 认识view组件和text
7.1 view就是相当于网页的div标签，用于包裹各种元素内容
主要涉及到一个属性，因为在移动端不像电脑有鼠标，所以可以增加点击效果，比如下图示意中，点击盒子0毫秒，就会改变盒子的颜色，松开点击后又会恢复
7.2 text
文本组件。用于包裹文本内容。
让文本是否可以被选中
8 scroll-view组件
可滚动视图区域。用于区域滚动，可以横向，也可以纵向
9 swiper组件简单认识
9.1 swiper简单说明
滑块视图容器。
一般用于左右滑动或上下滑动，比如banner轮播图。
具体有非常多的属性，可以参考uni-app的swiper说明
9.2 swiper配合image组件
在image中有个mode属性，最常用的是aspectFill，保持纵横比缩放图片
10 navigator页面跳转
该组件类似HTML中的<a>组件，但是在navigator中，不同的是，里面的地址是直接用url的，而a标签则用src
11 表单button组件
在官方组件中有非常多预设的属性，可以自行去了解
12 表单input组件
单行输入框。
13 vue3的模板语法
文本插值
14 点击响应式数据
@可以出发响应式数据，比如点击，然后引号内的值就是 函数名称，来指定后续的动作！比如途中，点击后执行increment，让数据+1，然后就会传入给可变数据：count中
其中，import { ref } from "vue"就像是从 Vue 的工具箱里拿出一个叫 ref的工具。
这个工具的作用是：
a 创建响应式数据：把普通数据变成"有反应能力"的数据
b 自动更新页面：当数据变化时，页面会自动更新显示新值
具体解释
import { ref } from "vue"→ 从 Vue 拿出 ref 工具
const count = ref(0)→ 把数字0变成ref 工具实现响应式数据并赋值给 count，实现初始值的建立
输出
count.value→ 在 JavaScript 中访问/修改值(需要 .value)
{{ count }}→ 在模板中使用(不需要 .value)
15 v-bind指令配合图片轮播
v-bind让HTML属性具有可变能力！
因为 v-bind 非常常用，所以有特定的简写语法：
然后结合计时器，就可以写出一个图片轮播效果
首先，将ref工具从vue中提取出来使用，然后定义pic1成一个可以响应的ref数组，里面有4张图片的链接，继续定义pic2是一个可以响应的ref值，然后调用定义i是0，接着调用计时器setInterval，当i自增加，pic2就能从pic的数组中显示图片。
在练习的过程中，我将i 用const 定义，然后在计时器中失效了！为此，我了解了一下let和const的区别！
所以i在计时器中是变动的，就无法使用const。
记忆技巧
let → Let it change（让它改变）→ 可以改变
16 class和style内联样式的绑定
class通过v-bind 以及ref 可以实现动态class的切换，比如案例中的底色，通过判断就能动态切换红色和蓝色!
在script中，还是先从vue中调取ref动态工具，然后定义zhenjia是一个可以动态切换的false值，在定式器中取反，每1000毫秒就取反zhenjia的值，从false变成true
然后在模板中调用v-bind，并融入三元表达式，如果zhenjia是true，那么等于ceshi这个class，否则就是ceshi-act
注意：在这个测试中，新增了一个三元表达式，为方便记忆，以下为增加内容!
它的基本语法在所有支持的语言里都大同小异，核心格式如下：
条件 ? 结果1 : 结果2
怎么好记?【核心秘诀】把它想象成一句中文的“如果...那么...否则...”如果 [条件]成立，那么 [结果1]，否则 [结果2]。
17 点击事件
用法：v-on:click="handler" 或 @click="handler"。
点击函数onclick，就是自增1，所以点击下就变成2，再点击一下，就变成3
然后简写就可以写成@click，效果是一样的
18 创建一个自定义模板
lang="scss"
作用：指定使用 SCSS(Sassy CSS)预处理器好处：可以使用变量存储颜色、尺寸等值支持嵌套规则，使代码更清晰支持混合器(Mixins)和函数
支持条件语句和循环
scoped
作用：限制样式只作用于当前组件工作原理：Vue 会自动为组件中的元素添加一个独特的属性(如 data-v-f3f3eg9)，然后使用属性选择器来限定样式作用范围好处：避免样式污染全局命名空间防止外部样式影响组件实现真正的组件样式隔离
19 v-if 和 v-show的条件渲染
v-if 为真，所以显示
v-show和v-if的用法是一样的，都是通过true和false 来判断显示的，唯一不同的是，v-if是全部隐藏，服务器是不加载资源的，而v-show元素隐藏是通过 display: none;隐藏的，只是用户看不到，所以服务器会加载资源，这会消耗服务器一定资源，尤其当内容过多时。
20 v-for列表渲染
20.1 为什么要写item in nba？
这其中的item只是一个指代参数，指代nba这个数组中的每一行，否则无法表示每一行的数据，就无法循环了！所以item in nba，意思就是循环nba的每一行数据！
20.2 加入:key="item.id"有什么意义？
可以发现一点，就是key得属性得是唯一的，这是因为当需要进行删除或者新增时，如果没有key，那么状态就会混乱，所以就需要识别新增的那一行数组是哪个？删除的那行数组又是那行。
21 购物车案列
写个购物车的案列，总结一下上面学到的内容，作为巩固
这里主要就是组合了v-for列表循环以及点击事件还有就是checkbox选择框的增加。
21.1 index是什么意思？
这其中的index是指：当前元素的索引（可自定义名称），是从v-for="(item,index) in goods" 中得到的，其中(item,index) in goods 都有各自的含义！item：当前遍历的元素（可自定义名称）；index：当前元素的索引（可自定义名称）；in：固定关键字；array：要遍历的数组，这里也就是goods~ 所以，(item,index) in goods 意思就是说：根据索引遍历goods数组的每一行item~
21.2 remove(index)和splice是什么意思？
<text @click="remove(index)">删除</text>这行代码只是说："当点击时，调用remove函数，并传递当前索引"，它不执行任何删除操作！然后需要function进一步明确，所以删除是的goods.value这个数组，然后splice则进一步明确，是索引index开始的1个元素。而splice(1)则表示，留下第一行，其他全部删除，所以不能这样写~
22 表单输入框聚焦时触发和输入框失去焦点时触发
经常用于验证用户是否输入有效，比如点击表单，触发聚焦，用户输入完成，点击表单之外其他位置，失去焦点，那么就可以判断用户输入内容是否是按照要求的
当用户点击表单，就是出来一只小鸡，当用户不在表单，小鸡就会消失
23 v-model动态预览
v-model是@input简化而来的，<input :value="text" @input="event => text = event.target.value">
在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦
23.1 v-model在input中，主动预览给js有什么意义？当用户输入完成，发送时，也时一样需要正确才行的啊？那这个不是多此一举了吗？
并不是多此一举~可以提升用户体验，比如输入邮箱，当邮箱输入格式不对，v-model就能主动反馈错误，让用户进行修改，而不是当填完所有，确认时才告诉用户有错误的信息，然后在重新返回填写。
24 @confirm确认点击回车时触发
点击回车确认按钮，就会传值到value中
在<input type="text" @confirm="queren"/>中，@confirm="queren"的意思是触发确认事件，这个事件的函数名称为queren，实际执行需要在js中处理，所以
function queren(neirong){
console.log(neirong)
};
就是将这个函数的值给到neirong这个值中，这样就能打印出来，知道传递了什么，neirong只是一个名称，来我们知道传递到了哪里！
24.1 这里就想到function中为什么有的需要参数，有的不需要参数也能执行函数？
其实就是需不需要传值，像这里，表单是会传入一个值的，那么这个queren只是个函数，并不知道传递给谁，所以就需要指定一个名称neirong，意思就是触发confirm动作，执行queren函数，将input中的值传递给neirong，但是有的函数，只是一个点击，不需要传值，就自然不需要定义具体名称了~
25 热梗案例制作回顾上述知识点
代码太长，直接复制过来吧！
-------------------
<template>
<view>
近期热梗
</view>
<view>
<view>
<view v-for="(item,index) in lists" :key="item.id">
<view>{{index+1}}. {{item.title}}</view>
<view @click="onclose(index)">
<icon type="clear" size="26"/>
</view>
</view>
</view>
<view>
共{{lists.length}}条梗
</view>
<view>
<input type="text"
placeholder="请输入热梗..."
v-model="iptvalut"
@confirm="fabu"
/>
<button size="mini" type="primary" :disabled="!iptvalut.length"
@click="fabu"
>发布</button>
</view>
</view>
</template>
<script setup>
import {ref} from "vue";
const lists = ref([
{id:111,title:"刚满18岁"},
{id:222,title:"我不吃牛肉"},
{id:333,title:"遥遥领先"},
{id:444,title:"哪里贵了"}
])
const iptvalut = ref("");
function onclose(index){
lists.value.splice(index,1);
}
function fabu(){
lists.value.push({id:Date.now(),title:iptvalut.value});
iptvalut.value = "";
}
</script>
<style scoped>
.title{
font-size: 26px;
text-align: center;
color:#3c3c3c;
padding:30px 0 15px;
}
.out{
width: 90vw;
margin:15px auto;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
border-radius: 5px;
padding:15px;
box-sizing: border-box;
.list{
.row{
padding:10px 0;
border-bottom:1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 18px;
color:#333;
.text{
padding-right: 5px;
box-sizing: border-box;
}
}
}
.count{
padding:10px 0;
font-size: 15px;
color:#888;
text-align:center;
}
.comment{
display: flex;
margin-top:10px;
input{
flex:4;
background: #f4f4f4;
margin-right: 5px;
height: 100%;
height: 32px;
border-radius: 4px;
padding:0 10px;
color:#333;
}
button{
flex:1;
}
}
}
</style>
--------------------------
25.1 既然items来自lists，那为什么后续调用是{{item.titile}}而不直接写成{{lists.title}}呢？
因为lists本身是一个数组，如果调用{{lists.title}}，从字面上的意思是不是就是相当于把lists数组的titile全部调用出来了？那到底是调用数据中具体的哪个title呢？就导致无法识别了！所以才要自定义一个变量名item来表示数组中具体这行的内容，以此循环item，就能v-for循环出一组数据，并且一个item的数据中，只有一个title，就能精准调用了！
25.2 <view class="row" v-for="(item,index) in lists" :key="item.id">中前面的index和后面key中的id有什么不同？id是唯一的，为什么前面不使用id呢？
这里的index也是自定义名称，用于表示索引，和后面的id本身不是一回事，item.id中的id往往来自数据库是唯一的，能让内容对应上，因为需要涉及到删除，需要知道具体删除的是组件中的哪一行数据，所以才需要用id这个唯一值！而这里的index仅仅表示一个模板的索引，甚至可以写成 v-for="(item,xuhao) in lists"，效果也是一样的！
26 computed计算属性用法
格式：
const computedValue = computed(() => {
// 计算逻辑
return someValue;
});
27 计价统计案例
这是对之前v-for循环的补充，代码如下：
---------------------
<template>
<checkbox-group @change="itemchange">
<view v-for="(item,index) in chanp" :key="item.id">
<checkbox :value="item.id" :checked="item.checked"/>
<text>{{item.name}}</text>
<text>售价：{{item.price}}元</text>
<text @click="remove(index)">删除</text>
</view>
</checkbox-group>
<view>
<view>
选中{{shuliang.length}}个产品，总价{{zongjia}}元
</view>
</view>
</template>
<script setup>
import {computed, ref} from "vue";
const chanp = ref([
{id:"11",name:"小米",price:2000,checked:false},
{id:"22",name:"华为",price:2500,checked:false},
{id:"33",name:"苹果",price:6000,checked:false},
{id:"44",name:"魅族",price:2000,checked:false},
]);
const shuliang = ref([]);
const zongjia = computed(() => {
return chanp.value.filter(item => item.checked)
.reduce((prev, curr) => prev + curr.price, 0)
}
)
function remove(index){
chanp.value.splice(index,1);
}
function itemchange(e){
shuliang.value = e.detail.value;
chanp.value.forEach(item=>{
item.checked = shuliang.value.includes(item.id);
})
}
</script>
<style scoped>
.out {
padding-top: 10rpx;
padding-bottom: 10rpx;
checkbox {
padding:0px 0px 0px 10rpx;
}
.name {
padding:0px 10px 0px 10rpx;
}
.del {
color:red;
padding-left:30rpx;
}
}
</style>
---------------------
27.1 计算属性结构
const 计算属性 = computed(() => {
// 计算逻辑
return 计算结果;
});
27.2 filter() - 数组过滤
item => item.checked：过滤条件（返回 true 保留元素） 是不是就是说，原来chanp.value输出的结果应该是全部的数组，现在我要过滤出checked是true的那几行数组？
是的，通过过滤函数filter，将checked为true的保留下来。
逻辑：
array.filter((当前元素, 索引, 数组本身) => {
// 函数体
});
举例:
const cities = ["北京", "上海", "广州", "深圳", "成都"];
const filteredCities = cities.filter(city => city.startsWith("上"));
console.log(filteredCities); // ["上海"]
27.3 .reduce((prev, curr) => prev + curr.price, 0)中，这个reduce是什么意思？然后prev，curr是什么意思？reduce的固定语法是什么？
reduce常用于将数组元素"缩减"为单个值
reduce() 需要两个参数：
prev：累积器（当前结果）
curr：当前元素
可以理解为：
.reduce(
(prev, curr) => { // 需要用到prev这个累积容器，以及用curr来获取当前数值内容
const price = curr.price; // 获取数组中price的值
const newTotal = prev + price; // 加到累积容器中
return newTotal; // 输出总值
},
0 // 初始总计为0
)
用法示意：
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((prev, curr) => prev + curr, 0);
console.log(sum); // 10
27.4 那reduce除了 prev和 curr这两个参数外，还有其他参数吗？
有的！
prev：累积器（必需）
curr：当前值（必需）
index：当前索引（可选）
arr：原始数组（可选）
27.5 如何查看选中状态？
在uni-app中，有<checkbox-group @change="itemchange">中的@change来实现
这里要注意@change中有说明，要实现触发change事件，需要有value值，然后在下面属性中，value的类型是String，所以数组中唯一的值就是id，并且需要将id变成字符串，所以加上了“”双引号~
然后在循环中，在添加checked的属性，来说明是否被选中，最后就得到了
<checkbox :value="item.id" :chenked="item.checked"/>
其中value动态获取item数组中的id唯一值，然后checked动态获取，item数组中checked的属性
最后，创建对应的选中change函数
function itemchange(e){
shuliang.value = e.detail.value; //可以看到选中后，e打印出来就是下面图片中显示的数组ID
chanp.value.forEach(item =>{
item.checked = shuliang.value.includes(item.id);
})
}
console.log(e);打印后，可以看到其中的参数是一个数组类型，如下图：
然后，为了获取多个选中的数组，还需要创建一个空的变量
const shuliang = ref([]);
这样多选后，shuliang就可以显示出对应数组内容中的id 数组了！然后在通过函数中，shuliang.value = e.detail.value; 得到对应的shuliang对应的数组，但是为了后面计算中，需要筛选被选中的值，需要返回true和false，所以增加
chanp.value.forEach(item =>{ item.checked = shuliang.value.includes(item.id);})
也就是遍历数组，在shuliang.value中，通过放法includes方法来查看是否包含item.id，如果包含，则返回true，然后赋值给item.checked，是默认的false变成true
最后在模板中，通过 {{shuliang.length}} 或者id数组的长度，得到最终显示被选中的个数。
27.6 为了好理解，增加一个includes的用法，includes()是 JavaScript 中非常实用的方法，用于检查数组或字符串是否包含特定元素
// 检查水果数组中是否包含 "apple"
const fruits = ["apple", "banana", "orange"];
console.log(fruits.includes("apple")); // true
console.log(fruits.includes("grape")); // false
这样相对来说，就比较简单明白了！所以 item.checked = shuliang.value.includes(item.id) 那么勾选就命中，item的id，就符合判断，true值给item.checked。
27.7 forEach()的用法举例
forEach()就像是一个邮递员~他拿着一个名单（数组），挨家挨户（每个元素）送信（执行操作）
格式：
数组.forEach( 参数名=> { //参数名可以自定义
// 对每个元素执行操作}
)
例子：
const shoppingCart = [ {name: "苹果", price: 5}, {name: "牛奶", price: 10}, {name: "面包", price: 8} ];
shoppingCart.forEach(item => {
console.log(`扫描: ${item.name} - ¥${item.price}`); });
// 输出：
// 扫描: 苹果 - ¥5
// 扫描: 牛奶 - ¥10
// 扫描: 面包 - ¥8
28 watch和watchEffect()监听器
会监听到原始输入值和新输入值
还有watchEffect()是监听所有，所以性能消耗非常大，不太建议使用。
29 uni-app创建组件
组件类似网站模板模块一样，比如写一个导航，这个导航模块就可以调用到其他各个网页上，后续只要修改导航一个模块，就能整体运用~
29.1 创建组件
需要将文件放在指定的文件夹components下，这样右击文件夹弹出来的就是新建组件了
29.2 引用组件
在模板页面中，只需要写入<UserInfo></UserInfo>组件标签就可以了！
甚至可以把组件，当标签一样使用，比如增加v-for循环，如：<UserInfo v-for="item in 3"></UserInfo>
30 在组件中通过Props进行数据传递
数据传递可以让相同的组件，进行差异化展示
首先父页面内容：
然后 子页面内容
需要搞清楚的逻辑是，组件页面其实相当于需要设置参数名，也就是什么地方会用到不同的参数
而父页面在展示时，在不同的页面，需要展示的内容是不一样的，就需要调用不同的内容在子元素中
所以在构建组件时，可以先在父页面 写出大致框架后，在将模板复制到组件页面中，这样就能更准确的知晓，哪些页面需要动态变化了！
30.1 在学习到这个章节时，我突然有了一个疑问，就是调用时，为什么有时用v-bind，有时用{{ }}？
在属性时，为了让浏览器或者设备能识别，所以需要将属性时转变为v-bind，不然就不好识别！比如案列中的src="touxiang"，设备在识别src时，默认识别touxiang，是无法显示出图片的，所以需要告诉设备，现在这个src会传入参数，所以就变成了 :src="touxiang"，而这个参数是 touxiang~
那么相对于模板中，使用{{}} 双重花括号，也是一样的道理，就是为了让设备识别。
31 让Props具备默认值
当没有内容传入时，可以传入默认值，让前端显示完整。
32 用对象数组让props进行循环
涉及到列表时，可以使用数组形式，让props进行循环
组件其实就是一个页面，先将页面写出来后，将需要修改数据的位置，用defineprops进行默认值定义，比如定义对象，就直接有了对象的名字。为obj，然后对象下面的参数，分别是name和url~最后在模板中，则将具体的数据传入进去即可。
33 利用插槽<slot></slot>生成更加定制化的组件
33.1 基础用法
在组件中引入插槽概念能预留位置给不同页面展示不一样的内容，比如下图中，2个demo页面中中间区域展示不一样！
33.2 具名插槽
当一个页面有多个位置都需要使用插槽时，就可以给插槽取个名字！比如：<slot name="header"></slot> 然后在模板中用
<template v-slot:header>
<!-- header 插槽的内容放这里 -->
</template>
也就是v-slot:header进行区别调用，也可以将 v-slot:header，简写成#header，如下图：
34 组件种emit声明触发事件
正常都是父组件向子组件传值，通过emit可以实现从子组件向父组件传值，比如搜索框，一般都是子组件，那么用户在搜索时，内容是在子组件产生的，就需要通过子组件将搜索内容传递到父组件，然后进一步调动搜索。
35 生命周期的理解
每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。
我用一个简单的例子来说一下生命周期的理解，就是用户打开一个页面，这个页面是由非常多的节点组成的，这时需要想后台传输指令，去调用数据，然后数据在返回到前端页面，最后相互工作，最后呈现出完整的页面，但是当用户在这个页面中，点击了其他页面，跳转到了其他页面，这个页面只是挂在后台，并没有销毁，所以用户返回后，这个页面就又能展示出来，所以只有设置了资源占用，时间太长，或者用户关闭，这个生命周期就结束了。
生命周期本质是：
创建：组件诞生（beforeCreate→ created）
挂载：加入页面（beforeMount→ mounted）
更新：响应变化（beforeUpdate→ updated）
隐藏：后台运行（deactivated）
激活：重回前台（activated）
销毁：释放资源（beforeUnmount→ unmounted）
36 使用defineExpose暴露子组件的属性和方法
36.1 <demo-child ref="child"></demo-child>的，ref="child"是固定的吗？
ref是固定的，ref是一个特殊属性，用于获取组件实例或 DOM 元素的引用，所以这边<demo-child ref="childe"></demo-child> ，就能让子组件的defineExpose中的内容得到暴露~
36.2 我常常看到一个词，叫DOM，这到底是什么意思？
DOM（文档对象模型）就是浏览器中网页的完整结构表示
36.3 父组件中ref="childe"，也就是调用父组件中的ref的childe的值，也就是const childe = ref(null);，为什么就能显示出子组件defineExpose中暴露的内容呢？子组件也没规定childe等参数？
这是固定用法，只要父组件上有ref属性，并传入空值，就是能让这个属性获取子组件中暴露的内容
36.4 就是当我在父组件中，删除onMounted，就无法执行了，这是为什么？
简单来说，就是父组件调用子组件，子组件返回暴露数据给父组件，这需要时间，而onMounted是挂载完成的确认信号，当没有这个信号是，数据可能还是会显示父组件的原始null空置，而无法将子组件暴露的数据传递给ref属性。
37 页面生命周期onload和onready
onload有一个重要的功能，就是可以通过url传递参数
在url中传递 name 和 year参数
然后在下一页
onready比onload要后面，是挂载初步完成后，才能显示的，比如用scroll举例：
37.1 这整个流程是怎样的？
37.2 那和nMounted又有什么区别？或者在什么过程中？
这里其实有个混淆概念，就是onMounted≈ 组件的 onReady，因为onMounted是组件生命周期，而onReady这些属于页面生命周期，是2个不同的概念，组件生命周期流程如下：
beforeCreate → created → beforeMount → onMounted → beforeUpdate → updated → beforeUnmount → unmounted
那么全部包含的生命周期是怎么样的呢？
38 onshow和onhide钩子的对比
38.1 onshow说明
可以通过console观察到，onload是最先执行的，然后执行onshow，最后执行onready~~就像上面讲到的过程一样~~其中需要注意的就是onshow有一个隐藏功能，就是当用户重新返回页面，会单独只触发onshow，直接展示页面~
38.2 onhide说明
就是和上面onshow差不多，就是当用户切出后，就会执行onhide，也就是隐藏了，然后用户返回，又执行onshow
39 onUnload页面卸载和onPageScroll监听
onUnload页面卸载就是重新打开新的页面，并取消之前页面的缓存，就会出现，相当于清除了所有缓存。而onPageScroll就是滚动页面监听，比如在网页端，页面往下滚动，在右侧就会出现一个返回顶部之类的按钮，就是页面监听类似的效果了。
40 @import样式css的导入
41 pages.json页面路由下globalStyle的全局样式
详细可以了解下官网说明，这里就不一一说明了，因为还涉及到不同平台之间的使用问题
42 pages设置页面路径以及窗口表现
42.1 pages中style属性，其实和全局属性差不多，在官网中都有相应的属性介绍
42.2 页面显示顺序，可以通过调换pages中的数组顺序发生改变
43 TabBar设置底部菜单选项以及icon图标和font字体
就是底部导航，属性名称就是TabBar~主要关注一下必填选项
44 manifest.json 应用配置
这里可以设置微信小程序id等
45 vite.config.js中安装插件
vue2使用的是vue.config.js，而vue3使用的是vite.config.js~
这里需要安装node.js，否则无法执行命令：npm install unplugin-auto-import@0.16.1 -D
安装好后，就会出现
这个包比较大，但是只在开发时有用~项目完成后，是不会打包的
然后在根目录下新建vite.config.js，后复制黏贴
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import AutoImport from 'unplugin-auto-import/vite';
export default defineConfig({
plugins: [
uni(),
// 自动导入配置
AutoImport({
imports:[
// 预设
'vue',
'uni-app'
]
})
]
});
其中的预设就是vue和uni-app，这样在项目中，就不用写 import {ref} from "vue"; 这样的声明了，可以提高开发效率！
46 API交互反馈中 uni.showToast的用法
是一个居中的消息提示框，有一些属性提供，下面就是点击按钮，触发方法~
47 uni.showLoading加载
比较简单，和之前的showToast用法一样~
48 uni.showModal模态弹窗
49 uni.showActionSheet从底部向上弹出操作菜单
50 动态设置页面导航条的样式
动态标题，就是在浏览不同页面时，比如文章时，标题会根据文章标题来动态显示的一个效果~所以往往用于固定模板时显示不同内容的情况，类似文章页面！
51 uni.setTabBarItem改变全局导航名称
这个要放在app.vue中进行修改
index就是序号，修改后如下：
52 uni.setTabBarBadge为某一项的右上角添加文本
53 uni.showTabBarRedDot显示 tabBar 某一项的右上角的红点
54 页面和路由API下uni.navigateTo
uni.navigateTo保留当前页面，跳转到应用内的某个页面
还有其他一些跳转方式，可以自行参考下页面和路由内的文档
55 API的数据缓存 StorageSync
55.1 同步方式 uni.setStorageSync
前面是字段名称，后面的缓存的内容，什么数据类型都可以存储，然后在设备中，就能看到缓存了
55.2 读取缓存uni.getStorageSync
55.3 删除缓存 uni.removeStorageSync
56 uni.request 发起网络请求的三种回调方式
这是国外一个接口测试用的网址：https://jsonplaceholder.typicode.com/
56.1 通过success回调
56.2 通过then获回调
56.3