- 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中添加按钮，测试是否引入成功：
<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>
运行结果
- 配置路由
- 安装 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>
-
运行项目测试
此时点击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中加入代码测试
<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>
-
保存并重新运行
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文件中导出。
