uni-app创建项目

一. uni-app的特点

一套代码多个平台

uni-app使用vue.js开发所有前端应用的框架, 开发者编写一套代码, 可发布到IOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台.

二. 所编写的软件

官方推荐HBuilderX

HBuildr官方IDE下载地址

HBuilderX是通用的前端开发工具, 为uni-app做了特别强化, 安装相应的插件也比较方便.

三. 创建 运行项目

• 创建项目

  点击新建 => 项目 => 点击uni-app, 输入名字, 选择存放地址和模板(可选择uni-ui项目)

• 运行项目(快捷键Ctrl + r)

  点击运行 => 可以选择运行到不同的平台, 运行到微信小程序需要配置ID并且下载打开微信开发者工具等.

四. 通过vue-cli命令行创建 运行项目

使用cli脚手架, 通过vue-cli创建uni-app项目

• 全局安装vue-cli

  npm install -g @vue/cli
  

• 创建uni-app

  • 使用正式版

  vue create -p dcloudio/uni-preset-vue my-project
  

  • 使用alpha版

  vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
  

• 运行

  npm run dev:%PLATFORM%
  npm run build:%PLATFORM%
  

  %PLATFORM% 可取值如下:

  值	平台
  app-plus	app平台生成打包资源（仅支持npm run build:app-plus，也就是App平台运行调试不支持cli方式，需在HBuilderX中运行调试）
  h5	H5
  mp-alipay	支付宝小程序
  mp-baidu	百度小程序
  mp-weixin	微信小程序
  mp-toutiao	字节跳动小程序
  mp-qq	qq 小程序
  mp-360	360 小程序
  quickapp-webview	快应用通用
  quickapp-webview-union	快应用联盟
  quickapp-webview-huawei	快应用华为