手把手教你搭建一個vue專案的完整步驟

2022-07-08 14:01:26

一、環境準備

1、安裝node.js

下載地址：https://nodejs.org/zh-cn/

介面展示

2、檢查node.js版本

檢視版本的兩種方式

1|node -v
2|node -version

出現版本號則說明安裝成功（最新的以官網為準）

3、為了提高我們的效率，可以使用淘寶的映象源

輸入：npm install -g cnpm --registry=https://registry.npm.taobao.org 即可安裝npm映象源
以後再用到npm的地方直接用cnpm來代替就好了，因為沒有映象源的話，安裝速度比較慢

檢查是否安裝成功：cnpm -v

二、搭建vue環境

1、全域性安裝vue-cli

這裡注意：安裝vue-cli對node.js的版本是有要求的

裝的兩種方式：輸入cmd命令

1|npm install -g @vue/cli //這個是從國外下載的比較慢
2|cnpm install -g @vue/cli //這個是從映象源下載

檢視安裝的版本（顯示版本號說明安裝成功）

1|vue --version

如果你原來有版本或者版本比較低，可以升級

1|npm update -g @vue/cli
2|yarn global upgrade --latest @vue/cli

三、建立vue專案

1、用cmd命令建立專案

1.1建立檔案

以管理員身份開啟命令列介面，進入任意一個想要建立專案的資料夾

輸入：vue create vue01

1.2選擇設定資訊

通過上下方向鍵選擇對應設定，然後回車

按空格鍵選擇要安裝的設定資源，帶 * 號說明被選上了

1.3選擇版本

上下方向鍵選擇版本，這裡我們選擇vue2，然後回車

1.4路徑模式選擇

這裡可以不用管，直接輸入 no/n

1.5語法程式碼格式檢查

程式碼檢查，選標準的就行，方向鍵切換，空格鍵選擇然後回車

程式碼檢查時間，方向鍵切換，空格鍵選擇然後回車

1.6第三方檔案存在的方式

1.獨立的檔案 2.綜合的

1.7是否儲存本次設定資訊（儲存預設）

這裡如果選擇儲存的話，就要輸入名字，預設就是資料夾的名字，下次設定的時候就會顯示這個檔案設定的選項就像上面的一樣，在設定的時候會多出來一個

1.8建立成功

Successfully created project vue01出現這個說明建立成功

1.9執行

cd到專案資料夾下面

cd vue01

輸入程式碼執行檔案
npm run serve

1.10啟動

在瀏覽器輸入對應的網址就可以看到介面啦
http://localhost:8080/

1.11停止服務

兩下Ctrl+C 或者Ctrl+C一下然後Y

2、用vue資源管理器建立

2.1進入vue資源管理器介面（vue ui介面）

cmd命令，因為是全域性的，所以在哪裡開啟都行，注意：執行的時候不能關閉cmd視窗，不然就停止服務了，如果電腦太卡，可以直接在瀏覽器輸入：http://localhost:8000/
vue ui

2.2建立檔案

這裡直接create 建立檔案

2.3設定資訊

和用cmd命令差不多，填完之後下一步

2.4設定預設

選擇預設，或者自定義，然後下一步完成建立

2.5啟動執行專案

按步驟來：任務>serve>執行>啟動

四、Vue-cli工程中每個資料夾和檔案的用處

dist 資料夾：預設 npm run build 命令打包生成的靜態資原始檔，用於生產部署
node_modules：存放npm命令下載的開發環境和生產環境的依賴包
public：有的叫assets：存放專案中需要用到的資原始檔，css、js、images以及index
src資料夾：存放專案原始碼及需要參照的資原始檔
src-api資料夾：放ajax相關操作的程式碼檔案:index.js(相關的介面),ajax.js(封裝的axios,攔截器)。有的叫service：自己設定的vue請求後臺介面方法
src-common資料夾：stylus的混合檔案.styl，不要寫到public也可以
src-components資料夾：存放vue開發中抽離的一些公共元件
src-mock資料夾：mock資料存放檔案及mock模擬介面（沒有後臺介面或介面不完整情況下可以模擬後臺介面）
src-pages資料夾：涉及到路由的元件
src-router資料夾:vue-router，路由器及路由的設定
src-store資料夾：存放 vue中的狀態資料，用vuex集中管理
App.vue檔案：使用標籤渲染整個工程的.vue元件
main.js檔案：vue-cli工程的入口檔案
package.json檔案：用於 node_modules資源部和啟動、打包專案的 npm 命令管理
build 資料夾：用於存放 webpack 相關設定和指令碼。開發中僅偶爾使用到此資料夾下 webpack.base.conf.js 用於設定 less、sass等css預編譯庫，或者設定一下 UI 庫
config 資料夾：主要存放組態檔，用於區分開發環境、線上環境的不同，常用到此資料夾下 config.js 設定開發環境的埠號、是否開啟熱載入或者設定生產環境的靜態資源相對路徑、是否開啟gzip壓縮、npm run build 命令打包生成靜態資源的名稱和路徑等