uni-app 一套代码、多端发行，真的像官宣的那么优秀？一起盘他看看！
uni-app支持通过
HBuilderX可视化界面、vue-cli命令行两种方式快速创建项目
一、通过 HBuilderX 可视化界面创建项目
欲善其事，先利其器，我们需先下载安装以下两个工具：
利用 HBuilderX创建我们的第一个uni-app项目：
-
点击工具栏里的文件 -> 新建 -> 项目
-
选择uni-app，默认模板，输入工程名，如：uniapp-test1，点击创建，即可成功创建uni-app。若点击Hello uni-app，即可体验uni-app框架的组件、接口、模板
-
运行
-
以下将我们上面创建的工程运行到了三个平台：
-
运行界面如下：
二、通过 vue-cli命令行创建项目
假装你的电脑已装有npm：
-
全局安装vue-cli:npm install -g @vue/cli -
创建一个uni-app项目:vue create -p dcloudio/uni-preset-vue project-name
若还没安装npm，请移步至npm，安装好后记得回来继续~
-
创建过程中选择默认模板：
-
创建成功，进入项目根目录cd my-project -> 运行 npm run serve：
-
运行到浏览器与运行界面：
-
若在创建时选择的是Hello uni-app，即可体验uni-app框架的组件、接口、模板如下：
运行并发布uni-app：
- npm run dev:%PLATFORM%
- npm run build:%PLATFORM%
%PLATFORM% 可取值如下：
| 值 | 平台 |
|---|---|
| h5 | h5 |
| mp-alipay | 支付宝小程序 |
| mp-baidu | 百度小程序 |
| mp-weixin | 微信小程序 |
dev与build运行的区别：
- dev编译出的各平台代码存放于根目录的/dis/dev/目录下，打开各平台开发工具选择对应平台目录即可进行预览，如在微信开发者工具中，添加项目时选择/dis/dev/mp-weixin
- build编译出的各平台代码存放于根目录的/dis/build/目录下，发布时选择此目录下各平台目录进行发布即可。
-
进行 环境判断 时
- dev 模式 process.env.NODE_ENV 的值为 development
- build 模式 process.env.NODE_ENV 的值为 production。
- dev 模式有 SourceMap 可以方便的进行断点调试；
- build 模式会将代码进行压缩，体积更小更适合发布为正式版应用；
Tips：
- 开发 App 时，其他编辑器搭配
cli只能开发小程序和 H5，其他编辑器无法运行到手机或模拟器，只能使用HBuilderX运行。 - 开发
uni-app，HBuilderX 和其他工具(如vscode)有什么区别？详见：https://ask.dcloud.net.cn/article/35451
网友评论