項(xiàng)目原因被安排了Vue前端任務(wù)，電腦重裝過(guò)系統(tǒng)，只能重新配置開(kāi)發(fā)環(huán)境，雖然很快就被安排了其他工作，但是想到以后可能還會(huì)出現(xiàn)需要用到vue的情況，就忙里偷閑，整理了下過(guò)程，寫(xiě)下來(lái)以備不時(shí)之需。
在網(wǎng)上找教程，總有種“大神覺(jué)得你都會(huì)了”的感覺(jué)，然而菜鳥(niǎo)們表示我們真的不懂啊?。。。ㄔ鼓铑H深(╯‵□′)╯︵┻━┻......所以說(shuō)就萌生了個(gè)想法，說(shuō)不定由我這樣的小白來(lái)寫(xiě)教程，對(duì)其他小白來(lái)說(shuō)可能會(huì)比較簡(jiǎn)單易懂一點(diǎn)。以后工作的間隙我會(huì)斷斷續(xù)續(xù)寫(xiě)一些vue教程，各方面應(yīng)該都有，而且是比較基礎(chǔ)的部分，希望能幫到大家。
好了，話(huà)不多說(shuō)，進(jìn)入我們今天的主題！
- 首先，要確保node和npm可用，輸入以下代碼檢測(cè)：
node -v
npm -v
出現(xiàn)版本號(hào)即可。
- 全局安裝webpack：
cnpm install webpack -g
- 安裝vue：
npm install vue
- 安裝vue腳手架：
npm install vue-cli -g
新建一個(gè)文件夾用來(lái)存儲(chǔ)搭建的vue工程
打開(kāi)文件夾，輸入以下代碼開(kāi)始創(chuàng)建工程：
vue init webpack-simple vueprac-1
注意：
此處的vueprac-1是我取的工程名稱(chēng)，工程名字不可用中文
這個(gè)命令的意思是初始化一個(gè)項(xiàng)目，其中webpack是構(gòu)建工具，也就是整個(gè)項(xiàng)目是基于webpack的。
接著會(huì)出現(xiàn)一些提示，包括vue-cli的當(dāng)前版本最新版本什么的，不用管，接著會(huì)出現(xiàn)一些初始化設(shè)置：
Project name （vueprac-1）
Project description （A Vue.js project）
Author （XXX）
License （MIT）
Use sass? （No）
初始化設(shè)置這里可以直接回車(chē)默認(rèn)跳過(guò)，也可以選擇填寫(xiě)，看項(xiàng)目情況要求。
- 打開(kāi)新建工程所在文件夾
cd vueprac-1 // 此處為工程名稱(chēng)，本工程為vueprac-1
- 安裝工程開(kāi)展所需的項(xiàng)目依賴(lài)
npm install
這一步經(jīng)常會(huì)出現(xiàn)WARN，通常是沒(méi)有影響的：
如果出現(xiàn)了ERR!就要注意了，這意味著工程出錯(cuò)，可以嘗試以下幾種解決方案：
首先確保自己打開(kāi)工程的地址無(wú)誤；
安裝某個(gè)包時(shí)出現(xiàn)錯(cuò)誤，可以重新下載安裝項(xiàng)目依賴(lài)；
刪除工程目錄下的node_modules包，重新安裝。
- 安裝好后的項(xiàng)目工程結(jié)構(gòu)如下所示：
- 一切都準(zhǔn)備好后，就可以運(yùn)行項(xiàng)目啦
npm run dev
注意：
“run”對(duì)應(yīng)的是package.json文件中，scripts字段中的dev，相當(dāng)于啟動(dòng)項(xiàng)目的快捷指令。大家可以去找一找，因?yàn)椴煌?xiàng)目的啟動(dòng)指令未必相同哦。
此時(shí)，打開(kāi)http://localhost:8080就能看到vue頁(yè)面啦：
開(kāi)發(fā)時(shí)執(zhí)行的主要操作都在src目錄下，在這里進(jìn)行存儲(chǔ)圖片、編寫(xiě)樣式、傳輸數(shù)據(jù)等操作，不過(guò)這都是以后要做的，今天的小天使們只要成功的搭建好環(huán)境、安裝好依賴(lài)，創(chuàng)建好項(xiàng)目，就已經(jīng)很了不起啦！
