浩星

目前我们在开发移动端h5项目，小程序项目能使用的功能是有很多的，比如vant移动端，vant小程序端，这里我们说一说uview 这个帮手。

arco design/antd中实现一个需求，列表的每一行都要有自己不同的样式，根据不同的数据，下面分享实现这个效果的方法。

在我们的项目中，开发企业微信内部的项目的话，分为两种，1种是直接开发企业微信的小程序，另一种则是企业微信内嵌我们的H5界面，我们这里讲一讲企业微信内嵌h5的方法与注意点。

在很多时候，我们使用日期组件的时候，不希望每次都是点击弹出日期弹框，而是，点击日期弹框直接能展示在界面上，在这里我们介绍下 使用acro 来更加轻松的实现他的效果。

在vue2于2023年底正式宣布不在维护，vue3使用越来越频繁的时刻，我们实现项目的辅助框架也越来越多。element, iview, antd 等经典框架继续风靡一时，不过也有很多好的框架，功能也强大，比如我们今天说的主角 arco.design ，他是字节跳动的产品，从2022到今天，经历了时间的检验，他的ui性能，功能的扩展都是很强大的，这里说说他的使用。

vue/vue3/js来动态修改我们的界面浏览器上面的文字和图标

vue3项目中实现打字机的效果。

项目中如果想本地开发使用px，但是界面上线以后界面是自适应的效果,可以有多种方式来实现效果。

layui这个框架不知道多少人还在关注着，记得第一次接触它是在18年，后来随着vue，react的盛行，jquery+layui的模式受到了特别大的冲击，后来作者都放弃维护他的官方网站，转而在github/gitee上做后期维护了，但是现在好消息，他又升级了，现在可以在vue3上使用他了，而且功能更加强大，对比element/iview/antd 这些流行框架，他也有很多自己的特色。从2022.9开始发布稳定版本的它，在经历了风雨后，也将绽放他的魅力！

分享下个人使用的一个好的js库，里面封装了大量的方法，比如数组根据对象某个属性去重，比如我们移动端中经常会有防抖节流的应用场景，拷贝对象的时候，修改他的值，老是影响源数据，等等系列的问题都可以有很便捷的方法来解决！

vue3+tsx+element-plus中遇到的一些问题总结

类型安全：TSX 可以帮助开发者在编写代码的过程中检测类型错误，减少运行时错误的发生，并提高代码可维护性。更好的代码提示：在使用 TSX 编写代码时，开发者可以享受到更好的编码提示和自动补全功能，从而提高编写代码的效率。更容易维护：在使用 TSX 编写代码时，代码结构更加清晰明了，可读性更高，使得代码的维护更加容易。容易与 React 生态系统集成：TSX 是 React 生态系统中广泛使用的一个技术栈，使用 TSX 可以更容易地与其它开源组件和库进行集成和协作。

Luckysheet

提供一个json的文件，我们把它渲染到界面上，是一个动图，我们这里来分享下，如何在我们的vue3中来使用他。

vue3中将后端传来的json文件转成excel下载到本地

vue3+vite中实现图片的预览的更好展示，这里推荐：v-viewer,但是注意，vue3的版本更新了，命令是v-viewer@next

好用的状态管理器，vue3中出来的pinia，相比较vuex来说，更加轻便，使用也更方便。

vue3+vite的项目中实现右键事件的神器：@imengyu/vue3-context-menu

vue3项目中，vite提供了按需引入的插件：unplugin-vue-components/vite ，使用他以后，我们再也不用挨个引入组件了，相当方便。

你是否还在为vue3项目中每个组件都需要单独引入vue而烦恼着，实际vite有一个插件能很好的解决这个问题，那就是 unplugin-auto-import/vite

在写vue3+vite组合的项目中，很多时候我们都需要配置本地路由，实际vite有个神器来提高效率，把配置本地路由的工作代替我们处理掉。

ts相比较js来说，是比较严格的，他中间新增了很多可选链符号，比如：?. ?: !.

vue3+vite中报错Error: Module "path" has been externalized for browser compatibility...

vue3+vite中使用path-to-regexp以及相关的报错问题

在vue3+vite创建的项目中使用vuex,并使用vuex-persistedstate持久化储存数据

vite中是不支持 require的，他推出了一个类似的功能，就是用import.meta.glob来引入引入多个，单个的文件

vue3+vite中实现全局的自定义svg效果。

vue3+vite 全局组件注册与使用

vue3中实现一个动态滚动的时钟效果

vue3中界面使用router，以及使用watch来监听router的改变

vue3项目中使用sass时报错不认识mixin.

前言： Vue-Vben-Admin是一个基于Vue3.0、Vite、Ant-Design-Vue、TypeScript的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习vue3、vite、ts等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。官方入口：...

前言：在vue中使用js-cookie 来实现对cookie的存储管理。vue3:1、安装npm install --save js-cookie2、新建配置文件 unit.tsimport Cookies from 'js-cookie'// cookie保存的天数export const TOKEN_KEY = 'NOW_TOKEN'export const setToken = (token:string, cookieExpires:any)...

前言：在vue中使用crypto-js 来实现对密码的加密和解密。vue3:1、安装：npm install crypto-js2、封装方法 aes.jsimport CryptoJS from 'crypto-js'/** * AES 加密 * @param word: 需要加密的文本 * KEY: // 需要前后端保持一致 * mode: ECB // 需要前后端保持一致 * pad: Pkcs7 //前端 Pkcs7 对应 后端 Pkcs5 ...

前言：很多次搭建好项目之后，存放到git上面，然后别人拉去的时候，会报一些缺少配置的错。在这里整理下。1、vue3版本（1）本地创建项目，git提交代码，git拉下代码（如果要用创建的项目，把包删除）（2）打开package.json，在 devDependencies 添加"vue-loader-v16": "^16.0.0-beta.5.4","webpack": "^4.46.0"（3）安装包，检查效果cnpm i2、vue3+ts版本（1）本...

前言：vue3的 setup中是获取不到this的，为此官方提供了特殊的方法，让我们可以使用this，达到我们获取全局变量的目的，但是在使用typescript的时候，就会有一些新的问题产生，这里来做一个整理。vue3官方提供的方法1、引入方法import { getCurrentInstance } from 'vue'2、定义变量，接到我们的方法setup() { const { proxy } = getCurrentInstance()}3、...

前言：vue2的时候，分享了一个很好用的插件是vue-aplayer,但是他是不支持vue3的，这里分享vue3使用APlayer来实现一个播放器的方法。实现效果：官方：git地址：点我api地址：点我实现步骤：1、安装npm:npm install aplayer --saveYarn:yarn add aplayer2、页面中引入import APlayer from 'APlayer';import 'A...

前言：这里整理下，vue2,vue3中用饿了么框架的列表，序号随页增加的功能vue2:page=当前页，pageSize=一页显示多少条type="index" :index="indexMethod"// 序号翻页连续排序 indexMethod(index) { return (this.page-1)*this.pageSize+index+1; },vue3:page=当前页，pageSize=一页显示多少条页面：<el-table-c

前言：vue3的插槽使用方法发生了改变，和vue2相比较。使用vue2的写法，会报错：`slot-scope` are deprecatedvue2：上下对应，title是自己随便起的名字1、定义一个普通的插槽，可以用div，任何标签<div slot="title"></div>2、定义一个element列表里面插槽的标签<div slot="title" slot-scope="scope"></div>.

前言： vue3.0实现echarts立体柱图实现效果：实现步骤：1、安装echartscnpm i --save echarts2、页面定义容器<template> <div ref="echart" class="echartDiv"></div></template>3、js中引入echartsimport * as echarts from 'echarts';组件完整源码：...