Rax新手入门 - 快速构建多端应用

一. 准备

首先,需要去官网熟悉一下快速开始 Rax官网

1.创建项目

npm init rax rax-demo-3

注:rax-demo-3换成自己需要的项目名

2.创建选项
Rax新手入门 - 快速构建多端应用_第1张图片
创建项目的时候会有一堆选项,蓝色字体是选项结果,你可以根据需求不同,选择不同的选项

3.项目建成
Rax新手入门 - 快速构建多端应用_第2张图片
看到这个提示之后,项目就建成ok!

二. 重点记录

通过第一步之后,会生成项目结构如下:
Rax新手入门 - 快速构建多端应用_第3张图片
重点看下build.json项目

{
  "plugins": [
    [
      "build-plugin-rax-app",
      {
        "targets": ["miniapp"]
      }
    ]
  ]
}

因为建的时候,第5个选项只选了Alibaba MiniApp,所以这里只有miniapp

从Rax官网看,目前可以支持5个选项,并且可以同时配置(官网没有写枚举,生成的时候选了才看到)

"targets": ["miniapp", "web", "weex", "wechat-miprogram", "kraken"]
  • miniapp 就是阿里系小程序(支付宝小程序、天猫精灵小程序)
  • web web页面
  • weex 貌似是app原生可以转换的,具体见Week官网
  • wechat-miprogram 微信小程序
  • kraken 一款轻量级的面向前端网络开发人员的框架

三. 构建其他项目

生成项目之后,会在项目目录的上一层,我们要进入到项目层去操作

cd rax-demo-3

然后安装依赖

npm install

安装ok之后,生成其他类型项目

npm run build

运行结束之后,可以看到,文件夹里多了一个build目录,里面会根据targets配置了几个枚举,生成几个对应类型的项目
Rax新手入门 - 快速构建多端应用_第4张图片

四. 构建项目查看

使用支付宝IDE开发工具查看了支付宝小程序miniapp工程,可以正常展示
Rax新手入门 - 快速构建多端应用_第5张图片

你可能感兴趣的:(Rax)