weex原始碼分析(三) -- weex工程建立

TechShare3g6發表於2018-04-05

初始化

請確保你已經安裝了 Node.js,然後全域性安裝 weex-toolkit。

npm install weex-toolkit -g

這條命令會向你命令列環境中註冊一個 weex 命令。你可以用 weex create 命令來建立一個空的模板專案:

weex create awesome-app

命令執行完以後,在當前目錄的 awesome-app 資料夾裡就有了一個空的 Weex + Vue.js 專案。

開發

下一步就是進入剛剛建立的資料夾,並且安裝依賴,然後執行 npm start

cd awesome-app
npm install
npm start

然後工具會啟動一個本地的 web 服務,監聽 8081 埠。你可以開啟 http://localhost:8081 檢視頁面在 Web 下的渲染效果。 原始碼在 src/ 目錄中,你可以像一個普通的 Vue.js 專案一樣來開發.

Preview

除此之外,你還可以開啟 http://localhost:8081/preview.html 開啟一個預覽頁面,它會把 web 端的頁面放在一個 iframe 中渲染,而且在右側生成一個二維碼。用 Weex playground app 掃描這個二維碼可以看到頁面在手機上渲染的真實效果。

weex原始碼分析(三) -- weex工程建立

這裡執行npm start,或npm run dev 命令的時候,會使用webpack工具將我們的vue檔案,轉換為js檔案,js檔案的目錄在 awesome-app/dist/下,也可以將這個檔案放在app的assets中,進行載入。具體載入方法可以看下一章

相關文章