01uni-app 基础教程 环境配置【uniapp 专题 1】
作者：坚果
公众号："大前端之旅"
华为云享专家，InfoQ 签约作者，阿里云专家博主，51CTO 博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括 Flutter,小程序,安卓，VUE，JavaScript。
1.uni-app 是什么？
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。当然uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的 App 跨平台框架、更方便的 H5 开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。
2.uni-app 功能框架
一图胜千言
3.uni-app 创建项目的两种方式
uni-app支持通过 可视化界面、vue-cli命令行 两种方式快速创建项目。
1.可视化界面
可视化的方式比较简单，HBuilderX 内置相关环境，开箱即用，无需配置 nodejs。
开始之前，开发者需先下载安装如下工具：
HBuilderX：官方IDE下载地址
HBuilderX 是通用的前端开发工具，但为uni-app做了特别强化。
下载之后解压缩运行 exe 文件
选择新建项目
选择 uni-app 类型，输入项目名，选择模板，点击创建，即可成功创建。
uni-app 自带的模板有。Hello uni-app，是官方的组件和 API 示例。还有一个重要模板是 uni ui 项目模板，日常开发推荐使用该模板，已内置大量常用组件。
2.cli 脚手架
除了 HBuilderX 可视化界面，也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目。
环境安装
全局安装 vue-cli
创建 uni-app
使用正式版（对应 HBuilderX 最新正式版）
使用 alpha 版（对应 HBuilderX 最新 alpha 版）
使用 Vue3/Vite 版
创建以 javascript 开发的工程（如命令行创建失败，请直接访问
gitee
下载模板）
创建以 typescript 开发的工程（如命令行创建失败，请直接访问
gitee
下载模板）
此时，会提示选择项目模板（使用 Vue3/Vite 版不会提示，目前只支持创建默认模板），初次体验建议选择 hello uni-app 项目模板，如下所示：
自定义模板
选择自定义模板时，需要填写 uni-app 模板地址，这个地址其实就是托管在云端的仓库地址。以 GitHub 为例，地址格式为 userName/repositoryName，如 dcloudio/uni-template-picture 就是下载图片模板。
更多支持的下载方式，请参考这个插件的说明：download-git-repo
运行、发布 uni-app
%PLATFORM% 可取值如下：
可以自定义更多条件编译平台，比如钉钉小程序，参考package.json文档。
使用 cli 创建项目和使用 HBuilderX 可视化界面创建项目有什么区别
编译器的区别
cli创建的项目，编译器安装在项目下。并且不会跟随 HBuilderX 升级。如需升级编译器，可以使用 @dcloudio/uvm 管理编译器的版本，如npx @dcloudio/uvm。HBuilderX 可视化界面创建的项目，编译器在 HBuilderX 的安装目录下的 plugin 目录，随着 HBuilderX 的升级会自动升级编译器。
已经使用
cli创建的项目，如果想继续在 HBuilderX 里使用，可以把工程拖到 HBuilderX 中。注意如果是把整个项目拖入 HBuilderX，则编译时走的是项目下的编译器。如果是把 src 目录拖入到 HBuilderX 中，则走的是 HBuilderX 安装目录下 plugin 目录下的编译器。cli版如果想安装 less、scss、ts 等编译器，需自己手动 npm 安装。在 HBuilderX 的插件管理界面安装无效，那个只作用于 HBuilderX 创建的项目。
开发工具的区别
cli创建的项目，内置了 d.ts，同其他常规 npm 库一样，可在vscode、webstorm等支持 d.ts 的开发工具里正常开发并有语法提示。使用 HBuilderX 创建的项目不带 d.ts，HBuilderX 内置了 uni-app 语法提示库。如需把 HBuilderX 创建的项目在其他编辑器打开并且补充 d.ts，可以在项目下先执行
npm init，然后npm i @types/uni-app -D，来补充 d.ts。但 vscode 等其他开发工具，在 vue 或 uni-app 领域，开发效率比不过 HBuilderX。详见：https://ask.dcloud.net.cn/article/35451
发布 App 时，仍然需要使用 HBuilderX。其他开发工具无法发布 App，但可以发布 H5、各种小程序。如需开发 App，可以先在 HBuilderX 里运行起来，然后在其他编辑器里修改保存代码，代码修改后会自动同步到手机基座。
如果使用
cli创建项目，那下载 HBuilderX 时只需下载 10M 的标准版即可。因为编译器已经安装到项目下了。
4.运行 uni-app
1.浏览器运行：
进入 hello-uniapp 项目，点击工具栏的运行->运行到浏览器->选择浏览器，即可在浏览器里面体验 uni-app 的 H5 版。
运行成功
2.在微信开发者工具里运行：
1）注意：如果是第一次使用，
需要先配置小程序 ide 的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径
若 HBuilderX 不能正常启动微信开发者工具，需要开发者手动启动，然后将 uni-app 生成小程序工程的路径复制到微信开发者工具里面，在 HBuilderX 里面开发，在微信开发者工具里面就可以看到实时的效果。uni-app 或将项目编译到根目录的 unpackage 目录。
2）开启小程序 IDE 服务端口的安全设置
3）运行效果
进入 hello-uniapp 项目，点击工具栏的运行->运行到小程序模拟器->微信开发者工具，即可在微信开发者工具里体验 uniapp
3.运行 App 到手机或模拟器：
连接手机，开启 USB 调试，进入 hello-uniapp 项目，点击工具栏的运行 -> 真机运行 -> 选择运行的设备，即可在该设备里面体验 uni-app。
4.在支付宝小程序开发者工具里运行：
进入 hello-uniapp 项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 支付宝小程序开发者工具，即可在支付宝小程序开发者工具里面体验 uni-app。
5.在百度开发者工具里运行：
进入 hello-uniapp 项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 百度开发者工具，即可在百度开发者工具里面体验 uni-app。
6.在字节跳动开发者工具里运行：
进入 hello-uniapp 项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 字节跳动开发者工具，即可在字节跳动开发者工具里面体验 uni-app。
7.在 360 开发工具中导入：
进入 hello-uniapp 项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 360 开发工具，即可在 360 开发工具里面体验 uni-app。注意 360 工具只有 windows 版
8.在快应用联盟工具里运行：
进入 hello-uniapp 项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 快应用联盟工具，即可在快应用联盟工具里面体验 uni-app。
9.在华为开发者工具里运行：
进入 hello-uniapp 项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 华为开发者工具，即可在华为开发者工具里面体验 uni-app。
Tips
如果是第一次使用，需要配置开发工具的相关路径。点击工具栏的运行 -> 运行到小程序模拟器 -> 运行设置，配置相应小程序开发者工具的路径。
支付宝/百度/字节跳动/360 小程序工具，不支持直接指定项目启动并运行。因此开发工具启动后，请将 HBuilderX 控制台中提示的项目路径，在相应小程序开发者工具中打开。
如果自动启动小程序开发工具失败，请手动启动小程序开发工具并将 HBuilderX 控制台提示的项目路径，打开项目。
运行的快捷键是Ctrl+r。
5.手机模拟器
下载手机模拟器
MUMU 模拟器：https://mumu.163.com/
模拟器端口：
6.目录结构
一个 uni-app 工程，默认包含如下目录及文件：
版权声明: 本文为 InfoQ 作者【坚果】的原创文章。
原文链接:【http://xie.infoq.cn/article/03dc35642b5c94d9261a95ece】。文章转载请联系作者。
此间若无火炬，我便是唯一的光 2020.10.25 加入
公众号：“大前端之旅”，华为云享专家，InfoQ签约作者，51CTO博客首席体验官，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。
评论