搭建Weex环境

本文详细介绍如何使用Weex和Vue创建并开发跨平台应用。从安装Node.js和WeexCLI开始,到初始化项目、开发和预览,一步步引导读者掌握Weex开发流程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.安装依赖

Weex官方提供了weex-toolkit的脚手架工具来辅助开发和调试。首先,你需要Node.js和  Weex CLi

安装Node.js方式多种多样,最简单的方式是在  Node.js官网  下载可执行程序直接安装即可。

对于Mac,可以使用  Homebrew  进行安装:

brew install node

更多安装方式可参考  Node.js官方信息

安装完成后,可以使用以下命令检测是否安装成功:

$ node -v
v6.11.3
$ npm -v
3.10.10

通常,安装了Node.js环境,npm包管理工具也随之安装了。因此,直接使用npm来安装weex-toolkit。

npm是一个JavaScript包管理工具,它可以让开发者轻松共享和重用代码.Weex很多依赖来自社区,同样,Weex也将很多工具发布到社区方便开发者使用。

注意: weex-toolkit1.0.8版本后添加了npm5的规范npm-shrinkwrap.json用于锁定包依赖,故NPM版本<5用户的需要通过npm i npm@latest -g更新一下NPM的版本,使用前请确认版本是否正确。

$ npm install -g weex-toolkit
$ weex -v //查看当前weex版本

weex的工具包也支持直接升级子依赖,如:

weex update weex-devtool@latest //@后标注版本后,latest表示最新

国内开发者可以考虑使用淘宝的npm镜像 -  cnpm  安装weex -toolkit

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm install -g weex-toolkit

提示:

如果提示权限错误(权限错误),使用  sudo 关键字进行安装

$ sudo cnpm install -g weex-toolkit

结束安装后你可以直接使用  weex 命令验证是否安装成功,会它显示  weex 命令行工具各参数:

第二步:初始化

然后初始化Weex项目:

$ weex create awesome-project

 

执行完命令后,在  awesome-project 目录中就创建了一个使用Weex和Vue的模板项目。

第三步:开发

之后我们进入项目所在路径,weex-toolkit已经为我们生成了标准项目结构。

在  package.json 中,已经配置好了几个常用的npm脚本,分别是:

  • build:源码打包,生成JS Bundle
  • dev:webpack watch模式,方便开发
  • serve:开启HotReload服务器,代码改动的将会实时同步到网页中

我们先通过  npm install 安装项目依赖。之后运行根目录下的  开启观看模式和静态服务器。npm run dev & npm run serve

然后我们打开浏览器,进入  http://localhost:8080/index.html 即可看到weex h5页面。

初始化时已经为我们创建了基本的示例,可以我们在  src/index.vue 中查看。

代码如下所示:

<template>
  <div class="wrapper" @click="update">
    <image :src="logoUrl" class="logo"></image>
    <text class="title">Hello {{target}}</text>
    <text class="desc">Now, let's use vue to build your weex app.</text>
  </div>
</template>

<style>
  .wrapper { align-items: center; margin-top: 120px; }
  .title { padding-top:40px; padding-bottom: 40px; font-size: 48px; }
  .logo { width: 360px; height: 156px; }
  .desc { padding-top: 20px; color:#888; font-size: 24px;}
</style>

<script>
  export default {
    data: {
      logoUrl: 'http://img1.vued.vanthink.cn/vued08aa73a9ab65dcbd360ec54659ada97c.png',
      target: 'World'
    },
    methods: {
      update: function (e) {
        this.target = 'Weex'
        console.log('target:', this.target)
      }
    }
  }
</script>

 

出现这个你已经弄好了开始weex开发 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值