VUE腳手架搭建流程

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

2.下載安裝完成之后進(jìn)行測(cè)試,記住安裝位置

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

效果：

提示：如果碰到下面情況

可能原因：

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

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

注意：因?yàn)橛械娜穗娔X權(quán)限不足，可以提前先做安裝目錄中創(chuàng)建 node_global 和 node_cache 文件夾。

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

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

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

輸出效果：

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

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

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

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

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

安裝命令：

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

測(cè)試命令：

cnpm -v

安裝 Vue 腳手架

腳手架安裝命令:

一共下面兩種安裝方式

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

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

測(cè)試命令:

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

卸載命令:

npm uninstall -g @vue/cli

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

效果：

測(cè)試腳手架：

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

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

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

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

Vue項(xiàng)目創(chuàng)建

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

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

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

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

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

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

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

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

這里我們選擇 Manually

第五步、選擇項(xiàng)目的配置：

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

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

說明：

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

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

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

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

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

第九步、安裝結(jié)束，測(cè)試運(yùn)行

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

進(jìn)入你的項(xiàng)目目錄：cd 項(xiàng)目名

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

ctrl + c 停止

運(yùn)行成功，接下來我們可以在瀏覽器中打開項(xiàng)目：

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

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

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

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

命令：vue ui

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

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

(6) 第六步、選擇項(xiàng)目預(yù)設(shè)是默認(rèn)(default)還是手動(dòng)(Manually)

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

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

(9) 第九步、等待安裝，測(cè)試運(yùn)行：

點(diǎn)擊【任務(wù)】

點(diǎn)擊【serve】

點(diǎn)擊【運(yùn)行】

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

綠色通過點(diǎn)擊【啟動(dòng) app】

紅色報(bào)錯(cuò)點(diǎn)擊【輸出】

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

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

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

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

項(xiàng)目修改測(cè)試

這里我們先解讀一下 App.vue

這里我們將圖片替換成自己導(dǎo)入的圖片，并注釋掉 HelloWorld 組件的使用

保存代碼并刷新頁面之后，頁面顯示的正式我們的更換的圖片：

通過上邊的操作，大家會(huì)有一個(gè)感覺，Vue 腳手架項(xiàng)目并不是那么難。當(dāng)然也需要我們不斷的去熟悉項(xiàng)目結(jié)構(gòu)。

總結(jié)

到此這篇關(guān)于Vue腳手架搭建及創(chuàng)建Vue項(xiàng)目流程的文章就介紹到這了,更多相關(guān)Vue腳手架搭建創(chuàng)建項(xiàng)目內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論