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

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

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

一、簡介

Vue.js 是什么

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

Vue.js 的目標是通過盡可能簡單的 API 實現(xiàn)響應的數(shù)據(jù)綁定和組合的視圖組件。

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

vue.js的特點:

易用：已經(jīng)會了HTML,CSS,JavaScript？即刻閱讀指南即可開始構建應用！

靈活：簡單小巧的核心，漸進式技術棧，足以應付任何規(guī)模的應用。

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

二、環(huán)境搭建

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

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

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

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

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

vue-cli: 用戶生成Vue工程模板

三、安裝node.js

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

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

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

安裝cnpm

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

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

安裝vue-cli腳手架構建工具

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

用vue-cli構建項目

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

在桌面目錄下，在命令行中運行命令vue init webpack firstVue。解釋一下這個命令，這個命令的意思是初始化一個項目，其中webpack是構建工具，也就是整個項目是基于webpack的。其中firstVue是整個項目文件夾的名稱，這個文件夾會自動生成在你指定的目錄中（我的實例中，會在桌面生成該文件夾），如下圖。