開發(fā)環(huán)境搭建
第一步：安裝依賴
首先度帮，你需要 Node.js 和 weex-toolkit。weex-toolkit 是Weex 官方提供的腳手架工具來輔助開發(fā)和調(diào)試。
安裝 Node.js 方式多種多樣，最簡單的方式是在 Node.js 官網(wǎng) 下載可執(zhí)行程序直接安裝即可。
安裝完成后犯眠，打開cmd然后使用以下命令檢測是否安裝成功：
node -v
nmp -v
出現(xiàn)上圖所示說明安裝成功
通常，安裝了 Node.js 環(huán)境症革，npm 包管理工具也隨之安裝了筐咧。因此，直接使用 npm 來安裝 weex-toolkit噪矛。
npm 是一個 JavaScript 包管理工具量蕊，它可以讓開發(fā)者輕松共享和重用代碼。Weex 很多依賴來自社區(qū)艇挨，同樣残炮，Weex 也將很多工具發(fā)布到社區(qū)方便開發(fā)者使用。
npm install weex toolkit -g
weex -v //查看weex當前版本
先執(zhí)行第一行代碼成功之后執(zhí)行第二行代碼查看weex toolkit是否安裝成功缩滨。
如果網(wǎng)絡不好的情況下可以考慮使用淘寶鏡像cnpm安裝势就，可能會失敗多嘗試幾次即可泉瞻。
cnpm install weex toolkit -g如果提示權(quán)限錯誤（permission error），使用 sudo 關(guān)鍵字進行安裝
sudo cnpm install weex toolkit -g安裝結(jié)束后你可以直接使用 weex 命令驗證是否安裝成功苞冯，它會顯示 weex 命令行工具各參數(shù)：
weex
第二步：初始化
然后初始化 Weex 項目：
weex create weexDemo
執(zhí)行完命令后袖牙，在 weexDemo 目錄中就創(chuàng)建了一個使用 Weex 和 Vue 的模板項目。
第三步：開發(fā)
之后我們進入項目所在路徑舅锄，weex-toolkit 已經(jīng)為我們生成了標準項目結(jié)構(gòu)鞭达。
在 package.json 中，已經(jīng)配置好了幾個常用的 npm script皇忿，分別是：
build: 源碼打包畴蹭，生成 JS Bundle
dev: webpack watch 模式，方便開發(fā)
serve: 開啟HotReload服務器鳍烁，代碼改動的將會實時同步到網(wǎng)頁中
我們先通過 npm install 安裝項目依賴叨襟。
之后運行根目錄下的 npm run dev & npm run serve 開啟 watch 模式和靜態(tài)服務器。
然后會自動打開瀏覽器老翘，或輸入提示的地址 即可看到 weex h5 頁面芹啥。
初始化時已經(jīng)為我們創(chuàng)建了基本的示例，我們可以在 src/index.vue 中查看铺峭。
代碼如下所示：
<template>
<div class="wrapper">
<image :src="logo" class="logo" />
<text class="greeting">The environment is ready!</text>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
logo: 'https://gw.alicdn.com/tfs/TB1yopEdgoQMeJjy1XaXXcSsFXa-640-302.png'
}
}
}
</script>
<style scoped>
.wrapper {
justify-content: center;
align-items: center;
}
.logo {
width: 424px;
height: 200px;
}
.greeting {
text-align: center;
margin-top: 70px;
font-size: 50px;
color: #41B883;
}
.message {
margin: 30px;
font-size: 32px;
color: #727272;
}
</style>
