最近Vue.js的熱度持續(xù)上升，甚至有標(biāo)題說2017再不會Vue.js就out了少办。而作為一個(gè)不排斥前段的后端碼農(nóng)來說苞慢，當(dāng)然也要跟得上時(shí)代。近來準(zhǔn)備放下手中的DOM操作凡泣，來一次Vue.js從入門到放棄⊥魈郏現(xiàn)將環(huán)境搭建過程記錄下來皮假。
環(huán)境準(zhǔn)備
- Node.js Javascript的運(yùn)行時(shí)環(huán)境
- npm Node.js下的包管理工具
- webpack 前端資源模塊化管理和打包工具
- vue-cli 腳手架構(gòu)建工具
- cnpm npm的淘寶鏡像
如果你像我一樣是個(gè)后端開發(fā)者鞋拟，并且對以上的工具還處在一臉懵逼的狀態(tài)下。那么可以先看一下這篇文章萌新也能懂的現(xiàn)代 JavaScript 開發(fā)惹资。了解一下現(xiàn)代 JavaScript的演變過程贺纲。
Vue.js安裝
1. Node.js的安裝非常容易，首先從官網(wǎng)下載你所需操作系統(tǒng)的版本褪测，然后一直下一步就ok猴誊，這里貼個(gè)菜鳥教程的傳送門。
安裝完成之后侮措，在命令行敲出node -v懈叹，如果出現(xiàn)對應(yīng)版本號，則表示安裝成功分扎。
2. npm是隨同Node.js一起安裝的包管理工具,直接在命令行敲出
npm -v就可以查看是否安裝成功澄成。
npm包管理器雖然有了，但是由于npm下載需要依賴包的服務(wù)器地址在國外畏吓，導(dǎo)致很多資源訪問會很慢墨状。所以我們可以安裝淘寶的國內(nèi)鏡像。
3. 在命令行敲出
npm install -g cnpm --registry=http://registry.npm.taobao.org菲饼。這樣就可以使用 cnpm 命令來安裝模塊了：
cnpm install [name]
4. 安裝webpack
cnpm install webpack -g
5. 安裝vue腳手架
npm install vue-cli -g
初始化一個(gè)Vue.js環(huán)境
在電腦上新建一個(gè)文件夾用來存放我們的代碼肾砂。然后使用命令行進(jìn)入這個(gè)文件夾cd 目錄路徑。
之后使用命令
vue init webpack name
來初始化一個(gè)vue環(huán)境宏悦，這個(gè)命令的意思是初始化一個(gè)項(xiàng)目镐确，其中webpack是構(gòu)建工具，也就是整個(gè)項(xiàng)目是基于webpack的饼煞。在安裝過程會有一些初始化的設(shè)置源葫，我們可以采用默認(rèn)配置，一路回車 派哲。
從上圖的我們還可以看到vue很貼心的告訴了我們快速開始(To get started)的命令
安裝項(xiàng)目依賴
一定要從官方倉庫安裝臼氨，npm 服務(wù)器在國外所以這一步安裝速度會很慢。
npm install
不要從國內(nèi)鏡像cnpm安裝(會導(dǎo)致后面缺了很多依賴庫)
cnpm install
安裝 vue 路由模塊vue-router和網(wǎng)絡(luò)請求模塊vue-resource
cnpm install vue-router vue-resource --save
啟動項(xiàng)目
npm run dev
運(yùn)行成功以后他會告訴你ip和端口號
訪問這個(gè)地址
如果出現(xiàn)上圖芭届。恭喜你储矩，已經(jīng)可以開始Vue.js之旅了感耙。
本文作者： catalinaLi
本文鏈接： http://catalinali.top/2017/installVue/
版權(quán)聲明： 原創(chuàng)文章，有問題請?jiān)u論中留言持隧。非商業(yè)轉(zhuǎn)載請注明作者及出處即硼。
