Weex 命令

2023-12-26 17:46 更新

創(chuàng)建工程

# 從官方模板中創(chuàng)建項目
$ weex create my-project

?@weex-cli/generator? 模塊使用 download-git-repo 去下載模板文件. ?download-git-repo? 工具允許你指定特定的分支及遠程倉庫地址進行項目下載,指定分支通過 (?#?) 符號進行分隔.

下載特定分支下的模板格式如下:

$ weex create '<template-name>#<branch-name>' <project-name>

例如:

$ weex create weex-templates/webpack#v1.0 my-project

該命令將會通過weex-templates/webpack項目的?v1.0?分支進行項目初始化。

你可以從官方模板或者遠程源創(chuàng)建項目模板,也可以創(chuàng)建你自己的?weex?項目模板,更多細節(jié)你可以查看如何創(chuàng)建你自己的模板.

編譯頁面

?@weex-cli/compile? 模塊提供對 Weex 項目中 ?.vue? 文件的編譯能力,你可以在官方項目中使用,也可以直接對單個?.vue?文件進行零配置的沙箱編譯,使用方法如下:

$ weex compile [資源文件] [產(chǎn)物地址]  <options>

例如:

$ weex compile src build

$ weex compile src/index.vue build

選項

選項描述
-w, --watch監(jiān)聽文件改動并實時編譯 [默認: true]
-d,--devtool [devtool]設置webpack編譯的devtool選項
-e,--ext [ext]設置默認編譯文件 [默認: .vue]
-m, --min對產(chǎn)物進行代碼混淆及壓縮 [默認: false]
-c, --config傳入webpack配置文件 [默認: false]
-b, --base設置基礎路徑 [默認: process.cwd()]

預覽頁面

?@weex-cli/preview? 模塊提供對 Weex 項目中? .vue? 文件的編譯及預覽能力,你可以在官方項目中使用,也可以直接對單個?.vue?文件進行零配置的沙箱預覽,使用方法如下:

$ weex preview [file | folder] <options>

瀏覽器會自動得打開預覽頁面并且你可以看到你的weex頁面的布局和效果。如果你在你的設備上安裝了Weex Playground App,你還可以通過掃描頁面上的二維碼來查看頁面。

使用下面的命令,你將可以預覽整個文件夾中的?.vue?文件

$ weex src --entry src/foo.vue

你需要指定要預覽的文件夾路徑以及入口文件(通過?--entry?傳入)。

選項

選項描述
-d,--devtool [devtool]設置webpack編譯的devtool選項
-m, --min對產(chǎn)物進行代碼混淆及壓縮 [默認: false]
-c, --config傳入webpack配置文件 [默認: false]
-b, --base設置基礎路徑 [默認: process.cwd()]

添加iOS/Android工程

?@weex-cli/generator? 模塊提供添加添加Weex官方iOS/Android工程功能。

使用?weex platform [add|remove] [ios|android]?命令可以添加或移除?iOS/Android?項目模板。

例子:

$ weex platform add ios
$ weex platform remove ios

該命令僅在 ?weex? 官方項目中有效,請注意項目結構,可以使用 ?weex platform list?來查看你的項目中支持的平臺。

運行iOS/Android工程

?@weex-cli/run? 模塊提供添加運行Weex官方iOS/Android工程功能,你可以通過如下命令使用:

# 運行 iOS 模擬器預覽
$ weex run ios
# 運行 Android 模擬器/真機預覽
$ weex run android
# 運行 Web 端預覽
$ weex run web

調試頁面

?@weex-cli/debug? 模塊提供對Weex頁面的調試能力,可使用如下命令啟動:

$ weex debug [we_file|bundles_dir] [options]

選項

選項描述
-p, --port [port]設置調試服務器的端口,[默認:8088]
--manual開啟該選項后將不會自動打開瀏覽器,[默認:false]
--channelid指定調試通道ID
--remote-debug-port [port]設置調試服務器端口號,[默認:9222]

如何集成調試工具到自己的APP

參考文檔:

  • [1] 集成Weex調試工具(Android)
  • [2] 集成Weex調試工具 (iOS)

代碼質量檢查

?@weex-cli/lint? 模塊提供對Weex代碼質量校驗功能,可使用如下命令啟動:

$ weex lint [file | folder] <options>

選項

?@weex-cli/lint? 內(nèi)置 ?eslint? 模塊用于進行代碼質量校驗,選項可參考 ESLint CLI。

如果想在你的工程內(nèi)加入 ?weex? 代碼質量校驗,你也可通過添加eslint插件eslint-plugin-weex的方式使用。

開發(fā)環(huán)境檢查

?@weex-cli/doctor? 模塊提供對本地開發(fā)環(huán)境的檢查,可使用如下命令啟動:

$ weex doctor

該命令會檢查你的本地開發(fā)環(huán)境,你可根據(jù)提示對你的開發(fā)環(huán)境進行調整,以便進行weex頁面的開發(fā)工作。


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號