vite搭建vue3+ant Design项目（Vue Router+Vuex+axios）

vite 创建项目点击查看
配置vite.config.js文件(此步骤暂时有问题，跳过，系统创建文件暂时不更改)

在项目根目录创建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/, '') // 重写路径
        }
    },
}

安装ant-design-vue组件库（可能报错，报错后再重装，后需要重新安装依赖）

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

在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组件点击查看

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

运行结果

配置路由

安装 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文件

修改App.vue文件

运行项目测试
此时点击btn可以正常跳转

运行结果
测试路由是否正常

显示正常

使用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中加入代码测试

保存并重新运行

vuex正常

使用axios

安装axios

npm install axios --save

配置axios
src目录下，创建http文件夹
在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文件中导出。

vite搭建vue3+ant Design项目（Vue Router+Vuex+axios）

{{this.$store.state.demo}}

你可能感兴趣的:(vite搭建vue3+ant Design项目（Vue Router+Vuex+axios）)