搭建Weex环境

太过爱你忘了你带给我的痛 2021-09-27 13:44 344阅读 0赞

### 1.安装依赖 ###

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

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

对于Mac，可以使用  [Homebrew][]  进行安装：

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>brew install node
</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

> 更多安装方式可参考  [Node.js官方信息][Node.js 1]

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

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

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

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

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>$ npm install -g weex-toolkit
$ weex -v //查看当前weex版本
</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>weex update weex-devtool@latest //@后标注版本后，latest表示最新
</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm install -g weex-toolkit
</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

*提示：*

如果提示权限错误（*权限错误*），使用  `sudo` 关键字进行安装

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>$ sudo cnpm install -g weex-toolkit
</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

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

![TB1NBhdQXXXXXXzXFXXXXXXXXXX-712-343.png][]

## 第二步：初始化 ##

然后初始化Weex项目：

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>$ weex create awesome-project
</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NzA1Nzkz_size_27_color_FFFFFF_t_70][]

执行完命令后，在  `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` 中查看。

代码如下所示：

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>&lt;template&gt;
  &lt;div class="wrapper" @click="update"&gt;
    &lt;image :src="logoUrl" class="logo"&gt;&lt;/image&gt;
    &lt;text class="title"&gt;Hello {
       {target}}&lt;/text&gt;
    &lt;text class="desc"&gt;Now, let's use vue to build your weex app.&lt;/text&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;style&gt;
  .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;}
&lt;/style&gt;

&lt;script&gt;
  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)
      }
    }
  }
&lt;/script&gt;
</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

![70][]

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

[Weex CLi]: https://github.com/weexteam/weex-toolkit
[Node.js]: https://nodejs.org/en/
[Homebrew]: http://brew.sh/
[Node.js 1]: https://nodejs.org/en/download/
[cnpm]: https://npm.taobao.org/
[TB1NBhdQXXXXXXzXFXXXXXXXXXX-712-343.png]: /images/20210923/fddfb1b8ddbf4cf395519cd743e82bc4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NzA1Nzkz_size_27_color_FFFFFF_t_70]: /images/20210923/48b86f676cc0457493f45b7440996b34.png
[70]: /images/20210923/f2b6c5a86a7543518982788ee1bb2876.png