這篇文章來(lái)自：?

作者：datura_lj鏈接：http://www.reibang.com/p/1626b8643676

來(lái)源：簡(jiǎn)書

步驟很詳細(xì)全面泉手，幫助我避開了很多新手容易遇到的坑橘荠，所以記錄下來(lái)。

說(shuō)明：此文章參考了網(wǎng)上一些前人的技術(shù)分享予弧，自己拿過(guò)來(lái)總結(jié)一下。此文章是基于webpack構(gòu)建的vue項(xiàng)目，并實(shí)現(xiàn)簡(jiǎn)單的單頁(yè)面應(yīng)用。其中利用到的相關(guān)技術(shù)會(huì)簡(jiǎn)單加以說(shuō)明

一桐玻、那么我們就從最簡(jiǎn)單的環(huán)境搭建開始：

1.安裝node.js，從node.js官網(wǎng)下載并安裝node溉旋，安裝過(guò)程很簡(jiǎn)單畸冲，一路“下一步”就可以了（傻瓜式安裝）。安裝完成之后观腊，打開命令行工具(win+r邑闲，然后輸入cmd)，輸入 node -v梧油，如下圖苫耸，如果出現(xiàn)相應(yīng)的版本號(hào)，則說(shuō)明安裝成功儡陨。

1

這里需要說(shuō)明下褪子，因?yàn)樵诠倬W(wǎng)下載安裝node.js后量淌，就已經(jīng)自帶npm（包管理工具）了，另需要注意的是npm的版本最好是3.x.x以上嫌褪，以免對(duì)后續(xù)產(chǎn)生影響呀枢。

2.安裝淘寶鏡像，打開命令行工具笼痛，把這個(gè)（npm install -g cnpm --registry=https://registry.npm.taobao.org）復(fù)制（這里要手動(dòng)復(fù)制就是用鼠標(biāo)右鍵那個(gè)裙秋，具體為啥不多解釋），安裝這里是因?yàn)槲覀冇玫膎pm的服務(wù)器是外國(guó)缨伊，有的時(shí)候我們安裝“依賴”的時(shí)候很很慢很慢超級(jí)慢摘刑，所以就用這個(gè)cnpm來(lái)安裝我們說(shuō)需要的“依賴”。安裝完成之后輸入 cnpm -v枷恕，如下圖徐块，如果出現(xiàn)相應(yīng)的版本號(hào)蛹锰，則說(shuō)明安裝成功深胳。

2

3.安裝webpack绰疤，打開命令行工具輸入：npm install webpack -g，安裝完成之后輸入 webpack -v舞终，如下圖轻庆，如果出現(xiàn)相應(yīng)的版本號(hào)，則說(shuō)明安裝成功敛劝。

3

4.安裝vue-cli腳手架構(gòu)建工具余爆，打開命令行工具輸入：npm install vue-cli -g，安裝完成之后輸入 vue -V（注意這里是大寫的“V”）蛾方，如下圖，如果出現(xiàn)相應(yīng)的版本號(hào)上陕，則說(shuō)明安裝成功。

4

二释簿、通過(guò)以上四步，我們需要準(zhǔn)備的環(huán)境和工具都準(zhǔn)備好了庶溶，接下來(lái)就開始使用vue-cli來(lái)構(gòu)建項(xiàng)目

1.在硬盤上找一個(gè)文件夾放工程用的行疏。這里有兩種方式指定到相關(guān)目錄：①cd 目錄路徑 ②如果以安裝git的殴穴，在相關(guān)目錄右鍵選擇Git Bash Here

2.安裝vue腳手架輸入：vue init webpack exprice 震桶，注意這里的“exprice” 是項(xiàng)目的名稱可以說(shuō)是隨便的起名，但是需要主要的是“不能用中文”。

$ vue init webpack exprice --------------------- 這個(gè)是那個(gè)安裝vue腳手架的命令

This will install Vue 2.x version of the template.? ? ---------------------這里說(shuō)明將要?jiǎng)?chuàng)建一個(gè)vue 2.x版本的項(xiàng)目

For Vue 1.x use: vue init webpack#1.0 exprice

? Project name (exprice)? ? ---------------------項(xiàng)目名稱

? Project name exprice

? Project description (A Vue.js project)? ---------------------項(xiàng)目描述

? Project description A Vue.js project

? Author Datura? --------------------- 項(xiàng)目創(chuàng)建者

? Author Datura

? Vue build (Use arrow keys)

? Vue build standalone

? Install vue-router? (Y/n)? --------------------- 是否安裝Vue路由歼指，也就是以后是spa（但頁(yè)面應(yīng)用需要的模塊）

? Install vue-router? Yes

? Use ESLint to lint your code? (Y/n) n ---------------------是否啟用eslint檢測(cè)規(guī)則，這里個(gè)人建議選no

? Use ESLint to lint your code? No

? Setup unit tests with Karma + Mocha? (Y/n)

? Setup unit tests with Karma + Mocha? Yes

? Setup e2e tests with Nightwatch? (Y/n)

? Setup e2e tests with Nightwatch? Yes

vue-cli · Generated "exprice".

To get started:? --------------------- 這里說(shuō)明如何啟動(dòng)這個(gè)服務(wù)

cd exprice

npm install

npm run dev

如下圖：

3.cd 命令進(jìn)入創(chuàng)建的工程目錄脱拼，首先cd exprice（這里是自己建工程的名字）；

4.安裝項(xiàng)目依賴：npm install拒炎，因?yàn)樽詣?dòng)構(gòu)建過(guò)程中已存在package.json文件挪拟，所以這里直接安裝依賴就行。不要從國(guó)內(nèi)鏡像cnpm安裝(會(huì)導(dǎo)致后面缺了很多依賴庫(kù))击你，但是但是如果真的安裝“個(gè)把”小時(shí)也沒(méi)成功那就用：cnpm install 吧

5.安裝 vue 路由模塊 vue-router 和網(wǎng)絡(luò)請(qǐng)求模塊 vue-resource玉组，輸入：cnpm install vue-router vue-resource --save谎柄。

創(chuàng)建完成的“exprice”目錄如下：

exprice

下面我簡(jiǎn)單的說(shuō)明下各個(gè)目錄都是干嘛的：

項(xiàng)目目錄

6.啟動(dòng)項(xiàng)目，輸入：npm run dev惯雳。服務(wù)啟動(dòng)成功后瀏覽器會(huì)默認(rèn)打開一個(gè)“歡迎頁(yè)面”朝巫，如下圖：

注意：這里是默認(rèn)服務(wù)啟動(dòng)的是本地的8080端口，所以請(qǐng)確保你的8080端口不被別的程序所占用石景。

至此簡(jiǎn)單的一個(gè)項(xiàng)目構(gòu)建完畢...