uni-app入门

uni-app介绍

uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

官网：uni-app官网

两种搭建uni-app项目的方式

两种搭建项目的方式

1. 通过 HBuilderX 可视化界面

可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。

开始之前，开发者需先下载安装如下工具：

• HBuilderX：官方IDE下载地址

        2.通过vue-cli命令行

也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目。

使用vue-cli创建uni-app项目

        1.全局安装vue-cli：

npm install -g @vue/cli 

        2.执行cli

$ vue create -p dcloudio/uni-preset-vue heima-ugo

        3.选择默认模版

        4.运行项目

npm run dev:%PLATFORM%

%PLATFORM% 可取值如下：

值	平台
h5	H5
mp-alipay	支付宝小程序
mp-baidu	百度小程序
mp-weixin	微信小程序
mp-toutiao	字节跳动小程序
mp-qq	qq 小程序

总结

1. 运行: npm run dev:mp-weixin开启小程序开发服务器

2. 看效果：导入项目下dist\dev\mp-weixin目录到小程序开发者工具

3. 在项目src目录修改代码后，会自动重新打包小程序代码，实时查看最新效果