vue.js 2.0簡介
vue.js2.0 是目前很先進(jìn),也很流行的MVVM前端開發(fā)框架,設(shè)計靈感來源于angularjs,經(jīng)過完善簡化,和優(yōu)化之后一個相當(dāng)輕巧功能強大的框架。最近淘寶先給Apache組織的weex，相當(dāng)于一個vue-native框架，更多詳細(xì)介紹去看 vue.js的官網(wǎng)吧。
準(zhǔn)備工作
現(xiàn)在的前端開已經(jīng)完全的工程化了，自動化了，有非常完善的項目構(gòu)建工具，幾行命令，分分鐘創(chuàng)建一項目，包括項目文件，開發(fā)依賴，http服務(wù)器，"編譯器",打包工具，應(yīng)有盡有，當(dāng)然這都?xì)w功于nodeJs。
簡單的說 Node.js 就是運行在服務(wù)端的 JavaScript。Node.js 是一個基于Chrome JavaScript 運行時建立的一個平臺。Node.js是一個事件驅(qū)動I/O服務(wù)端JavaScript環(huán)境，基于Google的V8引擎，V8引擎執(zhí)行Javascript的速度非?？?，性能非常好，在我看來，在web開發(fā)領(lǐng)域大有取代php可能性。
NPM是隨同NodeJS一起安裝的包管理工具，類似linux RPM，可以下載第三方包到本地使用，安裝第三方命令行cli，上傳自己的 第三方包和cli，是開發(fā)過程成中最常用的命令，這里vue-cli我們初始化項目用的命令行，由于網(wǎng)絡(luò)問題國外的鏡像是在太卡，要改成淘寶的鏡像：
npm config set registry https://registry.npm.taobao.org// 配置后可通過下面方式來驗證是否成功
npm config get registry// 或npm info express
其他必備工具 webpack
安裝：$ npm install webpack -g
暫時沒了.....準(zhǔn)備工作結(jié)束了， 對了補充一下一上操作使用git-bash（mingw）非常好用的命令行工具。
安裝vue2.0
# 全局安裝 vue-cli $ npm install --global vue-cli
# 創(chuàng)建一個基于 webpack 模板的新項目
$ vue init webpack my-project
執(zhí)行一上命令會得到看到這樣的的界面
說明一切順利。
項目初始化成功！
然后：
# 安裝依賴，走你
$ cd my-project
$ npm install $ npm run dev
不出意外的話會看到
有幾個會出錯的原因，可能是因為端口占用，比如tomcat的8080端口，你可以在配置中修改端口：./build/dev-server.js 14行
// default port where dev server listens for incoming trafficvar port =8899;
然后重新執(zhí)行 npm run dev 命令 即可。
看到這個界面說明一切就緒了，在準(zhǔn)備開發(fā)之前還是先來熟悉一下目錄文件吧下面一張截圖：
簡單了解一下即可，詳細(xì)了解就去搜索引擎去找。
開始開發(fā)了！
打開你心愛順手的編輯器，open folder->vue.2.0
然后插入點什么保存，在看看瀏覽器已經(jīng)自動刷新了,對，這就是自動化的好處。
簡單講一下代碼#app就是所謂的根組件，所有組件都應(yīng)該是他的子孫。
然后展開src看到main.js 這個基本是不需要動的，就是項目的js入口文件。
App.vue 是就是根組件，hello.vue 就是子組件，打開App.vue
一會看到一個非常清爽的組件代碼結(jié)構(gòu)。頂部 HTML模板， 中部ES6 JS 底部CSS，不能更清晰了吧，上面的ES6新標(biāo)準(zhǔn)，在網(wǎng)上可以找到很多文章教程，看一看就可以開發(fā)了。
可能在上面的js代碼灑脫的敲了兩個換行，在保存的時候可能會遭遇下面這張圖。
其實并沒有什么錯，真是代碼的縮進(jìn)和規(guī)范出了問題，目前看來這種檢測比python還是有點變態(tài)的，先把它干掉，先學(xué)習(xí)在說，打開文件./build/webpack.base.conf.js 36行
刪掉，然后 ctrl+c ，再 npm run dev 就可以了,修改一下JS代碼試試吧。
配置代理
在真正開發(fā)項目的時候,會遇到跨域的問題，我們的前段開發(fā)服務(wù)器如何與后端通訊，這個時候就要用到代理了，這個配置也非常簡單的。打開./build/dev-server.js 17行改為
var proxyTable = { '/api': { target: 'http://xxxx.com' }}
配置完這個之后，同樣要重啟http服務(wù)器，在npm run dev 你會看到
然后在瀏覽器里面訪問下 http://localhost:8899/api/user/status/get 吧。
安裝ajax模塊
axios.js 是官方推薦的，基于Promise的ajax庫，用了一下比較好用。
安裝：npm install axios
得到：√ All packages installed (xxx) 安裝成功
例子：hello.vue
<template>
<div class="hello">
<h1 @click="test()">{{ name }}</h1>
<ul>
<li v-for="item in lists"> {{ item.articleTitle }} </li>
</ul> </div>
</template>
<script>
import axios from 'axios';
export default { data () {
return { name:"vue", lists:null } },
methods:{ test(){ alert(2); },
get_list() {
var self = this;
let callback = {
success:function(data)
{ var result = data.data; if(result.statusCode == 200)
{ self.lists = result.result; } },
error:function(data) { console.log(data); } }
let apiURL = '/api/stags/articles?tags=%E6%A0%BC%E9%9A%86%E6%B1%87&limit=22&page=1'; axios.get(apiURL).then(callback.success,callback.error) } }, created(){ this.get_list(); }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>h1 { color: #42b983;}</style>
先到這里了....以后陸續(xù)補充吧。發(fā)現(xiàn)bug和錯別字順手改到吧，落掉哪一步也記得補充上哦。
