WEEX快速入门防坑攻略

最新推荐文章于 2024-08-12 00:44:54 发布

原创

最新推荐文章于 2024-08-12 00:44:54 发布 · 394 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#weex #weex环境 #weex快速入门 #weex上手教程

本文介绍了WEEX的快速入门，包括环境配置、开发流程、调试方法和打包过程。首先，提供了线上体验环境Weex Online Editor和本地开发环境的设置，特别提醒国内开发者使用Taobao NPM镜像。接着，详细阐述了Mac和Windows系统下weex-toolkit的安装步骤，以及如何初始化项目和了解项目结构。文章还引导读者学习Vue，并推荐了阿里提供的weex-ui库，解释了其安装和配置。最后，简要提及了页面渲染、路由配置和调试、打包环节。

1.环境篇

线上体验环境： Weex Online Editor

本地开发环境：

Node+Weex CLi+weex-toolkit
注意：通常，安装了 Node.js 环境，npm 包管理工具也随之安装了。因此，直接使用 npm 来安装 weex-toolkit, 你也可以通过 yarn来进行安装。
国内的开发者推荐将npm镜像切换至 Taobao NPM 镜像 https://registry.npm.taobao.org。

苹果系统和windows系统下的 weex-toolkit安装
OSX环境
$ sudo chmod -R 777 /usr/local/lib/node_modules/
$ npm i -g weex-toolkit // 安装不要使用sudo执行
$ weex -v // 查看当前weex工具版本
#Windows环境
$ npm i -g weex-toolkit
$ weex -v // 查看当前weex工具版本

注意：安装结束后你可以直接使用 weex help 命令验证是否安装成功，它会显示 weex 支持的所有指令，同时，你也可以通过 weex doctor 命令检查你的本地开发环境。

初始化项目
weex create demo-project
Weex-toolkit会帮我们生成项目脚手架

接下来是进入 demo-project目录使用npm install 安装weex项目所需要引入的三方库依赖，然后使用npm start命令将项目运行在浏览器上

项目结构介绍：
在这里插入图片描述