使用鷹架創建uni-app項目

「

閒來無事寫寫小程序，於是想用uni-app框架來實現，本文將會對創建步驟進行詳解。

”

前言

#本文主要針對小程式框架uni-app的創建展開介紹，如果你也是新手那就可以跟著喀喀的節奏一起來。

一、安裝node.js

#開啟官網安裝喀喀爾安裝起來的版本。

node.js安裝

#安裝完成後使用node -V來檢驗是否安裝成功

驗證node.js是否安裝成功

為什麼要安裝node.js估計很多跟咔咔一樣是寫後端的有點理解不了。

因為node.js軟體內建了npm，所以windows系統在安裝nodejs後，開啟cmd即可使用npm下載資源.linux在這裡就暫時不說了哈！

npm,全名為【node package management】，是nodejs內建的軟體套件管理器，這也就是為什麼要安裝node.js的原因。

二、使用npm安裝vue鷹架

#網路上看了大多數第一步讓執行指令npm install -g @vue/cli

但是安裝的vue-cli是2.9版本的，但是在建立uni-app專案時需要使用create指令，所以需要更高的版本。

這裡也是喀喀踩過的一個坑，你們就不踩了哈！

如果已經安裝的可以使用npm uninstall -g vue-cli這個指令來卸載。

「

然後執行npm install -g cnpm這個指令。

##」

看網路上有人使用的淘寶的

npm install -g cnpm --registry=http://registry.npm.taobao.org 安裝淘寶的cnpm。

喀喀噠理解的就是一個鏡像，但是咔咔有神器所以就直接使用安裝了，沒有使用淘寶的。

安裝成功就是下圖的樣子

cnpm安裝成功示範

然後再安裝vue的鷹架，執行指令

“

cnpm install -g @vue/cli

#”

##再次安裝@vue-cli

下圖為安裝過程，流程沒有結束。

安裝流程

安裝完成後再使用vue -V檢視一下版本就是4.5.9的了，只要大過3就可以了。

新的版本

#三、建立專案

經過上面無傷大雅的安裝之後，那麼我們接下來就是在面向窗口cmd中輸入：

“

vue create -p dcloudio/uni-preset- vue 專案名稱;

」

建立專案

首次建立會提示，我們選擇預設即可，回車即選。

創建專案

不知道你們在創建專案時會不會出現以下問題，但是咔咔在這裡出現了問題，咔咔將這個問題的出現和解決方案寫下來。

如果有遇到的就跟這來，沒遇到的直接跳過即可。

下圖就是安裝過程中出現的錯誤。

錯誤示範

解決方案

#使用管理員模式開啟命令列

#「

執行指令npm cache clean -f清除快取

#」

管理員身分執行命令列

清除完快取後，安裝最新版本的Node helper：

「

npm install -g n

#」

然後執行下列指令

##“

npm install -g n --force

”

最後執行

“

npm install

」

可。

然後重新執行建立專案`

#

“

vue create -p dcloudio/uni-preset-vue lottery

”

看到下圖咔咔圈到的就代表已經創建成功了。

建立專案

#四、微信開發者工具中執行專案

#專案建立成功後就需要執行了

來到專案目錄執行指令

#「

npm run dev:mp -weixin

」

看到下圖提示即可。

運行專案

完成後會在專案目錄中看到以下結構，會多出一個dist目錄

專案目錄

需要給微信開發者工具匯入的專案路徑就是下圖喀喀爾圈起來的地方

微信開發者工具導入專案目錄

微信開發平台怎麼導入專案自己研究哈，下圖就是喀喀運作的展示圖

運行結果圖片

總結

#以上就是喀喀使用vue的鷹架創造uni-app專案的全過程。

初次接觸vue更是初次接觸uni-app來開發小程序，所以對於文章中部分命令的執行和問題的解決如果有什麼不對的地方，望大家可以給提出來。

在這個創建的過程中咔咔也是根據其它技術文章一步一步操作的，最後總結出來的文章，也是為了給跟我一樣同樣的新手一點幫助。

「

堅持學習、堅持寫博、堅持分享是咔咔從業以來一直所秉持的信念。希望在偌大互聯網中咔咔的文章能帶給你一絲絲幫助。我是咔咔，下期見。

”

以上是使用鷹架創建uni-app項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！