vue--輕量級(jí)js框架，對(duì)于做h5的同學(xué)來說已經(jīng)很火了，學(xué)習(xí)成本低，相信網(wǎng)上有好多文章或者博客來描述使用方式和技巧，在這主要介紹從小白入手到精通的實(shí)戰(zhàn)過程。對(duì)于一個(gè)做Java開發(fā)的程序媛，大部分java web都是用tomcat容器啟動(dòng)，那樣前端有什么變動(dòng)想要生效必須restart resource一下，太影響開發(fā)了，那么我們用vue框架，npm啟動(dòng)前端，只要保存就會(huì)生效，這樣開發(fā)效率會(huì)大大提高。我學(xué)習(xí)任何東西的過程基本是基礎(chǔ)大概過一遍，然后上手實(shí)戰(zhàn)，在實(shí)戰(zhàn)過程中體會(huì)各種坑，填坑的過程就是不斷學(xué)習(xí)的過程，哈哈，那就開始吧！

1、搭建環(huán)境

我的環(huán)境：win7 64bit? 開發(fā)工具：idea16?

（1）安裝node.js?

https://nodejs.org/zh-cn/download/ ?默認(rèn)安裝C:\Program Files\nodejs因?yàn)榘惭b時(shí)已經(jīng)自動(dòng)配置了環(huán)境變量，所以我們cmd輸入node,即可進(jìn)入node.js交互模式

圖1 檢驗(yàn)node安裝

（2）安裝npm

找到自己項(xiàng)目的目錄打開git bash：npm install（安裝比較慢），然后編譯，可以設(shè)置本地開發(fā)環(huán)境dev和生產(chǎn)上線環(huán)境build，那么我們本地編譯就是：npm run dev

圖2 npm編譯啟動(dòng)

2、搭建項(xiàng)目

環(huán)境搭建完了，那看下項(xiàng)目結(jié)構(gòu)吧。。。。。

圖3 項(xiàng)目結(jié)構(gòu)

（1）?vue是單頁(yè)面應(yīng)用，當(dāng)npm run dev后出現(xiàn)的就是該應(yīng)用的index.html，其他的頁(yè)面都是該頁(yè)面路由過去的，下面是npm編譯環(huán)境需要的配置。

圖4 vue編譯環(huán)境

（2）app.vue，是總組件，main.js中import app from '.app'，頁(yè)面顯示app.vue中的內(nèi)容。

（3）下面是要開始寫頁(yè)面代碼了，主要在src中的view里面

圖5 src代碼結(jié)構(gòu)

（3）頁(yè)面編碼

vue的頁(yè)面有自己的生命周期

圖6 vue生命周期

首先created，mounted是在頁(yè)面初始化的時(shí)候調(diào)用的，根據(jù)踩坑經(jīng)驗(yàn)來說，調(diào)接口異步返回?cái)?shù)據(jù)填充頁(yè)面，最好將接口調(diào)用放到mounted里面；updated是頁(yè)面初始化完后，頁(yè)面數(shù)據(jù)有修改時(shí)都會(huì)調(diào)用，可以在此周期中加些判斷條件以達(dá)到頁(yè)面需要校驗(yàn)的效果；beforeDestroy是頁(yè)面元素銷毀，可以將不需要緩存的元素放在里面。

watch：是作為頁(yè)面綁定元素的監(jiān)聽事件，實(shí)時(shí)監(jiān)聽，作為校驗(yàn)。

computed：vue中實(shí)時(shí)計(jì)算, 檢測(cè)到數(shù)據(jù)發(fā)生變動(dòng)時(shí)就會(huì)執(zhí)行對(duì)相應(yīng)數(shù)據(jù)有引用的函數(shù)。

methods:是包裝js方法。

好了。。今天就先寫到這，主要是vue入門，搭建環(huán)境，工程，以及簡(jiǎn)單使用。下篇會(huì)寫一些深入了解、使用，不斷踩坑、填坑的歷程。