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

 

什麼是 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

 

環境安裝

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

 

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