vite 搭建 ant 项目（Vue Router+Vuex+axios）1. vite 创建项目查看项目创建 2.

1. vite 创建项目

查看项目创建

2. 配置文件

在项目 根目录 创建 vite.config.js 文件：

const path = require('path')
module.exports = {
    base:"./",//公共基础路径 打包路径
    resolve: {
        alias:{
            '@': path.resolve(__dirname, './src')//别名设置
        }
    },
    // host: 'localhost',
    port:8888,//启动端口
    // https: true, // 开启https
    open: true, // 自动开启窗口
    proxy: { // 代理配置
        '/api': {
            target: 'http://xxx.com',//后端服务地址
            changeOrigin: true,
            // 重写路径
            rewrite: (path) => path.replace(/^\/api/, '') 
        }
    },
}

3. 安装组件库

可能报错，报错后再重装，再重新安装依赖

npm i --save ant-design-vue@next

4. 引入组件

main.js 文件

import { createApp } from 'vue'
import App from './App.vue'
//完整引入组件，仅做测试用
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
 
const app = createApp(App);
app.use(Antd);
app.mount('#app')

按需加载 ant-design-vue@next 组件点击查看

5. 测试：

在 App.vue 中添加按钮，测试是否引入成功：

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
  <a-button type="primary">Primary</a-button>
  <a-button>Default</a-button>
  <a-button type="dashed">Dashed</a-button>
  <a-button type="danger">Danger</a-button>
  <a-config-provider :auto-insert-space-in-button="false">
    <a-button type="primary">按钮</a-button>
  </a-config-provider>
  <a-button type="primary">按钮</a-button>
  <a-button type="link">Link</a-button>
</template>

6. 配置路由

安装 vue-router

npm install --save vue-router@next

src 目录下，新建 router 文件夹；
新建 index.js 和 router.config.js 文件；
index.js 文件：

import { createRouter, createWebHistory} from 'vue-router';
import routes from './router.config';
 
export const router = createRouter({
    history: createWebHistory(),
 // createWebHistory => 不带#号,需后端支持  createWebHashHistory带#号
    routes
});

router.config.js 文件：

export default [
    {
        path: '/',
        name: 'root',
        redirect: '/root',
        component: () => import('../App.vue'),
        children:[]
    },
    {
        path: '/btn',
        name: 'btn',
        component: () => import('../views/btn.vue'),
    }
]

在 main.js 中引入 router 并使用：

import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import { router } from './router'

const app = createApp(App);
app.use(Antd);
app.use(router);
app.mount('#app')

src 目录下，创建 views 文件夹；
在 views 文件夹下增加 btn.vue 文件；

<template>
  <a-button type="primary">Primary</a-button>
  <a-button>Default</a-button>
  <a-button type="dashed">Dashed</a-button>
  <a-button type="danger">Danger</a-button>
  <a-config-provider :auto-insert-space-in-button="false">
    <a-button type="primary">按钮</a-button>
  </a-config-provider>
  <a-button type="primary">按钮</a-button>
  <a-button type="link">Link</a-button>
</template>

修改 App.vue 文件:

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
  <router-link to='/btn'> btn </router-link> //路由
  <router-view />
</template>

路由测试：
路由正常

7. 使用 Vuex

安装 vuex

npm install vuex@next --save

src 目录下，新建 store 文件夹
在 store 文件夹下创建 index.js：

import { createStore } from "vuex";
 
export default createStore({
    state: {
        demo:'vuex'
    },
    getters:{},
    mutations: {},
    actions: {},
    modules: {}
});

在 main.js 中引入并使用

import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import { router } from './router'
import store from "./store";

const app = createApp(App);
app.use(Antd);
app.use(router);
app.use(store);
app.mount('#app')

在 App.vue 中加入代码测试

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
  <h1>{{this.$store.state.demo}}</h1>  //vuex
  <router-link to='/btn'> btn </router-link>
  <router-view />
</template>

保存并重新运行

8. 使用 axios

安装 axios

npm install axios --save

配置 axios；
src 目录下，创建 http 文件夹，并在该文件夹下创建：
- index.js；
- axios.config.js；
- axios.interceptors.config.js；
- api.js。
index.js 文件

import axios from 'axios';
import config from './axios.config';
import {setInterceptors} from './axios.interceptors.config';

const axiosInstance = axios.create(config);

setInterceptors(axiosInstance);

export default axiosInstance

axios.config.js 文件

export default {
	baseURL: '/api', // 服务器地址或配置的代理的路径
	timeout: 10000,  // 超时时间
	headers: {} // 配置请求头
}

axios.interceptors.config.js（拦截器）文件

export const setInterceptors = (axiosInstance) => {
	// 请求拦截
	axiosInstance.interceptors.request.use(request => {
		return request;
	}, error => Promise.reject(error));

	// 响应拦截
	axiosInstance.interceptors.response.use(response => {
		return response;
	}, error => {
		return Promise.reject(error.response);
	})
};

api.js 文件：加入要请求的接口

import axiosInstance from './index'

// 请求接口封装
export const axiosGet = (params) => axiosInstance.post('/demo', params);

axios 已经配置好，在需要使用请求的地方，直接从 api.js 文件中导出。