1.建立項目
用
weex create
指令建立一個weex項目：
weex create 應用名稱
會提示是否安裝依賴，選擇“是”即可。
如果未選擇，後續執行
npm install
安裝也可以。
建立完成後結構如下：
WeexProject
├── README.md //項目便簽
├── android.config.json //Android 工程配置
├── configs //weex 配置
├── ios.config.json //ios 工程配置
├── package-lock.json
├── package.json //項目 npm 包管理
├── platforms //平台模版目錄
│ ├── ios //ios 原生平台目錄
│ └── android //android 原生平台目錄
├── plugins //插件下載下傳目錄
│ └── README.md
├── src //業務源碼目錄
│ └── index.we
├── tools //工具目錄
│ └── webpack.config.plugin.js
├── web //web 平台目錄
│ ├── index.html
└── webpack.config.js // webpack 子產品打包配置目錄
2.運作項目
執行
npm start
（實際上是執行
npm run serve
開啟靜态伺服器），這是工具會啟動一個本地的 web 服務，監聽
8081
端口，并自動打開浏覽器顯示預覽頁面。 源代碼在
src/
目錄中，可以像一個普通的 Vue.js 項目一樣來開發，修改完成後自動就可以在浏覽器預覽。
weex中常用的
npm
指令。這些
npm xxx
的指令，其實都是在package.json裡設定的。可以看到如下代碼：
"scripts": {
"start": "npm run serve",
"build": "webpack --env.NODE_ENV=common", // 打包
"build:prod": "webpack --env.NODE_ENV=production",
"build:prod:web": "webpack --env.NODE_ENV=release",
"build:plugin": "webpack --env.NODE_ENV=plugin",
"clean:web": "rimraf ./release/web",
"clean:ios": "rimraf ./release/ios",
"clean:android": "rimraf ./release/android",
"dev": "webpack --env.NODE_ENV=common --progress --watch",
"unit": "karma start test/unit/karma.conf.js --single-run",
"test": "npm run unit",
"lint": "eslint --ext .js,.vue src test/unit --fix",
"serve": "webpack-dev-server --env.NODE_ENV=development --progress",
"ios": "weex run ios",
"web": "npm run serve",
"android": "weex run android", // 打包+建構+安裝執行
"pack:ios": "npm run clean:ios && weex build ios", // 打包+建構
"pack:android": "npm run clean:android && weex build android",
"pack:web": "npm run clean:web && npm run build:prod:web"
}
在項目的根目錄下使用指令
npm run dev
開啟 watch 模式，開啟後，每次修改src下的檔案會自動編譯。生成dist目錄下的index.js檔案和index.web.js檔案。
npm run build
裡的指令執行的就是webpack指令，執行打包過程。執行打包之後，所有的工程檔案被單獨打成一個獨立的JSBundle。
下面是由.vue檔案打包出來的包格式（簡寫），使用vue2.0文法編寫:
//{"framework"："vue"}
/******/（function（modules）{
/******/}）
3.添加移動端支援
預設情況下
weex create
指令并不初始化 iOS 和 Android 項目，可以通過執行
weex platform add
來添加特定平台的項目。
weex platform add ios
weex platform add android
拿android為例：
Android環境依賴Android studio 和 Java JDK 1.8 (Windows需要設定Java的環境路徑)
- Android SDK Platform 26 (通過Android studio安裝：tools-SDK Manager-選擇安裝)
- Android SDK Build-Tools 26 (通過Android studio安裝)
- Android virtual device (通過Android studio安裝:tools-AVD Manager-Creat new virtual Device-然後就進入選擇裝置和下載下傳安裝過程過程，選擇API level26，與Platform一緻)
環境配置好之後執行上述指令安裝，安裝好後可以去項目根目錄的
platforms
下看到
android
檔案夾，說明應用支援添加成功。
之後可以在Android Studio裡運作weex。
在Android Studio的啟動界面，選擇Open an exsting Android Studio Project。然後選擇剛才用
weex create xxx
指令建立的項目之下的
platforms/android
目錄打開即可。
運作可能會報錯。
如果是“Failed to find Build Tools revision 26.0”的錯誤，隻需要按它的提示輕按兩下安裝即可。
如果是“Error:Cause: unable to find valid certification path to requested target”的錯誤，在file->Project sructure->denpendencies下，把裡面的依賴一個個點進去更新一下，再重新sync。因為我用的是Android Studio 3.5以上的版本，weex預設是2.2.2的Gradle版本，是以Gradle版本也需要更新一下，更新成3.5.3。
如果是"Error:(30, 0) Could not set unknown property ‘outputFileName’ for object"，這個時候需要在Android Studio中把app目錄下的build.gradle檔案中的:
variant.outputs.each { output ->
def outputFile = output.outputFile
if (outputFile != null && outputFile.name.equals('app-debug.apk')) {
def fileName = outputFile.name.replace("app-debug.apk", "weex-app.apk")
output.outputFile = new File(outputFile.parent, fileName)
}
}
修改成：
variant.outputs.all { output ->
def outputFile = output.outputFile
if (outputFile != null && outputFile.name.equals('app-debug.apk')) {
def fileName = outputFile.name.replace("app-debug.apk", "weex-app.apk")
outputFileName = fileName
}
}
之後在Android Studio的app目錄下的build.gradle檔案中，在defaultConfig下加入：
javaCompileOptions {
annotationProcessorOptions {
includeCompileClasspath = true
}
}
這兩個問題都是與weex本身使用的是低版本的gradle，而在環境配置的過程中更新了gradle版本有相關性。
這時候如果運作成功基本上環境是沒什麼問題了。
4.安裝到移動端
Android Studio配置好之後，運作項目即可将其安裝到移動端。
如果要更新項目，把執行打包指令生成的 js 檔案（weex項目裡的dist/index.js）拷貝到 Android 項目的 assets/dist 資源檔案（app/assets/dist/index.js）中，然後項目會加載 js 檔案進行更新（其實就是使用 Weex SDK 的 WXSDKInstance 類加載）。
當然用以下指令直接在模拟器或真實裝置上啟動應用：
weex run ios
weex run android
weex run web
同樣以android為例，這一句指令執行了打包+建構+安裝執行三個過程。
在運作啟動指令前，需要確定 Android所需要的原生運作環境配置正确，并且需要先啟動模拟器（AVD）或連接配接上移動裝置再運作啟動指令。
啟動模拟器就是在Android Studio通過運作（Run）按鈕先把安卓模拟器（AVD）打開，然後再執行
npm run android
。
連接配接真機就是直接把安卓手機連接配接上，開啟USB調試。輸入：
adb devices
如果發現有裝置，則證明連接配接成功。然後再執行
npm run android
，選擇自己的裝置即可。
此時打開 Weex 項目，并嘗試修改 src 目錄下的 index.vue 檔案，可以發現，修改的内容會立即生效。其實就是通過index.js檔案傳給用戶端，再由用戶端解析實作的。
總結一下
Weex将寫好的Vue程式打包成單個JSBundle檔案
釋出到發包伺服器上，通過熱更新 push 到使用者的用戶端，交由【WeexSDK】執行解析
SDK中的【JS Framework】執行Bundle 腳本生成Virtual DOM
Virtual DOM經由各端執行環境【Weex Runtime】解析翻譯成執行指令
【Native RenderEngine】接收到指令後執行渲染操作，作出渲染出完整的界面
![vue項目：npm打包-S和-D差別：[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)