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