1. 程式人生 > >vue-cli 引入axios

vue-cli 引入axios

一、npm 安裝axios,檔案根目錄下安裝,指令如下

 npm install axios --save-dev

二、修改原型鏈,在main.js中引入axios

import axios from 'axios'

接著將axios改寫為Vue的原型屬性,

Vue.prototype.$http=axios

這樣之後就可在每個元件的methods中呼叫$http命令完成資料請求

三、在元件中使用

methods: {
      get(){
        this.$http({
          method:'get',
          url:'/url',
          data:{}
        }).then(function(res){
          console.log(res)
        }).catch(function(err){
          console.log(err)
        })
        
        this.$http.get('/url').then(function(res){
          console.log(res)
        }).catch(function(err){
          console.log(err)
        })
      }     
}              
有關axios的配置請參考如下文件,點選開啟連結


相關推薦

vue-cli 引入axios

一、npm 安裝axios,檔案根目錄下安裝,指令如下 npm install axios --save-dev二、修改原型鏈,在main.js中引入axiosimport axios from 'axios'接著將axios改寫為Vue的原型屬性,Vue.prototype

vue-cli引入jquery方法

ase req mod span vue-cli 引入 import ons new 方法一: 一,在package.json裏加入, dependencies:{ ”jquery“:”^2.3.4“ } 二,在webpack.base.conf.js裏加入

vue-cli引入flexible

一、安裝lib-flexible npm i lib-flexible --save 二、在專案入口檔案main.js中引入lib-flexible import 'lib-flexible/flexible.js' 三、在專案根目錄的index.html頭部加入移動端適配的me

vue-cli配置axios,並基於axios進行後臺請求函式封裝

文章https://www.cnblogs.com/XHappyness/p/7677153.html已經對axios配置進行了說明,後臺請求時可直接this.$axios直接進行。這裡的缺點是後端請求會散亂在各個元件中,導致複用和維護艱難。 升級:將請求封裝在一個檔案中並加上型別宣告 步驟: &nbs

vue-cli 引入jq bootstrap

vue-cli腳手架快速構建專案 -------默認了有已經安裝了node-------   生成專案步驟: 一: npm install vue -g          //安裝vue 二: npm install v

###基於`vue-cli`對`axios`的封裝及使用

1 引入axios檔案 import axios from 'axios'; 2.建立axios的例項物件 const request = axios.create({ baseURl: process.env.BASE_API,

vue-cli 引入 element u

vue配套ui框架 element ui(餓了麼開源專案) 進入專案先安裝element ui npm i element-ui -S 也可以直接引入檔案 <!-- 引入樣式 -->

vue-cli引入element-ui報錯

1.main.js按需引入引入element-ui import { Button } from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(Button) 2.首先,安裝 babe

vue-cli引入mui的步驟

不用npm安裝了 1.mui官方GitHub下載mui所需檔案 https://github.com/dcloudio/mui 把下載來的dist資料夾整個複製到static資料夾中   2.在index.html引入css和js   3.找到webpack.base.con

vue-cli 引入第三放外掛

vue-cli 引入模組jq 是可以的,在引入外掛所需的js就有問題了;Vue專案中引入外部檔案(js)列子中js採用的jquery ,mui.min.js(本地);在專案環境搭建完成,可以啟動靜態頁面的基礎上步驟一:安裝js 依賴npm install jquery --s

vue-cli 引入百度地圖

1:金鑰(ak)地址 http://lbsyun.baidu.com/index.php?title=jspopular 2:在webpack.base.conf.js檔案內新增external選項,在module.exports內部,和entry平級;

vue-cli引入第三方外掛

在用vue-cli我們引入js的時候一般都import語法,但是有時候我想要引入第三方外掛,比如說,我們把一個js檔案下載下來了,然後放在src/assets/js下,然後我們用import引入,這樣明顯是會出錯的,因為下載的JS檔案根本就沒有用export語法

Vue cli 引入第三方JS和CSS的常用方法

如果要引入第三方JS或者css  最好是把檔案放在statis資料夾下,此處是靜態檔案存放的位置 第一種方法: 直接在index.html中引入 js <script type="

vue-cli 構建專案,vue-cli請求後臺介面,vue-cli使用axios、sass、swiper

1.vue-cli 構建專案 //全域性安裝 vue-cli npm install - g vue- cli //建立一個基於 webpack 模板的新專案 vue init webpac

Vue-cli使用axios從跨域伺服器獲取JSON資料

首先要在按裝axios的依賴:在npm命令列輸入: npm install axios --save 在main.js引入axios,並在Vue的原型鏈上新增axios: 跟著,在需要獲取資料的元

Vue-cli開發筆記三----------引入外部插件

scrip onf vue center logs aid text cli exp (一)絕對路徑直接引入: (1)主入口頁面index.html中頭部script標簽引入: 1 <script type="text/javascript" src="http:/

Vue-cli項目中引入Bootstrap

版本 下載 class pre 官網下載 css 依賴 font port (1)到bootstrap官網下載所需版本的bootstrap.zip文件。 (2)將bootstrap.min.css以及bootstrap.min.js解壓到assets文件夾,另外還需要將fo

vue-cli引入jquery方法

import gin targe vid brush ebp blog base tar 這裏有個詳解,當然,僅僅是安裝jq的話下面這個辦法就夠了。傳送門 在webpack.base.conf.js裏加入 var webpack = require("webpack")

vue-cli favicon 怎麽引入

技術 vue .cn eight link nbsp height 技術分享 vue-cli 把你的 favicon 圖標放到 static 目錄下,然後修改 link 標簽指向 static 目錄下的 favicon 圖標文件即可 vue-cli favicon 怎麽

vue-cli如何引入bootstrap工具

mage sset save clas 指令 nod pack import height 以下操作以正常安裝node環境為前提。 1.引入jq:   在npm控制臺中,進入項目目錄,然後輸入指令npm install jquery --save-dev(npm換成cnpm