1. 安裝配置 axios 。 直接vscode安裝 cmd? npm install --save axios 2配置 main.js //引入axios模塊 import axios from 'axios' //默認(rèn)基礎(chǔ)路徑 axios.defaults.baseURL = 'http://localhost:3000' //原型添加axios Vue.prototype.axios = axios//第二中添加方式import axios from 'axios' import VueAxios from 'vue-axios'Vue.use(VueAxios, axios)****************************** 輪播圖import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper'// import style (>= Swiper 6.x) import 'swiper/swiper-bundle.css'// import style (<= Swiper 5.x) import 'swiper/css/swiper.css'Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

1.安裝腳手架軟件: npm i -g @vue/cli

2.vue create 包 ?自己起名
名固定選項(xiàng)
選手動(dòng)模式: Manually select features

3.在項(xiàng)目目錄下執(zhí)行安裝命令 moudel里按: npm i axios vue-axios
Axios官網(wǎng): http://www.axios-js.com/

4.Vue2和swiper的相關(guān)教程:
https:/ / github.com/surmon-china/vue-awesome-swiper
在項(xiàng)目目錄下執(zhí)行安裝命令:
模塊的安裝命令: npm i swiper@5.x vue-awesome-swiper

axios 請求攔截器

//引入axios import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios'axios.defaults.baseURL = 'http://xuezi.fries.host/mfresh/data/' //請求攔截器 axios.interceptors.request.use(config => {// console.log('congih', config)//必須在最后return congfigconfig.headers.Authorization = window.sessionStorage.getItem('token')return config }) Vue.use(VueAxios, axios)

methods: {getHandle() {//axios.get 發(fā)起get請求//參數(shù)一 表示請求地址//參數(shù)二 表示配置信息// params表示傳遞到服務(wù)器端的數(shù)據(jù)，以u(píng)rl參數(shù)形式拼接在請求地址后面// { page: 1, per: 3}// headers表示請求頭axios.get('uel', {params: {page: 3,per: 2},headers: {}}).then(res => console.log(res))}postHandle() {//post騎牛傳遞三個(gè)參數(shù)//請求地址//傳遞的數(shù)據(jù)，在請求體中傳遞//axios默認(rèn)發(fā)送的數(shù)據(jù)是json格式的//配置信息//herders//content—type：'appLication/json' 默認(rèn) 所以默認(rèn)發(fā)送的數(shù)據(jù)是json格式的axios.post("url", {username: 'xioaming',password: '1111'},{// '可選參數(shù)可以不寫'params: {//表示url拼接的 http：//a: 123,b: "haha"}}).then(res => { console.log(res) }).catch(err => console.log(err))}// axios.put()// axios.delete()}, //request.js 文件 import axios from "axios";const axios = axios.create({baseURL: 'http://xuezi.fries.host/mfresh/data/', //會(huì)在發(fā)送請求的時(shí)候拼接在url之前timeout: 5000 })export function get (url, params) {return axios.get(url, {params}) }export function get (url, data) {return axios.post(url, data) }export function del (url) {return axios.delete(url) }export function put (url, data) {return axios.delete(url, data) }// 在home.vue調(diào)用的封裝的請求{/* <button @click="getByMinHandle">調(diào)用封裝的get請求</button> */ }// 導(dǎo)入 import { get } from "../utils/request"methods: {getByMinHandle(){get('url', {}).then(res => console.log(res))} },

?nprogress 進(jìn)度條使用? ? npm install --save???nprogress

methods: {login() {console.log(this.uname, this.upwd);// const {uname,upwd}=thisconst url = "http://www.codeboy.com:9999/data/user/login.php";const params = `uname=${this.uname}&upwd=${this.upwd}`;//正確11 123 123this.axios.post(url, params).then((res) => {console.log(res);//登錄頁面的操作，要影響到 頭部欄 組件--全局狀態(tài)共享if (res.data.code == 200) {//成功：更新用戶名到vuex里this.$store.commit("updataUname", this.uname),//跳轉(zhuǎn)到首頁this.$router.push("/");} else {alert("登錄失敗！");}});},}, }; methods: {getData() {const url = "product/details.php?lid=" + this.lid;console.log("url:", url);this.axios.get(url).then((res) => {console.log(res);this.data = res.data;});},}, //獲取所有菜單async getMenuList () {const { data: res } = await this.axios.get('cart_detail_select.php?uid=10')if(res.meta.status!==200)return this.$message.error(res.meta.msg)this.menulist = res.productsconsole.log(this.menulist)}

總結(jié)

以上是生活随笔為你收集整理的vue脚手架安装 axios 安装 配置 轮播图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。