uniapp 项目实践(一)使用vue3+ts+pinia+vite

501 阅读1分钟

利用空闲时间做了个相册的项目,使用uniapp来打包成app,这样就能随时保存自己的照片到电脑上(组装一台电脑当服务器),不用担心哪天手机开不了机了,分享下这个项目

基础知识

1、新建项目

image.png

image.png

选择 vue3 版本的,选择模板是 uni-ui。

uni-ui是uniapp的扩展组件,里面的组件还是比较多能满足需求的。它使用的是easycom机制,不管项目下放了多少组件,easycom打包会自动剔除没有使用的组件,所以无需担心打包后项目体积很大。

项目目录如下:(“组”改成“主”)

image.png

image.png

2、引用组件

传统vue项目开发,引用组件需要导入 - 注册 - 使用三个步骤,如下:

image.png Vue 3.x增加了script setup特性,将三步优化为两步,无需注册步骤

image.png uni-appeasycom机制,将组件引用进一步优化,开发者只管使用,无需考虑导入和注册

image.png

3、自定义组件

路径要符合规范:一定是要在components文件夹下才行

image.png 这样就无需引入跟注册这些步骤,因为easycom会自动扫描进去,所以在页面上直接用就可以了

image.png

4、页面配置文件 pages.json

image.png

image.png

5、建立小程序分包

新建分包目录

image.png 在 pages.json 中配置分包路径

image.png