VUE腳手架搭建流程

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

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

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

效果：

提示：如果碰到下面情況

可能原因：

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

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

注意：因為有的人電腦權限不足，可以提前先做安裝目錄中創(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ū)分開：

我們學習的 Vue 版本的 2.X，腳手架的版本是 4.5.12

Vue 可以理解為中式建筑風格，經(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 和名字，取消輸入 N：

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

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

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

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

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

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

ctrl + c 停止

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

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

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

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

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

命令：vue ui

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

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

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

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

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

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

點擊【任務】

點擊【serve】

點擊【運行】

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

綠色通過點擊【啟動 app】

紅色報錯點擊【輸出】

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

項目結(jié)構解讀

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

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

項目修改測試

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

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

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

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

總結(jié)

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

最新評論