1.4 vue-cli命令行

創建uni-app項目除了可以使用HBuilderX可視化界面，也可以使用vue-cli命令行。

1.4.1 開發環境配置

使用vue-cli命令行之前需要安裝Node.js。Node.js是一個基于Chrome V8引擎的JavaScript運行環境。 Node.js使用高效、輕量級的事件驅動及非阻塞I/O模型，它的軟件包管理工具npm是目前最大的開源生態系統。Node.js的安裝配置方法如下。

步驟01 進入Node.js官方網站，下載Node.js安裝包，這里下載穩定版，即Recommended For Most Users版本，如圖1-21所示。

步驟02 雙擊下載的文件進行安裝即可。Node.js安裝完畢后，出現圖1-22所示的界面，單擊【Finish】按鈕即可。

步驟03 按快捷鍵【Windows+R】調出運行窗口，輸入【cmd】，打開命令提示工具，在命令提示工具中輸入【node -v】，若出現圖1-23所示的界面，則表示安裝成功。

步驟04 全局安裝vue-cli。在命令提示工具中輸入【npm install -g @vue/cli】命令即可全局安裝vue-cli，如圖1-24所示。

1.4.2 使用vue-cli創建uni-app

創建正式版的uni-app項目（對應HBuilderX最新正式版）的代碼如下。

創建Alpha版的uni-app項目（對應HBuilderX最新Alpha版）的代碼如下。

uni-app項目創建完成后，系統會提示選擇項目模板，初次使用建議選擇【Hello uni-app】項目模板，如圖1-25所示。

如果選擇【自定義模板】，需要填寫uni-app模板地址，該地址就是托管在云端的倉庫地址。以GitHub為例，其地址格式為“用戶名/倉庫名”。例如，使用下載圖片模板，需要填寫dcloudio/uni-template-picture這個uni-app模板地址。

1.4.3 通過命令行運行、發布uni-app

輸入以下命令，即可完成uni-app的運行和發布。

其中，%PLATFORM%可取值如表1-1所示。

除了表中的可取值，還可以自定義更多條件編譯平臺，如釘釘小程序，具體操作可以參考官網package.json文檔（網址見“資源文件\網址索引.docx”）。

其中，快應用的運行和發布方式有以下兩種。

（1）類小程序WebView渲染方式。

（2）原生渲染方式。

溫馨提示

目前使用npm run build:app-plus會在/dist/build/app-plus下生成App打包資源。如需制作wgt包，應將app-plus中的文件壓縮成zip格式（注意：不要包含app-plus目錄），再重命名為${appid}.wgt， AppID為manifest.json文件中的AppID。

dev模式編譯出的各平臺代碼存放于根目錄下的/dist/dev/目錄，打開各平臺開發工具選擇對應平臺目錄即可進行預覽（H5平臺不會在此目錄下，其代碼存在于緩存中）；build模式編譯出的各平臺代碼存放于根目錄下的/dist/build/目錄，發布時選擇此目錄。

dev模式和build模式的區別如下。

（1）dev模式有SourceMap ，可以方便地進行斷點調試。

（2）build模式會將代碼進行壓縮，體積更小，更適合發布為正式版應用。

（3）進行環境判斷時，dev模式process.env.NODE_ENV的值為development，build模式process.env. NODE_ENV的值為production。