Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sonofmagic/uni-app-vite-vue3-tailwind-vscode-template
uni-app vue3 tailwindcss 模板,集成了 iconify,eslint,typescript,prettier 等等工具作为解决方案
https://github.com/sonofmagic/uni-app-vite-vue3-tailwind-vscode-template
iconify tailwindcss template typescript uni-app vite vue vue3
Last synced: 2 days ago
JSON representation
uni-app vue3 tailwindcss 模板,集成了 iconify,eslint,typescript,prettier 等等工具作为解决方案
- Host: GitHub
- URL: https://github.com/sonofmagic/uni-app-vite-vue3-tailwind-vscode-template
- Owner: sonofmagic
- License: mit
- Created: 2022-02-20T15:54:11.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-01T01:46:18.000Z (3 months ago)
- Last Synced: 2024-10-09T23:09:13.464Z (2 months ago)
- Topics: iconify, tailwindcss, template, typescript, uni-app, vite, vue, vue3
- Language: Vue
- Homepage: https://uni-app-tw.netlify.app/
- Size: 2.79 MB
- Stars: 191
- Watchers: 2
- Forks: 28
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# uni-app-vite-vue3-tailwind-vscode-template
基于 `uni-app` 的 `vite` + `vue3` + `tailwindcss` 模板
假如你觉得好用,欢迎给我的 [`weapp-tailwindcss`](https://github.com/sonofmagic/weapp-tailwindcss) 点个 `Star` 吧。
官网地址:
## 特性
- ⚡️ [Vue 3](https://github.com/vuejs/core), [Vite](https://github.com/vitejs/vite), [pnpm](https://pnpm.io/) - 快 & 稳定
- 🎨 [TailwindCSS](https://tailwindcss.com/) - 世界上最流行,生态最好的原子化CSS框架
- 😃 [集成 Iconify](https://github.com/egoist/tailwindcss-icons) - [icones.js.org](https://icones.js.org/) 中的所有图标都为你所用
- 📥 [API 自动加载](https://github.com/antfu/unplugin-auto-import) - 直接使用 Composition API 无需引入
- 🧬 [uni-app 条件编译样式](https://weapp-tw.icebreaker.top/docs/quick-start/uni-app-css-macro) - 帮助你在多端更灵活的使用 `TailwindCSS`
- 🦾 [TypeScript](https://www.typescriptlang.org/) & [ESLint](https://eslint.org/) & [Stylelint](https://stylelint.io/) - 样式,类型,统一的校验与格式化规则,保证你的代码风格和质量
## 快速开始
> 请使用 `Node 20(LTS)` 运行此项目!
使用 `vscode` 的开发者,请先安装 [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) 智能提示与感应插件
其他 IDE 请参考:
本项目已经集成 `weapp-ide-cli` 可以通过 `cli` 对 `ide` 进行额外操作
- `pnpm open:dev` 打开微信开发者工具,引入 `dist/dev/mp-weixin`
- `pnpm open:build` 打开微信开发者工具,引入 `dist/build/mp-weixin`[详细信息](https://www.npmjs.com/package/weapp-ide-cli)
## 升级依赖
- `pnpm up:pkg` 升级除了 `uni-app` 相关的其他依赖
- `pnpm up:uniapp` 升级 `uni-app` 相关的依赖推荐先使用 `pnpm up:pkg` 升级, 再使用 `pnpm up:uniapp` 进行升级,因为 `pnpm up:uniapp` 很有可能会进行版本的降级已达到和 `uni-app` 版本匹配的效果
## 其他模板
👉 [🔥 tarojs / 🔥 uni-app / 🔥 hbuilderx 等更多模板链接](https://weapp-tw.icebreaker.top/docs/community/templates)
## tailwindcss 生态
详见:https://github.com/aniftyco/awesome-tailwindcss
你可以在这里找到许多现成的UI,组件模板。
## 单位转换
- `rem` -> `rpx` (默认开启, 见 `vite.config.ts` 中 `uvtw` 插件的 `rem2rpx` 选项)
- `px` -> `rpx` (默认不开启,可在 `postcss.config.ts` 中引入 `postcss-pxtransform` 开启配置)## Tips
- 升级 `uni-app` 依赖的方式为 `npx @dcloudio/uvm` 后,选择对应的 `Package Manager` 即可。而升级其他包的方式,可以使用 `pnpm up -Li`,这个是 `pnpm` 自带的方式。
- 使用 `vscode` 记得安装官方插件 `eslint`,`stylelint`,`tailwindcss`, 已在 `.vscode/extensions.json` 中设置推荐