創(chuàng)建并運(yùn)行第一個(gè) uni-app 項(xiàng)目

1. 前言

在前面的小節(jié)中，我們已經(jīng)對(duì) uni-app 做了簡(jiǎn)單的介紹，相信大家都對(duì) uni-app 有了一定的了解。

本小節(jié)帶領(lǐng)大家創(chuàng)建第一個(gè) uni-app 項(xiàng)目。

創(chuàng)建 uni-app 項(xiàng)目有兩種方式：第一種是通過(guò)官方的開(kāi)發(fā)者工具 HBuilder 來(lái)創(chuàng)建，第二種是通過(guò) vue-cli 命令行創(chuàng)建。

2. 使用 HBuilderX 與使用 cli 創(chuàng)建項(xiàng)目的主要區(qū)別

使用 cli 創(chuàng)建項(xiàng)目，編譯器是安裝在單獨(dú)的項(xiàng)目下面的，升級(jí)時(shí)需要手動(dòng)命令升級(jí)，只對(duì)這一個(gè)項(xiàng)目生效。

使用 HBuilderX 創(chuàng)建項(xiàng)目，編譯器是裝在 HBuilderX 的插件目錄下面了，HBuilderX 版本更新，編譯器就會(huì)一起更新升級(jí)，對(duì)所有項(xiàng)目生效。日常開(kāi)發(fā)建議大家直接使用 HBuilder 創(chuàng)建項(xiàng)目就可以了。

3. HBuilder創(chuàng)建項(xiàng)目

HBuilderX 是 uni-app 官方推出的開(kāi)發(fā)者工具，里面內(nèi)置了開(kāi)發(fā)環(huán)境，不需要額外配置 nodejs 環(huán)境，可以幫我們省去很多麻煩。

3.1 下載工具

先來(lái)點(diǎn)開(kāi)官方網(wǎng)址下載 HBuilderX 開(kāi)發(fā)者工具，建議下載App開(kāi)發(fā)版。

HBuilderX：官方IDE下載地址

3.2 創(chuàng)建 uni-app 項(xiàng)目

接下來(lái)，我們通過(guò)剛剛下載的 HBuilderX 開(kāi)發(fā)者工具創(chuàng)建一個(gè) uni-app 項(xiàng)目，要跟著一起操作哦。點(diǎn)擊工具欄中的文件->新建->項(xiàng)目：

會(huì)出現(xiàn)一個(gè)彈窗，接下來(lái)我們需要選擇 uni-app 類(lèi)型，輸入項(xiàng)目名稱(chēng)，修改項(xiàng)目路徑，選擇合適的模板，點(diǎn)擊創(chuàng)建，項(xiàng)目就創(chuàng)建成功啦。

選擇模板的時(shí)候，有幾個(gè)模板選項(xiàng)。分別是：

• 默認(rèn)模板：不會(huì)內(nèi)置常用組件，想要自己安裝組件可以使用該模板。
• uni-ui 項(xiàng)目：內(nèi)置很多常用的組件，日常開(kāi)發(fā)推薦使用該模板。
• Hello uni-app：安裝了官方的組件和 API 示例，初次體驗(yàn)的話可以使用該模板。

3.3 在項(xiàng)目中添加 HelloWorld

打開(kāi) pages/index/index.vue 文件，將 <template> 標(biāo)簽的內(nèi)容替換成下面的代碼。
實(shí)例：

<template>
    <view class="container">
        HelloWorld
    </view>
</template>

3.4 運(yùn)行項(xiàng)目

我們來(lái)將上面添加的 HelloWorld 運(yùn)行起來(lái)吧。

1. 運(yùn)行到瀏覽器

點(diǎn)擊工具欄中的運(yùn)行->運(yùn)行到瀏覽器->選擇相應(yīng)的瀏覽器運(yùn)行：

選擇瀏覽器之后，HBuilderX 開(kāi)發(fā)者工具會(huì)出現(xiàn)正在編譯的提示，第一次運(yùn)行會(huì)慢一點(diǎn)，編譯成功后，自動(dòng)打開(kāi)瀏覽器并顯示項(xiàng)目的頁(yè)面?？梢钥吹?HelloWorld 打印出來(lái)了。

2. 運(yùn)行到內(nèi)置瀏覽器

點(diǎn)擊工具欄中的運(yùn)行->運(yùn)行到內(nèi)置瀏覽器，會(huì)出現(xiàn)一個(gè) Web 瀏覽器的彈出框，第一次打開(kāi)會(huì)比較慢，需要耐心等一會(huì)才會(huì)出現(xiàn)項(xiàng)目的頁(yè)面。

3. 運(yùn)行到手機(jī)或模擬器

使用這個(gè)功能需要先用數(shù)據(jù)線連接手機(jī)，否則會(huì)提示“未檢測(cè)到手機(jī)或模擬器，請(qǐng)稍后再試”。

數(shù)據(jù)線連接手機(jī)后，我們?cè)冱c(diǎn)擊工具欄中的運(yùn)行->運(yùn)行到手機(jī)或模擬器。系統(tǒng)會(huì)自動(dòng)在我們手機(jī)上面安裝 HBuilderX 手機(jī)版。

在手機(jī)上面打開(kāi) HBuilderX 手機(jī)版，就可以看到 HelloWorld 頁(yè)面。

Tips：
如果打開(kāi)手機(jī)版 HBuilderX 沒(méi)有看到正確的頁(yè)面，可以關(guān)掉手機(jī)應(yīng)用進(jìn)程，重新打開(kāi)看一下。
如果編譯出錯(cuò)，點(diǎn)擊查看工具欄中的運(yùn)行->運(yùn)行到手機(jī)或模擬器->真機(jī)運(yùn)行常見(jiàn)故障排除指南，排除錯(cuò)誤。

4. 運(yùn)行到小程序模擬器

第一次使用小程序模擬器，需要先安裝小程序開(kāi)發(fā)者工具，并在工具欄->運(yùn)行->運(yùn)行到小程序模擬器->運(yùn)行設(shè)置中設(shè)置小程序開(kāi)發(fā)者工具安裝的路徑。

• 在微信開(kāi)發(fā)者工具里運(yùn)行

點(diǎn)擊工具欄中的運(yùn)行->運(yùn)行到小程序模擬器->微信開(kāi)發(fā)者工具，即可在微信開(kāi)發(fā)者工具里面體驗(yàn) uni-app。

在 HBuilderX 里面開(kāi)發(fā)，微信開(kāi)發(fā)者工具里面就可以看到實(shí)時(shí)效果。uni-app 會(huì)將項(xiàng)目編譯到根目錄的 unpackage/dist 目錄下面。

Tips：如果沒(méi)有成功運(yùn)行可以做下面的操作。
如果微信開(kāi)發(fā)者工具已經(jīng)打開(kāi)，關(guān)閉微信開(kāi)發(fā)者工具，重試一下；
如果還是不行的話，建議將微信開(kāi)發(fā)者工具升級(jí)到最新版本；
最后如果自動(dòng)啟動(dòng)微信開(kāi)發(fā)工具失敗，可以手動(dòng)在開(kāi)發(fā)者工具中打開(kāi)HBuilderX控制臺(tái)中提示的項(xiàng)目路徑。

• 在百度開(kāi)發(fā)者工具里運(yùn)行

點(diǎn)擊工具欄的運(yùn)行->運(yùn)行到小程序模擬器->百度開(kāi)發(fā)者工具，在百度開(kāi)發(fā)者工具中打開(kāi) HBuilderX 控制臺(tái)中提示的項(xiàng)目路徑，就可以在百度開(kāi)發(fā)者工具中體驗(yàn) uni-app。

• 在支付寶小程序開(kāi)發(fā)者工具里運(yùn)行

點(diǎn)擊工具欄的運(yùn)行->運(yùn)行到小程序模擬器->支付寶小程序開(kāi)發(fā)者工具，在支付寶小程序開(kāi)發(fā)者工具中打開(kāi) HBuilderX 控制臺(tái)中提示的項(xiàng)目路徑，就可以在支付寶小程序開(kāi)發(fā)者工具中體驗(yàn) uni-app。

• 在字節(jié)跳動(dòng)開(kāi)發(fā)者工具里運(yùn)行

點(diǎn)擊工具欄的運(yùn)行->運(yùn)行到小程序模擬器->字節(jié)跳動(dòng)開(kāi)發(fā)者工具，在字節(jié)跳動(dòng)開(kāi)發(fā)者工具中打開(kāi) HBuilderX 控制臺(tái)中提示的項(xiàng)目路徑，就可以在字節(jié)跳動(dòng)開(kāi)發(fā)者工具中體驗(yàn) uni-app。

4. vue-cli 命令行創(chuàng)建項(xiàng)目

我們?cè)诮K端通過(guò) vue-cli 命令行創(chuàng)建 uni-app 項(xiàng)目，在創(chuàng)建項(xiàng)目之前，需要保證電腦已經(jīng)配置了 nodejs 環(huán)境。

4.1 安裝 vue-cli

npm install -g @vue/cli

4.2 創(chuàng)建 uni-app 項(xiàng)目

創(chuàng)建正式版項(xiàng)目，對(duì)應(yīng) HBuilderX 最新正式版，最常用

vue create -p dcloudio/uni-preset-vue my-project

使用 alpha 版項(xiàng)目，對(duì)應(yīng) HBuilderX 最新 alpha 版，可能不太穩(wěn)定

vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

創(chuàng)建項(xiàng)目的過(guò)程中會(huì)提示選擇項(xiàng)目模板，一般選擇默認(rèn)模板就可以了。

如果想要選擇自定義模板，需要先填寫(xiě)一個(gè) uni-app 模板地址，這個(gè)地址可以是托管在 GitHub 上面的倉(cāng)庫(kù)地址，地址格式為 userName/repositoryName，比如 dcloudio/uni-template-picture 就是下載圖片模板。

更多的下載方式，可以參考這個(gè)插件的說(shuō)明：download-git-repo

4.3 運(yùn)行uni-app

npm run dev:%PLATFORM%

%PLATFORM% 可取值如下：

Tips：
dev 模式編譯出的各平臺(tái)代碼存放于根目錄下的 /dist/dev/ 目錄，打開(kāi)各平臺(tái)開(kāi)發(fā)工具選擇對(duì)應(yīng)的平臺(tái)目錄即可進(jìn)行預(yù)覽（h5 平臺(tái)不會(huì)在此目錄，存在于緩存中）；
build 模式編譯出的各平臺(tái)代碼存放于根目錄下的 /dist/build/ 目錄，發(fā)布時(shí)選擇此目錄進(jìn)行發(fā)布；
dev 和 build 模式的區(qū)別：dev 模式有 SourceMap 可以方便的進(jìn)行斷點(diǎn)調(diào)試；build 模式進(jìn)行代碼進(jìn)行壓縮，體積更小更適合發(fā)布為正式版應(yīng)用；進(jìn)行環(huán)境判斷時(shí)，dev 模式 process.env.NODE_ENV 的轉(zhuǎn)換開(kāi)發(fā)，構(gòu)建模式 process.env.NODE_ENV 的轉(zhuǎn)換生產(chǎn)。

5. 小結(jié)

本節(jié)主要介紹了 uni-app 項(xiàng)目創(chuàng)建的兩種方式，本節(jié)的重點(diǎn)如下：

• 使用 HBuilderX 與使用 cli 創(chuàng)建項(xiàng)目的主要區(qū)別；
• 使用 HBuilderX 創(chuàng)建項(xiàng)目；
• 使用 vue-cli 命令行創(chuàng)建項(xiàng)目。