vue3项目创建及请求配置

一、创建项目

首先安装vue：安装或者升级vue：npm install -g @vue/cli

保证 vue cli 版本在 4.5.0 以上：vue --version

1、使用vue-cli创建：

创建一个项目 | Vue CLI

创建项目：vue create 项目名称

选择以下选项：

看自己是否需要保存

在终端输入：cd 项目名称

npm run serve（运行）

2、使用vite创建：

快速上手 | Vue.js

在终端输入：npm init vue@latest

输入项目名称

按需求选择，例如：

输入：cd 项目名称

npm i

npm run dev（运行）

二、请求配置

安装axios：npm i axios -S（开发和上线都用）
npm i axios -D（开发用）

1、虚拟接口：

创建：public->data->名称.json：（代码根据自己的需求写），有两种方式，

例如：方式1：

{
"id":1,"name":'石家庄',"distance":'100m'
}

例如：方式2：

[{"id":1,"name":'石家庄',"distance":'100m'},{"id":2,"name":'衡水',"distance":'100m'}
]

封装axios：src->hooks->request.ts:

import { ref } from 'vue'
import axios from 'axios'/*
使用axios发送异步ajax请求
*/
export default function useUrlLoader<T>(url: string) {const result = ref<T | null>(null)const loading = ref(true)const errorMsg = ref(null)axios.get(url).then(response => {loading.value = falseresult.value = response.data}).catch(e => {loading.value = falseerrorMsg.value = e.message || '未知错误'})return {loading,result,errorMsg,}
}

利用：新建页面：例如：request.vue（发送请求，把数据渲染上去）:

对应上面的方式1：

<template><div class="about"><h2 v-if="loading">LOADING...</h2><h2 v-else-if="errorMsg">{{errorMsg}}</h2><ul v-else><li>id: {{result.id}}</li><li>name: {{result.name}}</li><li>distance: {{result.distance}}</li></ul></div>
</template><script lang="ts">
import useRequest from '../hooks/request'// 地址数据接口
interface AddressResult {id: number;name: string;distance: string;
}// 产品数据接口
interface ProductResult {id: string;title: string;price: number;
}export default {setup() {const {loading, result, errorMsg} = useRequest<AddressResult>('/data/名称.json')return {loading,result,errorMsg}}
}
</script>

对应上面的方式2：

<template><div class="about"><h2 v-if="loading">LOADING...</h2><h2 v-else-if="errorMsg">{{errorMsg}}</h2><ul v-for="p in result" :key="p.id"><li>id: {{p.id}}</li><li>title: {{p.name}}</li><li>price: {{p.distance}}</li></ul></div>
</template><script lang="ts">
import useRequest from '../hooks/request'// 地址数据接口
interface AddressResult {id: number;name: string;distance: string;
}// 产品数据接口
interface ProductResult {id: string;name: string;price: number;
}export default {setup() {const {loading, result, errorMsg} = useRequest<ProductResult[]>('/data/名称.json')return {loading,result,errorMsg}}
}
</script>

配置路由：

{path: '/request',component: romeView},

2、真实接口

配置代理（解决跨域问题）：vue.config.js（该文件改了之后需要重启项目）

跨域错误：

//配置代理devServer:{//所有的配置项proxy:{//配置'/course-api':{//代理名称,这里最好有一个target:'https://course.myhope365.com/api', // 后台接口域名changeOrigin:true,//是否跨域pathRewrite:{'^/course-api':''//路径重写}},// 'api':{//     target:'https://course.myhope365.com', // 后台接口域名//     changeOrigin:true,//是否跨域//     // pathRewrite:{//     //     '^/course-api':''//路径重写//     // }// },}}
};

创建页面：src->views->名称.vue:

<template><div>
<!--    ref的-->
<!--    <div v-for="i in list" :key="i.id">-->
<!--      <img :src="i.imgUrl" alt="">-->
<!--    </div>--><!--    reactive的-->
<!--    <div v-for="i in list.swiperList" :key="i.id">-->
<!--      <img :src="i.imgUrl" alt="">-->
<!--    </div>--></div>
</template><script>
import axios from "axios"
import {ref,reactive} from 'vue'
export default {name: "cou",setup(){// let list = ref([])let list = reactive({swiperList:[]})axios.get('/course-api/weChat/applet/course/banner/list?number=4').then(res=>{console.log(res)//ref的// list.value = res.data.data//  reactive的list.swiperList = res.data.data})return {// list}}
}
</script><style scoped></style>