vite-uniapp开发_vite新建uni-app h5项目

概要

在我们开发Uniapp的时候我们可能直接用hbuilder创建了一个项目工程，有时候我们想引入一些第三方UI组件，别的库。每一次安装的话非常繁琐，因此本人特意制作一个vite-uniapp项目模板提供给大家一起使用!这个模板我用的是typescript做开发!

链接: vite-ts-uview-uniapp模板

添加的库

1. UView-Plus 组件
2. Unocss 原子化
3. Pinia状态管理

下载引入

1. 首先我们先从连接上下载下来,打开我们的工程,目录如下:

2. 下载依赖,我推荐使用pnpm install,很好用的
   

3. 我们可以运行看看,在package.json文件中,scriipts下的就是我们的一个命令
   例如我要h5运行,那么执行的命令是:

pnpm run dev:h5

如果想要app运行则是:

pnpm run dev:app

如果你是要app测试，我推荐你用hbuilder连接手机打开项目工程,然后正常的手机端展示即可!

运行测试

我在h5端运行,命令:pnpm run dev:h5,我们进行跑一下看看
可以跑，我们浏览器访问一下看看有没有正确展示
默认代码:
展示效果:

可以看到我们项目正常跑了!

使用组件以及原子化样式

这个模板使用了unocss以及uview-plus,我们直接用即可,

1. UView-plus官网

例如我们在index.vue文件·这个样子写

这个的意思就是我们使用了一个按钮组件，以及设置view的背景为蓝色，字体颜色为红色，我们浏览器看看对不对

可以发现正常展示了!

欢迎大家使用这个模板，大家也可以添加自己喜欢的然后上传至github上大家一起使(白)用(嫖)