Weex入門（3）建立

建立WEEX專案

先cd到目標資料夾下

$ weex create helloweex ,建立過程中，會要求填寫一堆資訊（如果你建立沒出現，不要得意，可能你這個環境安裝就有問題，webpack版本過低?）

此時在目標資料夾下生成了一個helloweex資料夾

開發WEEX專案

先、我們站在三端的高度看世界，可能會迷茫，到底應該在哪裡開發？

我們就很開心的遇到了這樣的情況，環境什麼都配置好了，硬是不知道需要在哪裡開，然後就對著Weex專案混亂地研究了幾天。

請看上頁專案結構截圖，對於初級菜鳥的我們，只需要關注src資料夾、platforms資料夾可能根本不需要（如果你已經有了對應的SDK程式碼），dist資料夾不需要我們去特別關注，因為它是通過src而來的，三端中使用的就是dist資料夾下相關js檔案。我們是使用sublime來進行weex專案編寫

如果需要關注platforms資料夾狀態

預設情況下 weex create 命令並不初始化iOS 和Android 專案，你可以通過執行 weex platform add 來新增特定平臺的專案。

weex platform add ios //生成ios專案

weex platform add android

由於網路環境的不同，安裝過程可能需要一些時間，請耐心等待。如果安裝失敗，請確保自己的網路環境暢通。

不建議使用

weex run ios

weex run android

weex run web

這幾個命令在模擬器上啟動，因為體驗下來真的很差，你如果是這幾端的開發人員，相信有你已經習慣的方式去啟動的

現在是不是大概清楚點？對、編寫程式碼的時候，只要在src資料夾下去編寫。

在 package.json 中，已經配置好了幾個常用的npm script，分別是：

build:原始碼打包，生成JS Bundle

dev: webpack watch 模式，方便開發

serve:開啟HotReload伺服器，程式碼改動的將會實時同步到網頁中

我們先通過 npm install 安裝專案依賴。之後執行專案根目錄下的 npm run dev & npm run serve開啟watch 模式和靜態伺服器。也可以嘗試使用npm start啟動

當瀏覽器自動開啟weex h5頁面後，每次修改了程式碼，只要點選儲存或快捷鍵，介面會自動更新，我們可以馬上看到更新後結果

程式碼如下所示：