Vue2.0 新手入門 — 從環境搭建到發布

 

什么是 Vue

Vue 是一個前端框架，特點是
數據綁定

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

 

組件化

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

 

Vue2.0 推薦開發環境

 

 Homebrew 1.0.6(Mac)、Node.js 6.7.0、npm 3.10.3、webpack 1.13.2、vue-cli 2.4.0、Atom 1.10.2

 

環境安裝

Mac OS系統安裝 brew

打開終端運行以下命令:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

 

Mac OS系統安裝 nodejs

（1） 官網下載安裝包安裝

（2）執行命令安裝

brew install nodejs

獲取nodejs模塊安裝目錄訪問權限

sudo chmod -R 777 /usr/local/lib/node_modules/

 

安裝淘寶鏡像

大家都知道國內直接使用 npm 的官方鏡像是非常慢的，這里推薦使用淘寶 NPM 鏡像。

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

這樣就可以使用 cnpm 命令來安裝模塊了：

 

cnpm install [name]

安裝webpack

cnpm install webpack -g

安裝vue腳手架

npm install vue-cli -g

 

在硬盤上找一個文件夾放工程用的，在終端中進入該目錄

cd 目錄路徑

根據模板創建項目

 

 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

 

安裝 vue 路由模塊vue-router和網絡請求模塊vue-resource

cnpm install vue-router vue-resource --save

 

啟動項目

npm run dev

 

終於可以啟動項目了

輸入完命令會自動啟動瀏覽器，

npm run dev

 

自動啟動瀏覽器就會看到這個界面了。