uni-app 可实现一套代码跨端编译到多个平台,通常用于移动端项目的开发,如各平台的小程序、APP、H5页面等。
搭建开发环境
- 下载安装 HBuilderX
使用HBuilderX进行开发时需安装
- Windows为zip包,解压后即可使用
- 下载安装 vscode
使用HBuilderX进行开发时需安装 - 下载安装微信开发者工具
开发微信小程序时需安装
创建项目
方式一:通过 HBuilderX 创建
双击打开 HBuilderX
vue2版
vue3版
安装编译插件
方式二:通过命令行创建
js版
npx degit dcloudio/uni-preset-vue#vite 项目名称
ts版
npx degit dcloudio/uni-preset-vue#vite-ts 项目名称
- 在 src\manifest.json 中添加 appid
- 执行 cnpm i 安装依赖
运行项目
在HBuilderX中运行项目
先选中项目目录
查看微信小程序效果
查看内置浏览器效果
首次运行,会提示下载相关内置浏览器和SASS等插件。
待必要的插件下载完毕,再次执行即可。(若一次没运行,多点两次直到运行即可)
运行命令行创建的项目查看微信小程序效果
运行脚本
npm run dev:mp-weixin
会生成文件夹 dist\dev\mp-weixin
打开微信开发者工具,导入文件夹 dist\dev\mp-weixin 即可
修改项目代码,可实时编译查看修改效果