說明：

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

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

本文是一系列文章，在我對Vue有了更深刻的理解認識之后會對文章及時進行修改或更正。歡迎大家批評指出錯誤。

今天要講講Vue2.0了。最近將公司App3.0用vue2.0構(gòu)建了一個web版，因為是第一次使用vue，而且一開始使用的時候2.0出來一個月不到，很多坑都是自己去踩的，現(xiàn)在項目要上線了，所以記錄一些過程。
（這是首頁目前的效果圖）

項目搭建具體步驟如下：

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

安裝模塊時安裝方法

$ cnpm install [name]

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

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

（英）https://vuejs.org/

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

4.安裝Vue2.0

$ cnpm install vue

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

$ cnpm install --global vue-cli

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

$ vue init webpack my-project
//my-project是你的項目名

7.安裝依賴

$ cd my-project  //到項目目錄下
$ cnpm install  //安裝依賴

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

$ npm run dev

運行之后會看到vue的初始頁面效果，如下圖，說明你就成功搭建了一個vue項目。（下面框出來的是官方提供的插件和awesome，很實用）

注意事項：

1.安裝Git(可選)

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

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

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

2.不應(yīng)用ESLint

創(chuàng)建webpack模板項目時，如果你對ES6和ESLint不是很熟的話我個人不建議你應(yīng)用它，因為要求比較嚴格，所以一不小心就報錯，導(dǎo)致整個項目運行不起來，對于初學(xué)很痛苦。

總結(jié)

今天主要分享了一下從無到有創(chuàng)建一個vue項目，接下來我會通過自己的實際項目操作過程，分享我們是如何完成的。

最新評論