<meta charset="utf-8">
npm: Nodejs下的包管理器（node package manager）。也可以用yarn。
webpack: 它主要的用途是通過CommonJS的語法把所有瀏覽器端需要發(fā)布的靜態(tài)資源做相應(yīng)的準(zhǔn)備，比如資源的合并和打包。
vue-cli: 用戶生成Vue工程模板。（幫你快速開始一個vue的項目，也就是給你一套vue的結(jié)構(gòu)，包含基礎(chǔ)的依賴庫，只需要 npm install就可以安裝）
環(huán)境搭建
1.node
2.npm（node自帶）
3.cnpm
4.vue-cli
5.wabpack npm install webpack webpack-cli -g
6.devtools
VUE的三種引入方式
1.下載vue.js，本地src絕對路徑
2.CDN的方式，在線引用，src="https://cdn.boots.com/vue/2.5"
3.vue-cli腳手架的方式。
計算屬性與偵聽器
computed與watch
computed是監(jiān)聽一個變量的變化，例子里是監(jiān)聽msg變量，參數(shù)是新值和舊值。
watch是監(jiān)聽fuction函數(shù)中的所有變量的變化，前提是這些變量都包含在VUE示例里面。
v-if、v-else-if、v-else
v-for
v-show
新建VUE工程有兩種方法，$ vue create hello-word 和vue-ui ui界面可視化
引入的時候，@符號代表src目錄。加上后綴，組成絕對路徑。
組件化：思想
什么是組件化？
獨立的、可復(fù)用的、整體化的
為什么要組件化？
實現(xiàn)功能模塊的復(fù)用
高執(zhí)行效率
開發(fā)單頁面復(fù)雜應(yīng)用，做拆分
如何拆分？
300行原則
復(fù)用原則
業(yè)務(wù)復(fù)雜性原則
組件化帶來的問題：
組件狀態(tài)管理（vuex）
多組件的混合使用，多頁面，復(fù)雜業(yè)務(wù)（vue-router）
組件間的傳參、消息、事件管理（props，emit/on，bus）
組件就是指單文件vue文件，this指的是組件本身。
Vue開發(fā)調(diào)試：
1.Vue的Chrome插件
2.console.log(),aler()（阻塞），debugger
3.vm實例，window對象綁定。
Vue-router
VueX
vuex的使用可以分為不同程度，如果單純的想使用全局對象，又要用vuex，那只使用簡單的store模式即可。
① 那vuex和全局對象有什么不同
1.vuex狀態(tài)是響應(yīng)式的。store中的數(shù)據(jù)發(fā)生變化，相應(yīng)的組件會得到高效的更新。
2.全局變量可以隨時改變其值，通過store.state.count的方式，vuex則不可以，改變store中狀態(tài)的唯一途徑就是顯示地提交（commit）mutations（為什么這么做？:這個簡單的約定，使代碼可讀性增強，且給vue帶來的一個可以記錄狀態(tài)變化的入口，或者說是媒介）。
通過{{}}模板是無法直接使用store對象的。
在vue根實例注冊store選項，vue會將store實例注入到根組件下的所有子組件中，這樣子組件都可以以通過this.$store訪問到。
②如果store的屬性需要運算，使用getters（防止大量引用store時，計算邏輯代碼的重復(fù)）
簡單理解getters和計算屬性computed選項基本一致。
const store = new Vuex.Store({ state: { date: new Date() }, getters: { // Getter 接受 state 作為其第一個參數(shù) weekDate: (state) => (fm) => { return moment(state.date).format(fm ? fm : 'dddd'); } } })
可以通過getters選項，對store的state屬性進(jìn)行運算，方式為在getters中添加function，可以傳入的參數(shù)包括：state屬性、其它參數(shù)。
使用的時候，通過store.getters.weekDate('MM Do YY')即可。
③那么如何修改store中的state屬性呢（只有mutation能動state）
const store = new Vuex.Store({ state: { count: 1 }, mutations: { // 事件類型 type 為 increment increment (state num) { // 變更狀態(tài) state.count = num } } })
通過mutations選項，構(gòu)建function修改state屬性。可以自定義參數(shù)
調(diào)用時必須使用commit關(guān)鍵字。store.commit('increment',100)
mutations中的這個額外的參數(shù)，官方稱為載荷（payload），提交載荷。
對于修改state屬性的mutations方法名稱，如果是大項目，最好通過引入常量的方式，使用方式和axios中引用url一樣。
另外，mutations的function必須是同步函數(shù)，如果是異步，就沒法偵聽數(shù)據(jù)的變化了。
④那如果mutatios的函數(shù)必須是異步怎么辦呢
就要用到action選項，mutations通過commit調(diào)用，action通過dispatch調(diào)用。
使用action最大的好處就是在action中定義異步函數(shù)，然后通過commit觸發(fā)mutations函數(shù)，這樣的話所有的狀態(tài)變更都能追蹤的到，無論是同步變更的還是異步變更。
⑤vuex的常用的輔助函數(shù)（極簡的方式寫vuex代碼--語法糖）
四個常用輔助函數(shù)：mapState、mapGetters、mapMutations、mapActions
分別于vuex四家馬車state（狀態(tài)）、getters（狀態(tài)值運算）、mutations（同步函數(shù)改變狀態(tài)值）、actions（異步函數(shù)改變狀態(tài)值）
目的就是簡化四個選項代碼復(fù)雜度。
⑥Vuex的管理員Module（大型項目使用）
分支管理，類似router一樣的效果。
由于四架馬車都是全局命名，所以局部管理略微復(fù)雜。
