關(guān)于Vue安裝的詳細(xì)步驟總結(jié)

安裝NodeJs

首先解釋一下什么是nodejs，為什么要安裝node？node的優(yōu)點(diǎn)？

node.js是一個運(yùn)行在chromeJavascript運(yùn)行環(huán)境下（俗稱GoogleV8引擎）的開發(fā)平臺，用來方便快捷的創(chuàng)建服務(wù)器端網(wǎng)絡(luò)應(yīng)用程序，也可以把它理解為一個輕量級的JSP或PHP環(huán)境，如果用來開發(fā)Web應(yīng)用的話，有時要便捷很多。

node.js的最大優(yōu)點(diǎn)是處理并行訪問，如果一個web應(yīng)用程序同時會有很多訪問連接，就能體現(xiàn)使用node.js的優(yōu)勢。
另一個好處是，使用javascript作為服務(wù)器端腳本語言，可以消除一些與瀏覽器端js腳本的沖突。甚至發(fā)揮javascript動態(tài)編程的特性，在服務(wù)器與瀏覽器之間建立直接的動態(tài)程序。
總的來說，node.js可以像PHP一樣開發(fā)動態(tài)網(wǎng)站和WEB應(yīng)用。

安裝步驟

安裝環(huán)境：Windows7  x64

1.第一步檢測一下電腦是否安裝node.js

(1).開始-搜索cmd-回車，在命令行輸入node -v，回車，如果出現(xiàn)“'node' 不是內(nèi)部或外部命令，也不是可運(yùn)行的程序...”時說明沒有安裝node.js;

(2).https://nodejs.org/en/  下載并安裝node.js（選擇LTS格式），下載好后雙擊開始安裝，點(diǎn)擊Next：

(3).勾選“I accept the terms in the License Agreement”同意許可協(xié)議，并單擊Next下一步，出現(xiàn)如下界面：

(4).Node.js默認(rèn)安裝路徑為“C:\Program Files\nodejs\”，可以修改其他盤（我選擇的是安裝在D盤），單擊Next，出現(xiàn)安裝模式及模塊選擇界面：

(5).接著點(diǎn)擊Next:

(6).確認(rèn)無誤后，點(diǎn)擊Install，開始安裝：

(7).耐心等待一會，安裝完成，點(diǎn)擊Finish即可：

(8).打開cmd（Windows+R），檢測node是否安裝成功：

 首先測試npm是否安裝成功，由于新版的nodejs已經(jīng)集成了npm，所以之前npm也一并安裝好了。同樣可以使用cmd命令行輸入“npm -v”來測試是否安裝成功。

（這種安裝較慢，也可以利用淘寶鏡像進(jìn)行安裝， 在cmd里直接輸入：npm install -g cnpm –registry=https://registry.npm.taobao.org，回車，等待安裝...(windows使用管理員身份進(jìn)行安裝)）

2.安裝全局webpack

在命令行里輸入：npm install webpack -g （C盤）進(jìn)行全局安裝：

3.安裝vue-cli腳手架工具

在命令行里輸入：npm install -g vue-cli  （C盤）進(jìn)行全局安裝:

輸入：vue，回車，如果出現(xiàn)vue信息說明安裝成功

4.創(chuàng)建項(xiàng)目

關(guān)閉命令行，任意選擇一個盤（這里，我選擇D盤，新建一個名為mypro的文件夾），把mypro文件夾放進(jìn)HBuilder，進(jìn)入D盤mypro文件夾，右鍵選擇在此處打開命令窗口，輸入 vue init webpack mypro 回車：

5.進(jìn)入項(xiàng)目文件夾：cd mypro   (cd +  vue init webpack mypro  中的項(xiàng)目名字mypro)，回車進(jìn)入項(xiàng)目文件夾：

輸入： npm install     初始化，安裝依賴包node_modules

6.安裝完成后輸入：npm run dev  運(yùn)行測試：

7.最后瀏覽器彈出結(jié)果為：

補(bǔ)充：

vue cli3安裝：

一、安裝

npm install -g @vue/cli
或
yarn global add @vue/cli

檢查安裝 vue -V

二、創(chuàng)建新項(xiàng)目

npm create admin

admin是你需要創(chuàng)建的項(xiàng)目名稱，這里如果你是第一次用3.0版本的話，是沒有前兩個的，而只有最后兩個，這里是讓你選的，第一個是默認(rèn)配置，一般選第二個，自己配置，這里選擇最后一個

三、enter之后會彈出以下選擇

當(dāng)你選擇后會出現(xiàn)上面圖上的東西，這里你可以自由選擇用哪些配置，按上下鍵選擇哪一個，按空格鍵確定，所有的都選擇好后，按enter鍵進(jìn)行下一步，這里可以根據(jù)自己的需求來選擇

四、安裝預(yù)處理語言

這一步詢問你安裝哪一種 CSS 預(yù)處理語言，根據(jù)自己的需求自行選擇即可

五、選擇自動化代碼格式檢測

上面這個是詢問你代碼格式化檢測，配合vscode編輯器的Prettier - Code formatter插件，可以選擇隨后一個

六、保存設(shè)置 

 上圖第一個選項(xiàng)是問你是否保存剛才的配置，選擇確定后你下次再創(chuàng)建新項(xiàng)目就有你以前選擇的配置了，不用重新再配置一遍了

七、選擇配置文件位置

上圖意思問你像，babel,postcss,eslint這些配置文件放哪？
第一個是：放獨(dú)立文件放置
第二個是：放package.json里
這里推薦放單獨(dú)配置文件，選第一個 

八、最后一步保存設(shè)置

 上邊倒數(shù)第二行問你是否將以上這些將此保存為未來項(xiàng)目的預(yù)配置嗎？
最后一個是描述項(xiàng)目，你隨意選擇，點(diǎn)擊確定就開始下載模板了

九、下載模板

cd admin進(jìn)項(xiàng)目，啟動服務(wù)npm run serve,這里是沒有vue.config.js文件的

十、新建一個vue.config.js文件，進(jìn)行項(xiàng)目配置

 以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論