說明:
我們項目現在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3
如果大家在實踐的過程中與本文所說的內容有較大區別的話看看是不是版本問題。
本文是一系列文章,在我對Vue有了更深刻的理解認識之后會對文章及時進行修改或更正。歡迎大家批評指出錯誤。
今天要講講Vue2.0了。最近將公司App3.0用vue2.0構建了一個web版,因為是第一次使用vue,而且一開始使用的時候2.0出來一個月不到,很多坑都是自己去踩的,現在項目要上線了,所以記錄一些過程。
(這是首頁目前的效果圖)
項目搭建具體步驟如下:
1.安裝node
到官網下載安裝,我這里是win7系統。
2.安裝cnpm鏡像
(node自帶安裝了npm,故不再安裝)
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝模塊時安裝方法
$ cnpm install [name]
3.快速學習Vue2.0教程
你要是覺得這些網站訪問速度都比較慢的話可以移步國內開發者自己翻譯的網站:https://vuefe.cn/
4.安裝Vue2.0
$ cnpm install vue
5.安裝vue-cli 腳手架工具
$ cnpm install --global vue-cli
6.在某個目錄下,創建一個基于 webpack 模板的新項目
$ vue init webpack my-project//my-project是你的項目名
7.安裝依賴
$ cd my-project //到項目目錄下$ cnpm install //安裝依賴
8.運行新創建的vue項目
$ npm run dev
運行之后會看到vue的初始頁面效果,如下圖,說明你就成功搭建了一個vue項目。(下面框出來的是官方提供的插件和awesome,很實用)
注意事項:
1.安裝Git(可選)
如果你熟悉或者想要學習了解Git,可以在安裝node之前先安裝Git,使用Git Bash代替windows的cmd命令面板。如果你用windows的cmd命令行工具,則以上安裝命令前的“$”省略。
Git官網:https://git-scm.com/
Git國內教程推薦:http://t.cn/zQ6LFwE
2.不應用ESLint
創建webpack模板項目時,如果你對ES6和ESLint不是很熟的話我個人不建議你應用它,因為要求比較嚴格,所以一不小心就報錯,導致整個項目運行不起來,對于初學很痛苦。
總結
今天主要分享了一下從無到有創建一個vue項目,接下來我會通過自己的實際項目操作過程,分享我們是如何完成的。
新聞熱點
疑難解答