为了更好地理解uni-app的项目结构,我们可以创建一个简单的uni-app项目来实践。 首先,安装HBuilderX开发工具,并创建一个新的uni-app项目。 在pages文件夹下创建一个新的页面,如index页面。 在index页面中,编写模板、脚本和样式代码,实现一个简单的页面功能。 在App.vue中配置底部导航栏,将index页面添加到导航栏中。
uni-app提供了两种创建项目的方式:1.通过HBuilderX可视化工具创建2.通过vue-cli命令创建 ⚠️需要注意的是,一定要根据项目需求来选择项目的创建方式;如果只是单独的开发小程序或App,且开发环境单一,可以使用HBuilderX可视化工具创建。如果多端开发,以及同一套代码可能会打包生成多个小程序建议使用vue-cli进行创建,不...
pages.json是全局配置文件,可以配置页面文件路径、窗口样式、原生的导航栏、底部 tab 栏等 project.config.json项目全局配置文件 public.scss README.md说明文档 uni.scss是 uni-app 的样式包。在其他文件中可以快速引用样式包里面的样式
package.json ——项目依赖的描述文件 pnpm-lock.yaml ——锁定项目的依赖包版本 tsconfig.json ——TS的语法识别和执行配置文件 vite.config.ts ——编译工具vite的配置文件 了解了结构我们再完善一下我们开发常用到的一些插件(后期根据需求会不断增加) 1. 加入unocss(提高开发效率) 打开终端 输入 pnpm i unocss...
一、创建uni-app 1、hBuilderX 可视化创建 最便捷的就是使用 hbuilder 可视化创建项目,在点击工具栏里的文件 -> 新建 -> 项目: 选择uni-app类型,输入工程名,选择模板,点击创建,即可成功创建。 2、cli 脚手架创建 2.1、使用正式版 1 vue create -p dcloudio/uni-preset-vue my-project ...
创建项目 打开HBuilderX,点击左上角文件->新建->项目: 搭建基本布局 项目创建完毕之后,首先来分析一下苹果计算器的整体布局结构,分为一上一下如下图: 上面的部分主要是显示计算结果的,下面的部分主要是显示计算器的按键 搭建上半部分布局 更改index.vue 的内容如下: ...
uni-app标准的项目结构如图2.5所示。 图2.5 uni-app 标准的项目结构 2.3 App 真机运行 开发Android手机App通常使用Windows操作系统,使用uni-app开发App在运行调试时可以使用模拟器或真机。 2.3.1 真机运行 真机运行需要连接手机,开启USB调试,进入uniappdemo项目,选择“运行”→“运行到手机或模拟器”命令,在其下拉菜...
创建uniapp项目 一开始是没有云服务空间的,我们右击创建 点击之后会打开云空间网址 阿里云 云空间 创建好之后 右击关联即可 初始化数据库 我们有一个云数据库文件 数据库下载链接 此文件一定要放到cloudfunctions 文件夹下 右击初始化等待即可 实现tabbar 准备工作:在pages下面创建tabbar文件夹,然后在此文件夹下创建三个...
1、工程目录结构 ┌─components uni-app组件目录 │ └─comp-a.vue 可复用的a组件 ├─hybrid 存放本地网页的目录 ├─platforms 存放各平台专用页面的目录 ├─pages 业务页面文件存放的目录 │ ├─index │ │ └─index.vue index页面 │ └─list ...