1. 安裝配置 axios 。 直接vscode安裝 cmd? npm install --save axios 2配置 main.js //引入axios模塊 import axios from 'axios' //默認基礎路徑 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 包 ?自己起名
名固定選項
選手動模式: Manually select features

3.在項目目錄下執行安裝命令 moudel里按: npm i axios vue-axios
Axios官網: http://www.axios-js.com/

4.Vue2和swiper的相關教程:
https:/ / github.com/surmon-china/vue-awesome-swiper
在項目目錄下執行安裝命令:
模塊的安裝命令: 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 發起get請求//參數一 表示請求地址//參數二 表示配置信息// params表示傳遞到服務器端的數據，以url參數形式拼接在請求地址后面// { page: 1, per: 3}// headers表示請求頭axios.get('uel', {params: {page: 3,per: 2},headers: {}}).then(res => console.log(res))}postHandle() {//post騎牛傳遞三個參數//請求地址//傳遞的數據，在請求體中傳遞//axios默認發送的數據是json格式的//配置信息//herders//content—type：'appLication/json' 默認 所以默認發送的數據是json格式的axios.post("url", {username: 'xioaming',password: '1111'},{// '可選參數可以不寫'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/', //會在發送請求的時候拼接在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調用的封裝的請求{/* <button @click="getByMinHandle">調用封裝的get請求</button> */ }// 導入 import { get } from "../utils/request"methods: {getByMinHandle(){get('url', {}).then(res => console.log(res))} },

?nprogress 進度條使用? ? 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);//登錄頁面的操作，要影響到 頭部欄 組件--全局狀態共享if (res.data.code == 200) {//成功：更新用戶名到vuex里this.$store.commit("updataUname", this.uname),//跳轉到首頁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)}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。