vue3.3.4 + vite4.4.9
1.组件安装
1.1 ElementPlus
npm install element-plus --save
- main.js
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App);
app.use(ElementPlus).mount(‘#app’);
1.2 Router
npm install vue-router@4
- router/index.js
import {
createRouter,
createWebHashHistory,
} from 'vue-router'
import ItProjectIndex from ‘…/views/itproject/Index.vue’;
const routes = [
{
path: ‘/itproject/index’,
component: ItProjectIndex,
name: ‘ItProjectIndex’
},
]
// 创建路由对象
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
- main.js
import router from "./router/index";
const app = createApp(App);
app.use(router).mount('#app');
1.3 Axios
npm install axios
- main.js
import axios from 'axios'
const app = createApp(App);
app.config.globalProperties.$axios = axios;
- 封装为request.js
/**
* ajax请求配置
*/
import axios from 'axios'
import { ElMessage } from 'element-plus'
// axios默认配置
axios.defaults.timeout = 10000 // 超时时间
// axios.defaults.baseURL 请求地址前缀
// User地址
// axios.defaults.baseURL = ‘http://127.0.0.1:8001’
// tools地址
// axios.defaults.baseURL = ‘http://127.0.0.1:8088’
// 微服务地址
axios.defaults.baseURL = ‘http://localhost:7000’
// 整理数据
axios.defaults.transformRequest = function(data) {
data = JSON.stringify(data)
return data
}
// 路由请求拦截
axios.interceptors.request.use(
config => {
config.headers[‘Content-Type’] = ‘application/json;charset=UTF-8’
return config
},
error => {
return Promise.reject(error.response)
})
// 路由响应拦截
axios.interceptors.response.use(
response => {
if (response.data.success === false) {
return ElMessage.error(response.data.errDesc)
} else {
return response.data
}
},
error => {
return Promise.reject(error.response) // 返回接口返回的错误信息
})
export default axios
- api.js
import request from '@/utils/request'
export default {
test() {
console.log(“test”)
return request({
url: ‘/order/order/1’,
method: ‘get’,
})
}
}
- vue使用
mounted() {
// 原生
this.$axios.get("http://localhost:9000/order/order/1").then(res => {
this.obj= res.data[0];
console.log(res.data);
})
// 封装
Api.test().then(res => {
console.log(res);
})
}
1.3 Store
npm install vuex@next --save
- store/index.js
import {createStore } from 'vuex'
export default createStore({
state: {
},
getters:{
},
mutations: {
},
actions: {
},
modules: {
}
})
- main.js
import store from './store/index'
const app = createApp(App);
app.use(store).mount(‘#app’);
Vue3