vue--輕量級js框架塌衰，對于做h5的同學來說已經(jīng)很火了诉稍，學習成本低，相信網(wǎng)上有好多文章或者博客來描述使用方式和技巧最疆，在這主要介紹從小白入手到精通的實戰(zhàn)過程杯巨。對于一個做Java開發(fā)的程序媛，大部分java web都是用tomcat容器啟動努酸，那樣前端有什么變動想要生效必須restart resource一下服爷，太影響開發(fā)了，那么我們用vue框架，npm啟動前端仍源，只要保存就會生效心褐，這樣開發(fā)效率會大大提高。我學習任何東西的過程基本是基礎大概過一遍笼踩，然后上手實戰(zhàn)檬寂，在實戰(zhàn)過程中體會各種坑，填坑的過程就是不斷學習的過程戳表，哈哈桶至，那就開始吧！
1匾旭、搭建環(huán)境
我的環(huán)境：win7 64bit? 開發(fā)工具：idea16?
（1）安裝node.js?
https://nodejs.org/zh-cn/download/ ?默認安裝C:\Program Files\nodejs因為安裝時已經(jīng)自動配置了環(huán)境變量镣屹，所以我們cmd輸入node,即可進入node.js交互模式
圖1 檢驗node安裝
（2）安裝npm
找到自己項目的目錄打開git bash：npm install（安裝比較慢），然后編譯价涝，可以設置本地開發(fā)環(huán)境dev和生產(chǎn)上線環(huán)境build女蜈，那么我們本地編譯就是：npm run dev
圖2 npm編譯啟動
2、搭建項目
環(huán)境搭建完了色瘩，那看下項目結構吧硝烂。币厕。峡眶。感混。。
圖3 項目結構
（1）?vue是單頁面應用泥栖，當npm run dev后出現(xiàn)的就是該應用的index.html簇宽，其他的頁面都是該頁面路由過去的，下面是npm編譯環(huán)境需要的配置吧享。
圖4 vue編譯環(huán)境
（2）app.vue魏割，是總組件，main.js中import app from '.app'钢颂，頁面顯示app.vue中的內(nèi)容钞它。
（3）下面是要開始寫頁面代碼了，主要在src中的view里面
圖5 src代碼結構
（3）頁面編碼
vue的頁面有自己的生命周期
圖6 vue生命周期
首先created殊鞭，mounted是在頁面初始化的時候調(diào)用的遭垛，根據(jù)踩坑經(jīng)驗來說，調(diào)接口異步返回數(shù)據(jù)填充頁面钱豁，最好將接口調(diào)用放到mounted里面耻卡；updated是頁面初始化完后疯汁，頁面數(shù)據(jù)有修改時都會調(diào)用牲尺，可以在此周期中加些判斷條件以達到頁面需要校驗的效果；beforeDestroy是頁面元素銷毀，可以將不需要緩存的元素放在里面谤碳。
watch：是作為頁面綁定元素的監(jiān)聽事件溃卡，實時監(jiān)聽，作為校驗蜒简。
computed：vue中實時計算, 檢測到數(shù)據(jù)發(fā)生變動時就會執(zhí)行對相應數(shù)據(jù)有引用的函數(shù)瘸羡。
methods:是包裝js方法。
好了搓茬。犹赖。今天就先寫到這，主要是vue入門卷仑，搭建環(huán)境峻村，工程，以及簡單使用锡凝。下篇會寫一些深入了解粘昨、使用，不斷踩坑窜锯、填坑的歷程张肾。
作者：水木軒昊昊
鏈接：http://www.reibang.com/writer#/notebooks/34350102/notes/41608375
來源：簡書
簡書著作權歸作者所有，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權并注明出處锚扎。
