介紹

Vue.js是一套構建用戶界面的漸進式框架。
Vue 只關注視圖層嫂粟，采用自底向上增量開發(fā)的設計。
Vue 的目標是通過盡可能簡單的 API 實現(xiàn)響應的數(shù)據(jù)綁定和組合的視圖組件墨缘。

閱讀之前需要了解的知識

• htnl
• css
• javascript
• node.js環(huán)境(npm包管理工具）
• webpack打包工具

安裝node.js

從node官網下載并安裝node星虹，安裝步驟很簡單，只要一路“next”就可以了镊讼。
安裝完成后宽涌，打開命令行工具輸入命令node -v，如下圖蝶棋，如果出現(xiàn)對應版本號卸亮，就說明安裝成功了。

我們所需要的npm包管理器玩裙，是集成在node中的兼贸，所以，直接輸入npm -v就會如下圖所示吃溅，顯示出npm的版本信息溶诞。

到這里node的環(huán)境已經安裝完了,npm包管理工具也有了，但是由于npm的有些資源被墻决侈，為了更快更穩(wěn)定,所以我們需要切換到淘寶的npm鏡像——cnpm螺垢。

安裝cnpm

點擊進入淘寶的cnpm網站,里面有詳細的配置方法。
或者直接在命令行輸入：

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

然后等待，安裝完成甩苛。

輸入cnpm -v蹂楣，可以查看當前cnpm版本，這個和npm的版本還是不一樣的讯蒲。

[圖片上傳失敗...(image-d3a4f6-1552455981882)]

使用cnpm的方法就是痊土，需要用到npm的地方直接使用cnpm替換就可以了

vue安裝

在用 vue.js 構建大型應用時推薦使用 npm 安裝，npm 能很好地和諸如 webpack 或 browserify 模塊打包器配合使用墨林。vue.js 也提供配套工具來開發(fā)單文件組件赁酝。

$ cnpm install vue

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

vue-cli 提供一個官方命令行工具，可用于快速搭建大型單頁應用旭等。該工具提供開箱即用的構建工具配置酌呆，帶來現(xiàn)代化的前端開發(fā)流程。只需幾分鐘即可創(chuàng)建并啟動一個帶熱重載搔耕、保存時靜態(tài)檢查以及可用于生產環(huán)境的構建配置的項目：

# 全局安裝 vue-cli
$ cnpm install --global vue-cli

創(chuàng)建一個基于 webpack 模板的新項目

要創(chuàng)建項目隙袁，首先我們要選定目錄，然后再命令行中把目錄轉到選定的目錄弃榨∑惺眨可以使用：

#my-project為自定義項目名
$ vue init webpack my-project

初始化一個項目，或使用

$ vue init webpack-simple my-project

初始化一個簡單的項目

[圖片上傳失敗...(image-fd35f0-1552455981882)]

[圖片上傳失敗...(image-16bde7-1552455981882)]

運行初始化命令的時候回讓用戶輸入幾個基本的選項鲸睛，如項目名稱娜饵，描述，作者等信息官辈，如果不想填直接回車默認就好箱舞。

需要注意的是項目的名稱不能大寫，不然會報錯拳亿。

Project name (my-project) # 項目名稱（我的項目）

Project description (A Vue.js project) # 項目描述一個Vue.js 項目

Author 作者（你的名字）

Install vue-router? (Y/n) # 是否安裝Vue路由晴股，也就是以后是spa（但頁面應用需要的模塊）

Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代碼？ （Y [ yes ] / N [ no ]）

Pick an ESLint preset (Use arrow keys) # 選擇一個預置ESLint（使用箭頭鍵）

Setup unit tests with Karma + Mocha? (Y/n) # 設置單元測Karma + Mocha风瘦？ （Y/ N）

Setup e2e tests with Nightwatch? (Y/n) # 設置端到端測試队魏，Nightwatch？ （Y/ N）

當然這些都看你自己個人的情況万搔，我這里是全選了是胡桨。

安裝項目所需要的依賴

剛初始化的項目是沒有依賴的，如果運行會報類似這樣的錯誤瞬雹，

所以在這之前需要解決項目的依賴問題昧谊，使用下面的命令安裝項目的依賴。

$ cnpm install

如果出現(xiàn)如下圖情況酗捌，說明依賴解決成功呢诬。

運行項目

$ cnpm run dev

如果看到這個界面涌哲，說明配置成功