⑴ Vue.js里使用axios Vue.prototype.$axios = Axios是什麼意思啊 沒有系統學vue麻煩指點一下
給Vue函數添加一個原型屬性$axios 指向Axios
這樣做的好處是在vue實例或組件中不用再去重復引用Axios 直接用this.$axios就能執行axios 方法了
⑵ 2020年11大頂級VueJS開發工具
Vue JS 最近變得越來越流行,主要是因為它在學習和開發應用程序方面都提供了很多便利。選擇正確的工具非常重要,這能幫助你快速構建出色的應用,而無需重新發明輪子。
在為這個列表挑選工具時,我們考慮了整個 Vue JS 的開發周期。從為你的新應用程序設置樣板開始,我們涵蓋了重要應用程序概念、調試甚至測試內容。
1. Vue CLI
Vue CLI 工具使你可以快速創建項目結構並部署樣板。它還允許你創建實時原型來演示新功能。除了常見的功能外,Vue CLI 還提供了許多額外內容,比如對一眾 Web 開發工具的支持,包括 TypeScript、Babel、PostCSS、ESLint、單元測試、PWA 和端到端測試等。它與社區創建的可擴展第三方插件相兼容。
Vue CLI 的另一個好處是它不需要彈出。換句話說,Vue CLI 與其他框架相比有更大的自定義空間。Vue CLI 的圖形用戶界面是其最重要的特性之一,可讓你方便地創建新項目並管理它們。
2. Nuxt JS
Nuxt 有一個模塊化架構,並擁有 50 多個模塊,可以加快你的開發流程。這些模塊支持的任務類型眾多,例如引入 PWA、添加 Google Analytics 或生成站點地圖等。它通過自己的包分析器實現了 Vue JS 和 Node.JS 的最佳實踐,提供了開箱即用的性能調優。
3. Bit for Vue
Bit 是為團隊構建下一代 Vue 組件庫的好方法。它解決了跨存儲庫共享和協作處理 UI 組件的問題。你可以將 UI 與共享組件(獨立開發、版本控制和更新)組合在一起。在 bit.dev 平台中託管和組織組件,從任何新項目中搜索、渲染、安裝甚至更新任意組件。平台提供了許多開箱可用的功能,包括自動組件文檔、渲染沙箱等。
4. Vue-router
Vue-router 在路由器概念上做得很好,支持基於組件的路由器配置。它還支持路由器參數、查詢和通配符,以支持復雜的路由。與其他框架相比,它提供的了過渡效果等特性,使更改路由的過程對用戶更加友好;它還提供了帶有活動 CSS 類的鏈接,從而帶來了更多可能性。
5. Vuex
Vuex 集中了所有狀態管理函數,並僅允許狀態以可預測的方式突變,從而更好地解決狀態管理問題。它允許基於狀態、視圖和動作進行突變。狀態定義有關應用程序的事實;視圖向用戶顯示這些事實,而動作會導致狀態更改,從而重新啟動突變周期。Vuex 還提供了諸如零配置時間旅行調試和狀態快照導出 / 導入等功能。
6. Axios
Axios 是一個流行的第三方庫,用於創建和管理 ajax 請求。Vue 使用 Axios 作為其首選的 ajax 庫。盡管 Axios 不是官方 Vue 存儲庫的一部分,但它具有通用性、支持取消功能並具有 TypeScript 定義。使用 Axios 時要注意的一點是,如果你的伺服器本身不支持 Promise,則需要自己提供一個 polyfill。
7. Vuetify
Vuetify 是一個精美的手工挑選的 UI 組件庫,能讓你的應用程序獲得優美的 Vue 體驗。它提供了 80 多個基於 Material Design 規范的組件,並通過其 Vue CLI 插件提供了現成的項目骨架。SSR 支持也是內置的。這些組件包括警報、Banner、Badge、按鈕、表單輸入和控制項,還有進度小部件等。
8. Vue Apollo
Vue Apollo 是將 GraphQL 用於 Vue 的最便捷方法之一。它能夠以一種真正的聲明方式來使用 GraphQL。Apollo 的核心是為後端應用程序提供一個 Schema 語言,同時為前端提供一個查詢語言,以便進行數據交換。它還支持 SSR,這樣你就可以在服務端渲染 HTML 了。
9. Mocha
Mocha 是一個強大的測試框架,適用於所有當前和過去的 Vue 版本。它既可以通過 Node.JS 在後端運行,也可以在前端運行,這使得非同步測試既方便又有意義。Mocha 還提供了將未捕獲的異常映射到 GitHub 上相關測試用例的能力,這樣就更容易跟蹤和解決它們了。
10. Vue.js DevTools
Vue.js DevTools 是調試 Vue 應用程序的關鍵工具,提供了適用於 Firefox 和 Chrome 的插件,還有適用於任何環境的一個獨立的 Electron 應用。瀏覽器插件將「Vue」選項卡添加到其原生開發工具實現中,從而使調試體驗變得更加流暢,對用戶更友好。
11. 官方 Vue.js 指南
官方 Vue.js 指南適用於所有當前和過去的 Vue 版本,因此無論你是剛開始入門,還是希望改進或擴展基於舊版本 Vue 的已有應用程序,都可以從本指南中獲益良多。你還可以通過版本歷史輕松對比組件的更改方式。此外,指南還內置了視頻、代碼段和互動式應用程序,以使其更具交互性且更易理解。指南的最後一部分提供了與其他框架(例如 React 和 Angular)的詳細對比。
總結,這些工具可以讓你的 Vue 開發流程效率更高。我們希望本文能勾起你學習 Vue 的興趣,或者如果你已經熟悉 Vue 了,也可以嘗試其中一些工具。無論你是剛剛入門還是經驗豐富的開發人員,這些工具都可以幫助你。
⑶ vue.js 怎麼引入axios
首先在 main.js 中引入 axios
?
1
import axios from 'axios'
這時候如果在其它的組件中,是無法使用 axios 命令的。但如果將 axios 改寫為 Vue 的原型屬性,就能解決這個問題
Vue.prototype.$ajax = axios
在 main.js 中添加了這兩行代碼之後,就能直接在組件的 methods 中使用 $ajax 命令
methods: { submitForm () { this.$ajax({ method: 'post', url: '/user', data: { name: 'wise', info: 'wrong' } })}