526互联

Vue3

发布时间 2023-10-07 14:12:44作者: lwx_R

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');