vue2.0開發環境搭建

什麼是VUE

VUE官方網址

Vue 是一個前端框架，特色是

數據綁定

好比你改變一個輸入框 Input 標籤的值，會 自動同步 更新到頁面上其餘綁定該輸入框的組件的值

組件化

頁面上小到一個按鈕均可以是一個單獨的文件.vue，這些小組件直接能夠像樂高積木同樣經過互相引用而組裝起來

Vue2.0 推薦開發環境

Homebrew 1.0.6(Mac)、Node.js 6.7.0、npm 3.10.三、webpack 1.13.二、vue-cli 2.4.0、Atom 1.10.2

安裝 nodejs

npm install nodejs 或 cnpm install nodejs

用 npm install npm@3.10.3 更新 npm 版本報錯:

(node:42) fs: re-evaluating native module sources is not supported.

解決辦法:在官網下載6.70的安裝包再安裝一次(剛剛至關於幫你配置好環境變量，如今再安裝一次升級到最新的 npm)

好像之前官網的安裝包不會自動配置環境變量的，因爲我電腦上以前安裝過 nodejs 因此環境變量已經配置好了，不知道如今的安裝包會不會自動配置環境變量。

Windows 下直接下載安裝包便可

安裝webpack

npm install webpack -g

安裝vue腳手架

npm install vue-cli -g

根據模板建立項目

vue init webpack-simple 工程名字<工程名字不能用中文>

或者建立 vue1.0 的項目

vue init webpack-simple#1.0 工程名字<工程名字不能用中文>

會有一些初始化的設置，以下輸入:

Target directory exists. Continue? (Y/n) 直接回車默認(而後會下載 vue2.0模板，這裏可能須要連代理)

Project name (vue-test) 直接回車默認

Project description (A Vue.js project) 直接回車默認

Author 寫你本身的名字

cd 命令進入建立的工程目錄

工程目錄如圖所示:

安裝項目依賴

必定要從官方倉庫安裝，npm 服務器在國外因此這一步安裝速度會很慢。

npm install

不要從國內鏡像cnpm安裝(會致使後面缺了不少依賴庫)

cnpm install

啓動項目

npm run dev