說(shuō)明：

我們項(xiàng)目現(xiàn)在用的是：vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3

如果大家在實(shí)踐的過(guò)程中與本文所說(shuō)的內(nèi)容有較大區(qū)別的話看看是不是版本問(wèn)題。

本文是一系列文章，在我對(duì)Vue有了更深刻的理解認(rèn)識(shí)之后會(huì)對(duì)文章及時(shí)進(jìn)行修改或更正。歡迎大家批評(píng)指出錯(cuò)誤。

今天要講講Vue2.0了。最近將公司App3.0用vue2.0構(gòu)建了一個(gè)web版，因?yàn)槭堑谝淮问褂胿ue，而且一開(kāi)始使用的時(shí)候2.0出來(lái)一個(gè)月不到，很多坑都是自己去踩的，現(xiàn)在項(xiàng)目要上線了，所以記錄一些過(guò)程。
（這是首頁(yè)目前的效果圖）

項(xiàng)目搭建具體步驟如下：

1.安裝node

到官網(wǎng)下載安裝，我這里是win7系統(tǒng)。

（中）https://nodejs.org/zh-cn/

（英）https://nodejs.org/en/

2.安裝cnpm鏡像

（node自帶安裝了npm，故不再安裝）

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝模塊時(shí)安裝方法

$ cnpm install [name]

3.快速學(xué)習(xí)Vue2.0教程

（中）http://cn.vuejs.org/

（英）https://vuejs.org/

你要是覺(jué)得這些網(wǎng)站訪問(wèn)速度都比較慢的話可以移步國(guó)內(nèi)開(kāi)發(fā)者自己翻譯的網(wǎng)站：https://vuefe.cn/

4.安裝Vue2.0

$ cnpm install vue

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

$ cnpm install --global vue-cli

6.在某個(gè)目錄下，創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目

$ vue init webpack my-project
//my-project是你的項(xiàng)目名

7.安裝依賴

$ cd my-project  //到項(xiàng)目目錄下
$ cnpm install  //安裝依賴

8.運(yùn)行新創(chuàng)建的vue項(xiàng)目

$ npm run dev

運(yùn)行之后會(huì)看到vue的初始頁(yè)面效果，如下圖，說(shuō)明你就成功搭建了一個(gè)vue項(xiàng)目。（下面框出來(lái)的是官方提供的插件和awesome，很實(shí)用）

注意事項(xiàng)：

1.安裝Git(可選)

如果你熟悉或者想要學(xué)習(xí)了解Git，可以在安裝node之前先安裝Git，使用Git Bash代替windows的cmd命令面板。如果你用windows的cmd命令行工具，則以上安裝命令前的“$”省略。

Git官網(wǎng)：https://git-scm.com/

Git國(guó)內(nèi)教程推薦：http://t.cn/zQ6LFwE

2.不應(yīng)用ESLint

創(chuàng)建webpack模板項(xiàng)目時(shí)，如果你對(duì)ES6和ESLint不是很熟的話我個(gè)人不建議你應(yīng)用它，因?yàn)橐蟊容^嚴(yán)格，所以一不小心就報(bào)錯(cuò)，導(dǎo)致整個(gè)項(xiàng)目運(yùn)行不起來(lái)，對(duì)于初學(xué)很痛苦。

總結(jié)

今天主要分享了一下從無(wú)到有創(chuàng)建一個(gè)vue項(xiàng)目，接下來(lái)我會(huì)通過(guò)自己的實(shí)際項(xiàng)目操作過(guò)程，分享我們是如何完成的。

最新評(píng)論