Vue項目環(huán)境搭建的示例

這篇文章主要介紹Vue項目環(huán)境搭建的示例，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

安裝NodeJs

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

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

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

安裝步驟

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

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

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

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

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

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

(5).接著點擊Next:

(6).確認無誤后，點擊Install，開始安裝：

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

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

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

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

2.安裝全局webpack

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

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

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

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

4.創(chuàng)建項目

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

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

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

6.安裝完成后輸入：npm run dev  運行測試：

7.最后瀏覽器彈出結果為：

補充：

vue cli3安裝：

一、安裝

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

檢查安裝 vue -V

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

npm create admin

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

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

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

四、安裝預處理語言

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

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

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

六、保存設置 

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

七、選擇配置文件位置

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

八、最后一步保存設置

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

九、下載模板

cd admin進項目，啟動服務npm run serve,這里是沒有vue.config.js文件的

十、新建一個vue.config.js文件，進行項目配置

以上是“Vue項目環(huán)境搭建的示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注億速云行業(yè)資訊頻道！