使用vue-cli實戰項目代碼分享

這次帶給大家使用vue-cli實戰專案程式碼分享，使用vue-cli實戰的注意事項有哪些，以下就是實戰案例，一起來看一下。

本文是針對對於完全沒有了解過vue 和npm，連運行環境和專案構建的都不會的小白，對於前端老司機的就不用看了，浪費時間。

使用npm 與vue-cli 建置vue 專案

第一步：安裝執行環境（node與npm）

nodeJ官網：http://nodejs.cn/下載安裝包( 安裝)

安裝完成後，需要偵測是否安裝成功

使用命令列cmd 開啟dos 黑窗口，執行node -v 和npm –v，出現版號說明安裝成功

註（npm 是node自帶的，在安裝node時已經安裝了）

如何升級npm 的版本呢？很簡單

執行指令：npm i –g to update （全域安裝：建議） 或npm install –g npm

第二步：安裝腳架手vue -clic

安裝vue-cli 有兩種安裝途徑(npm 與cnpm)，二選一

(1) 使用npm 安裝vue-cli,全域安裝（該方式安裝比較慢，國外鏡像）

運行：npm install g vue –cli

(2) 使用cnpm ( 國內淘寶鏡像)安裝vue-cli

#(2) 使用cnpm ( 國內淘寶鏡像)安裝vue-cli

# （2.1） 首先要註冊cnpm<a href="http://www.php.cn/wiki/373.html" target="_blank">　　運行：</a>npm install -g cnpm --registry=https://

registry.npm.taobao.org

#　　

　　(2.2) 偵測cnpm 是否安裝成功，出現版本說明安裝成功　　運作：

cnpm -v

　　

#　　（2.3）使用cnpm 安裝腳架手vue-cli　　運行：

cnpm install –g vue-cli

　　使用vue – V（注意：大寫V）查看是否安裝成功　　運行：

vue –V

　　

第三個步驟：正式開始

建立專案

　　1.使用指令：cd目錄路徑，進入到你指定的建立專案的路徑下

　　如：

#　　

#　　2. 使用vue init webpack

初始化項目

　　運行：vue init webpack myfilst-vueproject(自訂檔案目錄名稱)

　　#一般預設，直接回車就可以了

　　

　　在目前為止，已創建好一個vue 的項目，

目錄結構

如：（結構詳解看官網）

　　

　　3.按照提示運行流程，在目前專案的目錄下安裝模組

　　運行: cd 專案名稱

　　運行： npm install

　　

　　 正在安裝模組依賴。 。 。 。

　　模組安裝完成，專案根目錄下多一個資料夾

　　

###　第四步：啟動/執行專案###

　運行：npm run dev

　成功運行,預設效果如：

　　

　　　　如果沒有顯示正常的頁面，看是否連接埠是否已被佔用，看是否連接埠是否已被佔用，看是否連接埠是否被佔用，看是否連接埠是否被佔用，看是否連接埠是否被佔用，看是否連接埠是否被佔用，看是否連接埠是否被佔用，看是否連接埠是否被佔用，看是否連接埠是否被佔用，看是否連接埠是否被佔用，看是否連接埠是否被佔用，看是否連接埠是否被佔用，看是否連接埠是否被佔用，看是否連接埠是否被佔用，看是否連接埠是否被佔用，看是否連接埠是否被佔用，看是否連接埠是否被佔用，看是否連接埠是否被佔用，看是否有連接埠默認運行端口為8080，

　　項目根目錄下->config->index.js

　　

　　　　修改該端口值，重新運行：npm run dev

　　每次修改設定檔都要重新運行

第五步：打包上線

　　運行：npm run build

#　　　打包完成後，會在根目錄下生成一個dis 的資料夾，可以在本地打開瀏覽，項目上線時，只需將dis 資料夾放在伺服器即可

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

如何使用Vue SSR 元件載入

如何使用Vue中watch

以上是使用vue-cli實戰項目代碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！