1.vite创建vue3项目

安装脚手架
```
npm install -g create-vite-app
```
创建项目
```
create-vite-app projectName
```
安装依赖

用vscode打开项目, 运行 npm i

运行项目

npm run dev // 可以在package.json里修改

预览项目

用浏览器打开: http://localhost:3000

2.配置基本路由

1. 安装插件

npm install vue-router@4

2. 其他配置

再项目最外层创建jsconfig.json，并配置,这样比较方便引入文件，src文件夹就用@表示

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*":["src/*"]
        }
    },
    "exclude": ["node_modules","dist"]
}

3.基本路由信息配置

// createRouter用来创建路由对象, createWebHistory,createWebHashHistory用来指定路由模式
import {createRouter,createWebHistory,createWebHashHistory} from "vue-router";
// 创建路由并暴露
export default createRouter({
    // 配置路由模式
    history:createWebHistory(), //history 模式
    // history:createWebHashHistory(), //history 模式
    // 配置路由信息
    routes:[
        {
            name:'home',//给路由命名(需要根据名字找路由时，需要写成对象写法，用"{name：路由名}")
            path:"/home", //路由路径
            component:()=> import('@/views/Home/index.vue'), //路由展示的组件
            // meta:{}, //路由元信息，可以放在一些我们需要的值
        },
        {
            // 路由重定向-每次进入跳转的默认页面
            path:"/",
            redirect:"/home" //默认页
        },
        {
            // 404页配置-当用户访问了不存在的路由，就会跳转到404页面
            path:"/:pathMatch(.*)",
            component:()=> import("@/components/NoFound/index.vue")
        }
    ]
})

4.router-view

路由出口
路由匹配到的组件将渲染在这里

<template>
  <div id="app"> 
    <!-- 路由出口 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

5.路由跳转

基本使用

// 方式一:声明式导航
<router-link to="/home">cart</router-link>

// 方式二：编程式导航
this.$router.push('/cart');

根据路由名跳转

<!-- 根据路由名呼唤路由 -->
<router-link  :to="{name:'home'}">home</router-link>

传query参数

<!-- 跳转路由并携带query参数，to的字符串写法 -->
            <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link> -->
            
               <!-- 跳转路由并携带query参数，to的对象写法 -->
               <router-link :to="{
                   path:'/home/message/detail',
                   query:{
                       id:m.id,
                       title:m.title
                   }
               }">
                </router-link>

传params参数

<!-- 跳转路由并携带params参数(用 / 分割，但要在路由那配置一下告诉他后面的是参数)，to的字符串写法 -->
<!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link> -->
<!-- 跳转路由并携带params参数，to的对象写法（携带params参数使用对象写法，不能用path，只能用name呼唤路由） -->
               <!-- 根据路由名呼唤路由 -->
               <router-link :to="{
                    name:'xijie',
                    params:{
                       id:m.id,
                       title:m.title
                   }
               }">
                   {{m.title}}
                </router-link>

传params参数的路由配置

//配置路由的文件
{   
   name:"xijie",
   path:"detail/:id/:title",// 跳转路由并携带params参数,需要给参数加上占位符，在占位后面加上一个问号就表示params可以传递或者不传。（如果没加 ? 又没传params参数，URL就会有问题）
   component:Detail,
}

router-link标签的replace属性

<!-- 将浏览器的历史记录的写入方式由默认的push，改成replace（简单来说就是无法后退了） -->
<router-link :replace="true" :to="{name:'home'}">home</router-link>

子路由配置

{
   path:"/home",
   component:Home,
   children:[//子路由
   {
       path:"news",//子路由路径不加 / ,因为在遍历下级路由时，会自动加上，如果这边再加的话，就找不到该路由了
      component:News 
   },

编程式导航

this.$router.push({  //使用对象式时要写路由名，否则直接写路由路径例：push('/detail')
   name:'xijie',
   params:{
   id:m.id,
   title:m.title
  }   
})

this.$router.replace({
  name:'xijie',
  params:{
  id:m.id,
  title:m.title
}   
})

挂载路由

// 引入路由
import router from "./router";

const app = createApp(App)
// 挂载路由
app.use(router)
app.mount('#app')

3. 配置axios拦截器

首先安装axios, npm i axios
配置拦截器

//api/request.js

import axios from "axios";

const requests = axios.create({
    baseURL:"http://xxxxxxxxxxxx", //服务器地址
    timeout:4000, //响应超时时间
})

// 请求拦截器
requests.interceptors.request.use((config)=>{
    // 添加token
    config.headers["token"] = "gg12j3h4ghj2g134kj1g234gh12jh34k12h34g12kjh34kh1g";
    return config;
});

// 响应拦截器
requests.interceptors.response.use((res)=>{
    if (res.data.code == 666){
        return res.data;
    }else{
        alert(res.data.msg)
    }
     
    
},(error)=>{
    // 响应失败的回调函数
    return Promise.reject(new Error("faile"))
});

export default requests;

在api文件夹下创建index.js文件管理请求API

// 对API进行统一管理
import requests from "./request";

// 获取home轮播图接口
export const getBanners = ()=> requests.get("/product/getBanners");

//需要哪个接口调用哪个就行

4.配置vite

(1) 添加 @vitejs/plugin-vue

更新vite版本 npm i vite@2.8.4
安装插件npm i @vitejs/plugin-vue (2) 配置，根目录新建vite.config.js (vite的配置文件)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()]
})

5.接下来

剩下的就拆组件，发请求，拿数据，渲染页面，业务逻辑。。。。

vite+vue3项目搭建

1.vite创建vue3项目

2.配置基本路由

1. 安装插件

2. 其他配置

3.基本路由信息配置

4.router-view

5.路由跳转

3. 配置axios拦截器

4.配置vite

5.接下来