快捷導(dǎo)航

vue.js開(kāi)發(fā)環(huán)境安裝教程

更新時(shí)間：2017年03月17日 14:34:07 作者：花兒香

這篇文章主要為大家詳細(xì)介紹了vue.js開(kāi)發(fā)環(huán)境的安裝教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一、簡(jiǎn)介

Vue.js 是什么

Vue.js（讀音 /vjuː/, 類(lèi)似于 view）是一套構(gòu)建用戶(hù)界面的漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)。Vue 的核心庫(kù)只關(guān)注視圖層，并且非常容易學(xué)習(xí)，非常容易與其它庫(kù)或已有項(xiàng)目整合。另一方面，Vue 完全有能力驅(qū)動(dòng)采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)的復(fù)雜單頁(yè)應(yīng)用。

Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。

Vue.js是一個(gè)MVVM模式的框架，如果讀者有angular經(jīng)驗(yàn)，一定能夠很快入門(mén)Vue的

vue.js的特點(diǎn):

易用：已經(jīng)會(huì)了HTML,CSS,JavaScript？即刻閱讀指南即可開(kāi)始構(gòu)建應(yīng)用！

靈活：簡(jiǎn)單小巧的核心，漸進(jìn)式技術(shù)棧，足以應(yīng)付任何規(guī)模的應(yīng)用。

高效： 16kb min+gzip 的運(yùn)行大小,超快虛擬 DOM ,最省心的優(yōu)化

二、環(huán)境搭建

vue推薦開(kāi)發(fā)環(huán)境:

Node.js: javascript運(yùn)行環(huán)境(runtime),不同系統(tǒng)直接運(yùn)行各種編程語(yǔ)言

npm: Nodejs下的包管理器。由于國(guó)內(nèi)使用npm會(huì)很慢,這里推薦使用淘寶NPM鏡像（http://npm.taobao.org/）

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

webpack: 它主要的用途是通過(guò) CommonJS 的語(yǔ)法把所有瀏覽器端需要發(fā)布的靜態(tài)資源做相應(yīng)的準(zhǔn)備，比如資源的合并和打包。

vue-cli: 用戶(hù)生成Vue工程模板

三、安裝node.js

從node.js官網(wǎng)下載并安裝node，安裝過(guò)程很簡(jiǎn)單，一路“下一步”就可以了（傻瓜式安裝）。安裝完成之后，打開(kāi)命令行工具，輸入node -v，如下圖，如果出現(xiàn)相應(yīng)的版本號(hào)，則說(shuō)明安裝成功。

npm包管理器，是集成在node中的，所以，直接輸入npm -v就會(huì)如下圖所示，顯示出npm的版本信息。

oK！node環(huán)境已經(jīng)安裝完成，npm包管理器也有了。由于有些npm有些資源被屏蔽或者是國(guó)外資源的原因，經(jīng)常會(huì)導(dǎo)致用npm安裝依賴(lài)包的時(shí)候失敗，所有我還需要npm的國(guó)內(nèi)鏡像---cnpm。

安裝cnpm

在命令行中輸入npm install -g cnpm --registry=http://registry.npm.taobao.org然后等待，安裝完成如下圖。

完成之后，我們就可以用cnpm代替npm來(lái)安裝依賴(lài)包了。如果想進(jìn)一步了解cnpm的，查看淘寶npm鏡像官網(wǎng)。

安裝vue-cli腳手架構(gòu)建工具

在命令行中運(yùn)行命令npm install -g vue-cli，然后等待安裝完成。通過(guò)以上三部，我們需要準(zhǔn)備的環(huán)境和工具都準(zhǔn)備好了，接下來(lái)就開(kāi)始使用vue-cli來(lái)構(gòu)建項(xiàng)目。

用vue-cli構(gòu)建項(xiàng)目

要?jiǎng)?chuàng)建項(xiàng)目，首先我們要選定目錄，然后再命令行中把目錄轉(zhuǎn)到選定的目錄。在這里，我選擇桌面來(lái)存放新建的項(xiàng)目，則我們需要先把目錄cd到桌面，如下圖。

在桌面目錄下，在命令行中運(yùn)行命令vue init webpack firstVue。解釋一下這個(gè)命令，這個(gè)命令的意思是初始化一個(gè)項(xiàng)目，其中webpack是構(gòu)建工具，也就是整個(gè)項(xiàng)目是基于webpack的。其中firstVue是整個(gè)項(xiàng)目文件夾的名稱(chēng)，這個(gè)文件夾會(huì)自動(dòng)生成在你指定的目錄中（我的實(shí)例中，會(huì)在桌面生成該文件夾），如下圖。