vue3.3.4 + vite4.4.9

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