Correcting teacher:autoload
Correction status:qualified
Teacher's comments:
npm init -y
webpack webpack-cli webpack-dev-server
src > index.js index.html
webpack.config.js
npm i html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin')
webpack
webpack serve
npm i axios -S
import axios from 'axios
axios get 与 post 的区别
headers: { 'content-type': 'application/x-www-form-urlencoded' }
axios 请求方式
axios.request(config)
axios.get(url[, config])
请求axios.delete(url[, config])
删除axios.post(url[, data[, config]])
发送axios.head(url[, config])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
axios 处理并发请求
跟 promise 一样 使用 axios.all()
axios 拦截器
请求拦截器
axios.interceptors.request.use((config) => {
console.log("########");
});
响应拦截器
axios.interceptors.response.use()((config) => {
console.log("########");
});
axios 全局配置
//主地址
axios.defaults.baseURL = "http://127.0.0.1";
//延时时间
axios.defaults.timeout = 5000;
//post请求头
axios.defaults.headers.post["content-type"] = "application/x-www-form-urlencoded";
axios 实例封装
由于现在大部分都是多服务器,且不同服务器超时时长不一样,没法将后台所有域名都加到 url 中,可以再封装一个 axios 来执行
const instance = axios.create({
url: "http://localhost.com",
timeout: 3000,
method: "post",
});
instance.get("http://localhost.com");
npm i @vue/cli -g
vue -V
vue create '项目名'
npm run serve
创建内容及注意事项
<template>
<!-- div外层标签必须有,标签内内容都填在这里面 -->
<div>
{{ msg }}
<hr />
{{ info() }}
</div>
</template>
<script>
export default {
name: "App2",
data() {
return {
msg: "this is a test",
name: "admin",
};
},
methods: {
info() {
return `my name is ${this.name}`;
},
},
};
</script>
<style scoped></style>
-js 主入口文件
import { createApp } from "vue";
// 这里导出的是匿名的 就随意起名就是了 不要用解构赋值 没值啊,用了会有问题
import App2 from "./App2.vue";
createApp(App2).mount("#app");
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>