vue-cli

是vue官方提供的快速搭建項目的工具，只是知道可以用vue-cli直接生成一個vue項目的架構(gòu)，它能幫你配置好各個loader,plugin,vue-router,vuex等等，在，省去自我配置的麻煩，而且在配置的過程中自動安裝好eslint代碼檢查和unit單元測試以及e2e端對端測試工具，十分方便。

• 安裝vue-cli，全局安裝

$ cnpm i vue-cli -g

• vue-cli 創(chuàng)建項目

$ vue init project

vue-router

其實在由vue-cli在創(chuàng)建vue項目時就可以默認(rèn)安裝vue-router,也可由npm后續(xù)安裝,在main.js引入。具體使用方法請看相關(guān)文檔vue-router，Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌。

import router from './router'
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

vuex

由vue-cli在創(chuàng)建vue項目時就可以默認(rèn)安裝vuex,：每一個 Vuex 應(yīng)用的核心就是 store（倉庫）。“store”基本上就是一個容器，它包含著你的應(yīng)用中大部分的狀態(tài) (state)。Vuex 和單純的全局對象有以下兩點不同：

• Vuex 的狀態(tài)存儲是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會相應(yīng)地得到高效更新
• 你不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用
  當(dāng)然vuex缺點也很明顯，雖然它加強類組建之間的通信，異步通信，但是卻降組件對應(yīng)用對耦合度，有時候你甚至找尋組件數(shù)據(jù)具體從哪來也是一件麻煩對事情?？?a target="_blank">vuex文檔

axios

axios為vue官方網(wǎng)絡(luò)框架，我還有寫一篇文章是如何對axios進(jìn)行攔截請求和響應(yīng)。axios封裝攔截器，具體api與隔壁react的fetch十分相似。它底層由promise實現(xiàn)。

vue UI框架

• element-ui 餓了嗎出品，十分適合后臺管理網(wǎng)站快速搭建
• mint-ui 也是由餓了嗎，適合移動手機端應(yīng)用搭建
• iview 一個組件很全的ui框架
• quasar 十分又沒，功能更齊全的手機端ui框架

ui框架市面上有很多，大部分功能差不了太多，也要看自己或公司項目的需要了。

nuxt

畢竟spa單頁面應(yīng)用缺點也是非常明顯，比如首屏加載速度慢，當(dāng)然我們可以優(yōu)化，向前看我寫過單一篇文章單頁面應(yīng)用首屏加載優(yōu)化，還有seo優(yōu)化非常差，對于某些大型網(wǎng)站單頁面面應(yīng)用也不合適，所以就有ssr服務(wù)端渲染應(yīng)用，其中nuxt就是官方推薦的框架https://zh.nuxtjs.org/。里面配置也簡單，腳手架功能齊全。