配置项目开发环境
下载并安装开发工具
- uniapp 的专门工具 HBuilder X,[直接下载](HBuilderX-高效极客技巧 (dcloud.io))
- 选择‘App开发版本’
- 安装即可
安装 sass 依赖
因为项目开发会使用sass,所以需要为HBuilderX 安装 sass编译器。
- 打开HBuilderX
- 打开插件地址:ext.dcloud.net.cn/plugin?id=2…
- 点击【使用HBuilder 导入插件】
- 在弹出的框中点击【打开HBuilderX】
5.点击【是】
6.等待安装完成
创建uni-app项目
2.
├─pages // 页面存放文件夹,等同于 微信小程序中的 pages
│ └─index // 默认生成的页面
├─static // 静态资源存放文件夹
└─uni_modules // uni-app组件目录
│ └─uni-xxx // uni-app 所提供的业务组件,等同于 微信小程序中的组件
├─App.vue // 应用配置文件,用来配置全局样式、生命周期函数等,等同于 微信小程序中的app.js
└─main.js // 项目入口文件
├─mainfest.json // 配置应用名称、appid、logo、版本等打包信息,
└─pages.json // 配置页面路径、窗口样式、tabBar 等页面类信息,等同于 微信小程序中的app.json
└─uni.scss // uni-app内置的常用样式变量
运行项目到微信开发者工具
运行到微信小程序
- 配置【微信开发工具】路径
- 设置【微信开发工具路径】
- 运行到微信小程序
4.底部提示编译
5.编译成功