vite 项目配置

1. 创建 vite 项目

yarn create vite my-vue-app --template vue
yarn
yarn dev

修改 vite 配置文件（vite.config.js）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
 
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  server: {
    port: 3000, // 设置服务启动端口号
    open: true, // 设置服务启动时是否自动打开浏览器
    proxy: {
      '/api': {
        target: 'http://API网关所在域名',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    }
  }
})

---

2. 安装 vue-router

yarn add vue-router@4

新建并配置  /src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'

// 开启历史模式
// vue2中使用 mode: history 实现
const routerHistory = createWebHistory();

const router = createRouter({
    history: routerHistory,
    routes: [
        {
            path: '/',
            redirect: '/home'
        },
        {
            path: '/home',
            component: () => import('../views/Home.vue')
        },
        {
            path: '/contact',
            component: () => import('../views/Contact.vue')
        }
    ]
})

export default router

main.js 使用 router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
 
createApp(App).use(router).mount('#app')

App.vue 使用 router-view 

<template>
  <div>
    <router-link to='/Home'> Home</router-link>
    <router-link to='/Contact'>Contact </router-link>
  </div>
  <router-view></router-view>
</template>

---

3. 安装 vuex

yarn add vuex@next

创建并配置 /src/store/index.js文件

import { createStore } from 'vuex'

const store = createStore({
  state () {
    return {
    }
  },
  mutations: {
  }
})

export default store;

main.js 使用 vuex

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index'
 
createApp(App).use(router).use(store).mount('#app')

---

4. 安装 element-plus

yarn add element-plus

main.js 使用 elemenet-plus

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus' // 引用 element-plus

const app = createApp(App)
app.use(ElementPlus) // 使用 element-plus
app.use(router)
app.mount('#app')

---

5. 安装 axios

yarn add axios

封装请求 /src/api/request.js

import axios from 'axios'

export function request(config) {
    // 1.创建axios的实例
    const instance = axios.create({
        baseURL:"./",
        timeout: 50000,
    })
    // 2.1.请求拦截的作用
    instance.interceptors.request.use(config => {
        return config
    }, err => {
        console.log(err);
    })
    // 2.2.响应拦截
    instance.interceptors.response.use(res => {
        return res.data
    }, err => {
        console.log(err);
    })
    // 3.发送真正的网络请求
    return instance(config)
}

接口文档 /src/api/index.js

import { request } from "./request.js";
import axios from 'axios';

export const login = () => {
    return axios.get('/json/...');
}

配置跨域   vite.config.js文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000, // 设置服务启动端口号
    open: true, // 设置服务启动时是否自动打开浏览器
    proxy: {
      '/api': {
        target: '实际请求地址',	//实际请求地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    }
  }
})

---

 6.安装 事件总线

yarn add mitt

main.js 使用事件总线

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import mitt from 'mitt'

const app = createApp(App)
app.config.globalProperties.$eventBus = mitt()
app.use(ElementPlus)
app.use(router)
app.mount('#app')

全局注册事件

    this.$EventBus.$emit("XXX", {num: 4});

监听事件

    this.$EventBus.$on("XXX", ({ num }) => {
      this.$nextTick(() => {
        console.log("接收到的num为：",num)
      });
    });

移除事件

beforeDestroy() {
  this.$EventBus.$off("XXX"); // 移除具体事件
  this.$EventBus.all.clear() // 移除所有事件
},

---

 7.安装 cesium

yarn add cesium vite-plugin-cesium vite -D

vite.config.js 引入 cesium

import { defineConfig } from 'vite';
import cesium from 'vite-plugin-cesium';
export default defineConfig({
  plugins: [cesium()]
});

组件内使用 cesium

import * as Cesium from 'cesium';
const viewer = new Cesium.Viewer('cesiumContainer');

---

8. 安装 scss

yarn add scss