Vue2 and Vue3教程-2024-速通

Vue-CLI 脚手架创建项目

打开cmd

安装vue cli 脚手架 npm install -给@vue/cli

查看vue 版本 vue --version

创建项目 vue create 项目名称

Vue2

模板语法

条件渲染

列表渲染

事件处理

表单输入绑定

组件基础

Prop组件交互

自定义事件的组件交互(反向传递)

组件的生命周期

Vue引入第三方

Axios网络请求

Axios网络请求封装

• src 下面创建一个utils目录，里面创建一个 https.js 的文件
• 创建一个 api 目录，里面创建index.js 和path.js

参考文档 www.kancloud.cn/yunye/axios…

https.js如下

import axios from "axios";
import * as querystring from "querystring";

//网络请求的配置
const instance = axios.create({
    timeout: 5000//超时时间
})
//错误信息配置
const errorHandle = (status, info) => {
    switch (status) {
        case 400:
            console.log('错误请求')
            break;
        case 401:
            console.log('未授权，请重新登录')
            break;
        case 403:
            console.log('拒绝访问')
            break;
        case 404:
            console.log('请求错误,未找到该资源')
            break;
        case 500:
            console.log('服务器端出错')
            break;
            case 502:
            console.log('网关错误')
            break;
        default:
            console.log('其他错误信息:'+info)
            break;
    }
}




//请求拦截器
instance.interceptors.request.use(
    config => {
        if (config.method === 'post') {
            config.data = querystring.stringify(config.data)
        }
        return config;
    },
    error => {
        return Promise.reject(error);
    }
)

//响应拦截器
instance.interceptors.response.use(
    response => {
        return response.status===200 ? Promise.resolve(response):Promise.reject(response);
    },
    error => {
        const {response} = error;
        if (response) {
            errorHandle(response.status, response.info);
            return Promise.reject(error);
        } else {
            console.log('请求超时，请检查网络是否正常')
        }
    }
)

//参考文档 https://www.kancloud.cn/yunye/axios/234845
export default instance;

---

path.js

const base={
    baseUrl:"http://localhost:8080",//请求的基础路径
    //请求的路径
    loginUrl:"/login",//
    registerUrl:"/register",
    
}
export default base

index.js

import axios from "../utlis/http";
import path from "./path";

const api = {
    login(){
        return axios.get(path.baseUrl+path.loginUrl)
    }
}
export default api

---

使用api

mounted() {
  api.login().then(res => {
    console.log(res.data);
  })
}

网络请求的跨域解决

• url-请求地址的，请求协议，域名，端口

Vue引入路由配置

Vue路由携带参数

嵌套路由配置

Vue状态管理-VueX

VueX核心

Vue3新特性