NanChen的博客

vite + vue3 + ts 移动端开箱即用现代开发模板。

【代码】Vue3+Ts+Element-Plus多级表头以及动态合并单元格。

用来约束泛型类型，比如我想写一个函数，用来检查对象中是否存在某个 key，如果存在则返回 true，否则返回 false，我们可以使用泛型约束来实现这个功能(此处后面会提到)比如我想写一个函数，用来检查对象中是否存在某个 key，如果存在则返回 true，否则返回 false，我们可以使用泛型约束来实现这个功能。用来获取对象的 key，比如我想写一个函数，用来获取对象的 key，我们可以使用泛型约束来实现这个功能。泛型类型允许我们创建可以适用于多种类型的类，类中的成员可以使用泛型类型进行声明和使用。

自定义组件的生命周期，路由以及传参写法

ArkTS 提供了渲染控制的能力。条件渲染可根据应用的不同状态，使用 if、else 和 else if 渲染对应状态下的 UI 内容。写法和 TS 的一样，简单看一下即可效果：另外，@State 定义的变量归父组件所有。因此，当子组件实例被删除时，该变量不会被销毁。子组件通过@Link装饰器引用状态。状态必须从子级移动到其父级（或父级的父级），以避免在条件内容或重复内容被销毁时丢失状态。

看下面这张图Components部分的装饰器为组件级别的状态管理，部分为应用的状态管理。开发者可以通过@StorageLink/@LocalStorageLink 实现应用和组件状态的双向同步，通过@StorageProp/@LocalStorageProp 实现应用和组件状态的单向同步。

当我们需要写多个文本不同但样式相同的效果，需要使用自定义组件来实现，下面是需要注意的几点@Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力，需要实现build方法描述UI，一个struct只能被一个@Component装饰。@Entry放在哪个组件前面，哪个就在页面上显示在Entry组件中，build()中必须有且只有一个更组件自定义组件必须定义build()函数定义一个的组件@Component。

原生鸿蒙OS安装以及运行初始项目

自动解析TS文件

TS枚举

两种方案：第一种点击添加按钮添加一项，缺点：页面过于臃肿，用户体验较差第二种：分成两种页面进行添加等操作先说一下第一种，我这里用到了vant3Ui组件库直接上代码：新增节点其中obj里的对象名称要跟reactive中创建这个的数组里的名称一样Vue3是通过v-model生成新的节点，无需用克隆节点生成新的Dom这里因为不需要进入页面，所以直接引入接口就可以了，无需写编辑事件删除：获取对应选中的div盒子，之后对盒子进行删除操作第二种方法下面是详情页这个是把数据存到本地上了，真实项目需

vue3+vant做h5转App时，会遇到用手机上的返回键会直接回退到手机桌面，只能用过按钮来实现back回退，网上也有很多实现方法，但mui对vue3来说可能不太支持，所以这里使用原生js的方法实现。完成后通过npm run build打包在手机上进行查看。在index.html中引入vant链接。事件来对物理返回键进行配置。接着写js部分，通过。

打包出现字体文件过大怎么办？压缩字体后出现问题怎么办？来看这篇文章哦~

超级好看的loading样式！！我这里是采用loading为例子制作的随机背景效果（底部附上代码和成品效果展示）

这里的provide和inject可以实现嵌套组件之间进行传递数据。直接看代码即可：首先，需要修改一下app.vue文件，通过reload方法来控制router-view的显示或者隐藏写好之后就可以在子页面中调用即可最后看一下项目实现效果:这时候就有人问了，为什么不适用location.reload()或者router.go(0)来刷新页面呢？这里的缺点也显而易见，这种刷新就类似于ctrl+F5来进行强制刷新，整张页面看起来会出现白屏的现象，用户交互的体验感不好，而这种用provide和inje

想要通过v-if或者v-show来实现动画的衔接动作，也看了网上的一些例子，这里给总结一下。这里如果是想点击一次过渡过去再次点击一次过渡回来的话，是不需要给两个不同的。这种过渡效果很简单，只需要用if语句来判断动画出现顺序即可。标签设置两种动画，只需要用同一个动画即可。就不需要加**name=‘h1’**了。

因为这里使用的是Vant移动端写的，所以不好给自带的input框添加foucs样式，所以我这里就给他一个hover代替点击焦点样式，效果是一致的。

组件中通过new Url('路径/${图片}',import.meta.url).href。在接口中只需要写入图片名称，通过函数的形式拼接字符串，vite中有专门的写法。

找到vite.config.ts。

Vue 3 + TypeScript + Vite + Element-Plus + Router + Axios + Pinia项目搭建（内含完整架构）

因为复选框选出来的值为数组形式，这里的listData里面的这个checkboxZL是一个对象的形式，我们这里需要转换一下。

这里稍微注意一下动态的name要绑定循环的列表中的name。首先我们这里要给前一个页面配置相应的数据结构。这里是通过Pinia去写✈️。

在vite中使用mockjs进行模拟数据，需要借助新的依赖进行使用。如果只是本地开发环境时使用，直接看下面即可步骤。

该模板将帮助您开始使用Vue3、Vite3.0中的TypeScript以及Pinia、Vant3进行开发。该模板使用Vue3，请查看文档了解更多教程。