避坑指南 及 注意事项

[已在公司作为模板商用]

三方包引入尽可能小写，自定义尽可能大写。

推荐使用pnpm安装依赖，其次yarn或者npm

nodejs >= 16 && nvm && pnpm

curl -fsSL https://get.pnpm.io/install.sh | sh -

Vite 插件

https://vuejs.org/

开发问题 Typescript 和 TSX TS的泛型 在结合 tsx 的时候使用as形式 \

安装及打包

避免使用vue-tsc，目前和typescript、jsx出现各种冲突
使用pnpm安装包的时候需要修改package.json的文件，删除掉resolutions里面的//
npm安装依赖包出现错误或安装失败，选择yarn安装
注意所有配置菜单的数据，均由前端提供
！！！注意VUE3中的reactive使用，如果需要更新视图需要抽出interface。！！！

对应包使用解释

项目本身配置99%都在vite.config.ts里面，参数设置都在根目录下，而非src下
src下的config目录是系统默认参数，及部分数据配置

命名规范及解释

1、命名遵循驼峰规则：demoUser
2、配置文件均按照xxConfig，参数设置均按照xxSetting，数据配置均按照xxOption：
3、封装的函数均按照function格式导出，业务函数均按照() => {}格式书写：export function FN() {}
4、Store中对外函数命名均为useXx：
5、API前端使用及后端接口命名规则对应：
列举，可以对此进行变更

接口	前端	后端
读取	search / query	read / get
写入	save / add	create / set
编辑	edit	update
删除	remove	delete
上传	upload	import
下载	download	export

6、interface尽量抽取出来，且抽取到最小粒度

配置解释

大家根据使用的包来自行搜索下吧，大部分配置都是兼容、打包等 1、不建议在本项目中使用自带的Link和Iframe，因为存在多个Link的时候出现问题，且点击Link后再切换Iframe有一个bug：

已完成 Admin

• 基本的admin功能都已涵盖，

基础核心依赖 https://vue3js.cn/

推荐一个插件比较全的网站

https://hu-snail.github.io/vue3-resource/

无特殊说明均对应最新版

脚手架

vite || 官网
vue-cli

vue

vue3 || 官网

路由管理

vue-router || 官网

状态管理

Pinia || 官网
vuex || 官网

js核心

core-js

http请求

axios || 官网
qs

解析相关

TS

typescript || 官网

样式组件 -D || 注意重写组件样式的引用

sass<=>坑逼一个，小心慎用
sass-loader
node-sass
less
less-loader
style-resources-loader
svg-sprite-loader
text-loader
vue-style-loader
vue-template-compiler

浏览器样式补全 autoprefixer

语法检查 -D

eslint
prettier || 个人推荐这个
eslint-plugin-prettier

节点和浏览器的BDD / TDD断言库

chai
cross-env

环境配置获取

dotenv

UI相关

小插件合集

UI 官方

element-plus || PC 官网
arco 字节 || PC 官网
tdesign 腾讯多端UI
elementUI || vue2 PC 官网
ant-design-vue || PC 社区维护 请自行斟酌 官网
vuetifyjs || PC 官网
vuetifyjs || PC 官网
bootstrap-vue || vue2 PC 官网
vant@next || M 官网
mui uni-app || M 官网
mui || M 官网
mint-ui || M 官网
nutui @nutui/nutui@next || M 官网
VARLET || M 官网
Wave UI || M 官网
ionicframework || M 官网
quasar || 官网
heyui || 官网
BalmUI || 官网
antoniandre || 官网
naive ui || 官网
primefaces || 官网
Vuestic UI || 官网
iDux || 官网
relaxplus || 官网

静态UI PC H5

H5 zeptojs
PC javascript
Framework7
Foundation
Onsen UI
Ionic
Bootstrap

图标

iconpark 官网

其他三方库

vxe-table || 官网(包含支持v3)
vue-grid-layout

加载 loading

nprogress
vue-simple-spinner
vue-loading-overlay
vue-progressbar
vue-spinner
vue-blockui

进度条-滑动条

vuejs-progress-bar
vue-slider-component
vue-radial-progress

轮播图

swiper 支持PC、H5 结合 vue-awesome-swiper 使用
vue-concise-slider
@splidejs/vue-splide

树

vue-treeselect

拖拽

vuedraggable
vue-grid-layout

全屏

screenfull

数据表格

xlsx

html2canvas，页面截图

html2canvas

cookie管理

js-cookie

文件上传及保存

file-saver Uppy 官网 Vue-filepond 官网

二维码

qrcode
qrcodejs2
vue-qr

日期格式化

date-fns
dayjs
~~~moment~~~ 不再推荐

日历

vue-functional-calendar
vuejs-heatmap

富文本编辑器

tiptap || 官网
wangeditor || vue3 官网
wangeditor || vue2 官网
wangeditor || react 官网
wangeditor || js 官网
Quill
vue-quill-editor
ckeditor5-vue
TinyMCE 6 官网 || 官网 Froala
Trumbowyg
slate
squire
summernote

Markdown编辑器

Vditor 官网
Vue-markdown-editor 官网
Md-editor-v3 官网

剪切板

vue-clipboard2

Loading动画

three-dots 等待效果

开屏渲染动画

animate css库 官网
gsap库 官网
angrytools | angrytools
animista
minimamente
vue-kinesis
tsparticles 粒子动画
vue-prlx 滚动视觉差
vue-page-transition 过渡
Animatopy
wickedCSS
cssanimation

鼠标动画

ianlunn 鼠标放上效果 | 官网
animxyz
elrumordelaluz 鼠标放上效果
基本形状
案例 特效 1
案例 css技巧 1
案例 css技巧 2

数据操作

加密解密

crypto-js
md5
bcryptjs
jsencrypt
jsrsasign
base64-js
js-base64

ua签名

ua-parser-js

本地数据存储

lodash
lowdb

国际化

vue-i18n
i18n-next

复制粘贴

clipboard

三方授权登录集成库

next-auth
@okta/okta-auth-js
hellojs

分享插件

vue-social-sharing
vue-socialmedia-share
@vue/shared
@vue/cli-shared-utils
nativeshare || 唤起浏览器自身分享组件

地图

vue-amap || 高德
vue-baidu-map || 百度

绘图 3D

three.js || three.js

office 预览、上传、导出、导入 包含：xls，xlsx，doc，docx，pdf，csv

文件类型判断 file-type
Office Excel handsontable
Office Word mammoth
PDF pdfjs-dist
PDF vue-pdf vue2
@vue-office docx excel pdf v2需要安装依赖 vue-demi

代码提交信息校验 -D

husky
commitizen
cz-conventional-changelog
cz-customizable

适配移动端 -D

rem方案过时啦，用vw方案解决吧
postcss postcss-loader || 将px转rem
vw方案 需要依赖style-loader 且需要删除@vue/cli-plugin-eslint
cssnano
cssnano-preset-advanced
postcss-aspect-ratio-mini
postcss-cssnext
postcss-import
postcss-px-to-viewport
postcss-url
postcss-viewport-units
postcss-write-svg
rem方案
amfe-flexible || 不再推荐 lib-flexible 按照比例缩放展示，基于不同设备（Android、iOS、brow）的px值
postcss-pxtorem
postcss-plugin-px2rem
postcss-px2rem

移动端调试 -D

vconsole

支付

stripejs 官网
vue-stripe-elements-plus 官网
vue-stripe 官网

视频播放

vue-video-player
vue-core-video-player

游戏

Eva.js Eva-plugin-renderer Eva-plugin-renderer-img 官网

3D

WebGL
threejs 官网 GitHub
babylonjs 官网
AR model-viewer

特效

文字

vue-textra

展示异常

vue-show

移动端日志

eruda
vconsole

跨端框架推荐：包含小程序啥的

uni-app 官网 || 全平台跨端含APP等等
taro 官网 || 3.x已支持vue
mpvue 官网 || 美团
wepyjs 官网 || 腾讯 需要学习wepy

APP开发

cordova 官网
Native Script 官网
React Native 官网

其他组件参考

组件
百度，这是一个神奇的东西

好玩的？

水墨文档
聊天
createjs
Phaser 还有人用吗？

专业开发200年

Unity 3D(C/JS) 3D大佬！
Cocos(C/TS) 2D、2.5大佬！
Unreal(C++) 这是一个追求画质的游戏引擎

移动端推荐

vant
Tencent
vite

小程序端UI

vant
taro | github
Tencent
mini | github
wux
ColorUI 更新频率慢
touchwx 不推荐，停更了
iview 不推荐，停更了

由于其他因素相关的Web 库也放这里

UI

Bootstrap
heyui
varletjs | varletjs

优秀项目推荐

示例集合

https://github.com/vitejs/awesome-vite \

https://github.com/nekobc1998923/vitecamp
https://github.com/XPoet/vite-vue3-starter
https://github.com/xxxsf/vue3-h5-template

other vite doc

https://github.com/sl1673495/blogs
https://github.com/cuixiaorui/mini-vue

Vue 3 vite

vue3-antd-admin

Admin server & Web

https://github.com/jeecgboot
https://github.com/flipped-aurora
https://gitee.com/likeadmin

Admin vite

https://github.com/vbenjs/vue-vben-admin
https://github.com/xiaoxian521/vue-pure-admin
https://github.com/jekip/naive-ui-admin
https://github.com/HalseySpicy/Geeker-Admin
https://github.com/newbee-ltd/vue3-admin
https://github.com/buqiyuan/vite-vue3-admin
https://github.com/buqiyuan/vite-vue3-lowcode
https://github.com/RainManGO/vue3-composition-admin/tree/vite
https://github.com/cmdparkour/vue-admin-box
https://github.com/GeekQiaQia/vue3.0-template-admin
https://github.com/jeecgboot/jeecgboot-vue3
https://github.com/lyt-Top/vue-next-admin
https://github.com/jzfai/vue3-admin-plus
https://github.com/tobe-fe-dalao/fast-vue3
https://github.com/gmingchen/vue3-element-plus-admin/tree/vite-pinia
https://github.com/lin-xin/vue-manage-system

project

https://github.com/geekskai/vue3-jd-h5
https://github.com/biubiubiu01/vue3-bigData
https://github.com/jeecgboot/jeecg-boot
https://github.com/flipped-aurora/gin-vue-admin
https://github.com/biaochenxuying/blog-vue-typescript
https://github.com/Yin-Hongwei/music-website
https://github.com/pipipi-pikachu/PPTist
https://github.com/Codennnn/vue-color-avatar
https://github.com/youlaitech/youlai-mall

http://k21vin.gitee.io/front-end-data-visualization/#/native/pureCSS/loading
https://juejin.cn/post/7037036742985121800