快捷導(dǎo)航

Vue腳手架搭建及創(chuàng)建Vue項目流程的詳細教程

更新時間：2022年09月03日 11:01:31 作者：蕭寂173

Vue腳手架指的是vue-cli,它是一個快速構(gòu)建**單頁面應(yīng)用程序(SPA)**環(huán)境配置的工具，cli是(command-line-interfac)命令行界面,下面這篇文章主要給大家介紹了關(guān)于Vue腳手架搭建及創(chuàng)建Vue項目流程的相關(guān)資料,需要的朋友可以參考下

VUE腳手架搭建流程

1.安裝 Node.js(推薦一個網(wǎng)站：http://nodejs.cn/)

2.下載安裝完成之后進行測試,記住安裝位置

node -v 測試 node 是否安裝成功以及檢查 node 版本
npm -v 測試 npm 是否安裝成功以及檢查 npm 版本

效果：

提示：如果碰到下面情況

C盤報錯

可能原因：

可能是C:\Users\Administrator(users)目錄下的.npmrc里的配置問題,把里面的文件改成自己需要的路徑，比如我想放到J盤
prefix=J:\software\nodejs\node_global
cache=J:\software\nodejs\node_cache

3.配置 npm 下載插件的默認安裝目錄和緩存日志目錄,

注意：因為有的人電腦權(quán)限不足，可以提前先做安裝目錄中創(chuàng)建 node_global 和 node_cache 文件夾。

注意：路徑需要根據(jù)自己的在第二步選擇的位置進行配置

打開 cmd 窗口，依次輸入配置命令

npm config set prefix "F:\software\nodejs\node_global"
npm config set cache "F:\software\nodejs\node_cache"

輸出效果：

4. 配置 node 所需環(huán)境變量

進入環(huán)境變量對話框,在【系統(tǒng)變量】下新建【NODE_PATH】，值是node安裝目錄下的node_global中node_modules的路徑【J:\software\nodejs\node_global\node_modules】。
注意：這里需要自己的在第二步選擇的位置進行配置

將【用戶變量】中的【Path】添加【F:\software\nodejs\node_global】

注意：這里需要自己的在第二步選擇的位置進行配置

安裝國內(nèi)淘寶鏡像

安裝命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

測試命令：

cnpm -v

安裝 Vue 腳手架

腳手架安裝命令:

一共下面兩種安裝方式

本次演示選擇第二種安裝方式

npm install -g @vue/cli   
cnpm install -g @vue/cli

測試命令:

vue -V（這里是大寫的 V）

卸載命令:

npm uninstall -g @vue/cli

這里我們采用第二種，采用國內(nèi)鏡像的方式進行安裝：

效果：

測試腳手架：

到這為止，Vue 腳手架已經(jīng)安裝完成了。但是有兩個概念需要區(qū)分開：

我們學(xué)習(xí)的 Vue 版本的 2.X，腳手架的版本是 4.5.12

Vue 可以理解為中式建筑風(fēng)格，經(jīng)過更新升級，現(xiàn)在是 2.X 版本

Vue 腳手架可以理解為蓋房包工隊，也在不斷改造，現(xiàn)在是 4.5.12

Vue項目創(chuàng)建

Vue 腳手架創(chuàng)建項目有兩種，一種是命令行創(chuàng)建方式，一種是圖形化界面方式。

第一種命令行創(chuàng)建方式：

第一步、創(chuàng)建 Vue 項目所在文件夾

第二步、在文件夾中打開 cmd

第三步、創(chuàng)建 vue 項目

創(chuàng)建命令：vue create 項目名；

命令行操作：空格是選中或取消、方向鍵選擇、A 是全選、回車是下一步、

第四步、按鍵盤上下鍵可以選擇默認(default)還是手動(Manually)：

這里我們選擇 Manually

第五步、選擇項目的配置：

這里我們選擇的是 Vue 版本選項和 Babel，前者可以選擇 Vue 的版本，后者將高階的 ES 轉(zhuǎn)為低階的 ES5進行兼容適配，其他選擇我們放到了最后解讀。

第六步、選擇將配置存放方式

說明：

In dedicated config files：單獨保存在各自的配置文件中
In package.json：保存在 package.json 文件中

第七步、是否保存為未來項目的預(yù)配置

是否記錄一下本次配置，以便下次使用這套配置，需要輸入 Y 和名字，取消輸入 N：

第八步、回車確定，等待安裝

回車確定之后，等待 Vue-CLI 創(chuàng)建項目完成：

第九步、安裝結(jié)束，測試運行

回車確定之后，等待 Vue-CLI 創(chuàng)建項目完成：

進入你的項目目錄：cd 項目名

啟動開發(fā)服務(wù)：npm run serve

ctrl + c 停止

運行成功，接下來我們可以在瀏覽器中打開項目：

第二種圖形化界面創(chuàng)建方式：

(1) 第一步、創(chuàng)建 Vue 項目所在文件夾

(2) 第二步、在文件夾中打開 cmd

(3) 第三步、輸入命令打開圖形化界面

命令：vue ui

(4) 第四步、在打開的瀏覽器中，選擇創(chuàng)建，核對項目目錄，創(chuàng)建項目

(5) 第五步、輸入項目名，選擇基本配置

(6) 第六步、選擇項目預(yù)設(shè)是默認(default)還是手動(Manually)

(7) 第七步、選擇項目的配置和配置存放方式：

(8) 第八步、是否保存為未來項目的預(yù)配置：

(9) 第九步、等待安裝，測試運行：

點擊【任務(wù)】

點擊【serve】

點擊【運行】

查看儀表盤狀態(tài)

綠色通過點擊【啟動 app】

紅色報錯點擊【輸出】

到這為止，我們已經(jīng)掌握了兩種方式，雖然我們是在電腦的 CMD 中運行的命令，但是這些命令也可以運行在編譯軟件的終端控制臺中。

項目結(jié)構(gòu)解讀

接下來，我們開始解析 Vue 腳手架項目的項目結(jié)構(gòu)，熟悉結(jié)構(gòu)才能更快速的開發(fā)。

node_modules：依賴包目錄
node 提供的管家，用于提供第三方依賴，依賴內(nèi)部的依賴也會進行關(guān)聯(lián)導(dǎo)入。存放 npm 命令下載的開發(fā)環(huán)境和生產(chǎn)環(huán)境的依賴包。
public：靜態(tài)資源目錄
index.html: 入口頁面
可以存放公共資源,圖片、模板界面等
src 目錄：所用的項目結(jié)構(gòu)，所有開發(fā)內(nèi)容都在 src 中
以后都在這個目錄下寫代碼、存放項目源碼及需要引用的資源文件。
assets 存放項目中需要用到的資源文件，如 css、js、images 等
componens 存放通用公共組件
views 存放路由視圖組件
App.vue 所有 vue 組件入口，根組件
main.js 主入口 js
package.json: 包管理配置文件