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 vite

                     输入项目名称

按需求选择，例如：

  

 输入：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 = false
      result.value = response.data
    })
    .catch(e => {
      loading.value = false
      errorMsg.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>