一 配置env环境 

.env文件分别为 配置本地/测试/预发/正式路径

process.env.自定义的url 例如 process.env.BASE_URL

二 配置类型别名

 vue3中需要配置的两处类型别名

一般情况下在tsconfig.ts中为自动生成 如果没有那么需要自动配置

二 想要通过@得方式快捷配置类型别名需要通过 pathResolve来进行 在vite.config.ts中

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

import path, { resolve } from 'path';
import { mars3dPlugin } from 'vite-plugin-mars3d';
function pathResolve(dir: string) {
  return resolve(process.cwd(), '.', dir);
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [mars3dPlugin(),vue()],
  resolve: {
    alias: [
      {
        find: /@\//,
        replacement: pathResolve('src') + '/',
      },
      {
        find: /@mars\//,
        replacement: pathResolve('src/marsgis') + '/',
      }
     
    ]
  },
  define:{
    'process.env': {
      BASE_URL: '/',
    },
  },
  css:{
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        additionalData: `@import "${path.resolve(__dirname, 'src/marsgis/components/mars-ui/base.less')}";`,
      
      },
    },
  }
})

三 跨域的代理 两种方式

一 在env.develop或者env.production中配置

可以多个配置用逗号隔开

# 是否启用mock
VITE_USE_MOCK = false

# 发布路径
VITE_PUBLIC_PATH = /

# 跨域代理，您可以配置多个 ,请注意，没有换行符
VITE_PROXY = [["/jeecgboot","http://地址:端口号/jeecg-boot"],["/upload","http://localhost:3300/upload"], ['/scada','http://地址:端口号/scada']]

# 是否启用gzip或brotli压缩
# 选项值: gzip | brotli | none
# 如果需要多个可以使用“,”分隔
VITE_BUILD_COMPRESS = 'gzip'

# 使用压缩时是否删除原始文件，默认为false
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false

#后台接口父地址(必填)
VITE_GLOB_API_URL=/

#后台接口全路径地址(必填)
# VITE_GLOB_DOMAIN_URL=http://jeecg-boot-system:8080/jeecg-boot
VITE_GLOB_DOMAIN_URL=http://地址:端口号/jeecg-boot

# 接口父路径前缀
VITE_GLOB_API_URL_PREFIX=

此时配合vit.config.ts中的

import { createProxy } from './build/vite/proxy';

const viteEnv = wrapperEnv(env);
  console.log('环境变量', viteEnv);
  const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY } = viteEnv;

 server: {
      // Listening on all local IPs
      host: true,
      https: false,
      port: VITE_PORT,
      // Load proxy configuration from .env
      proxy: createProxy(VITE_PROXY),
    },
    plugins: createVitePlugins(viteEnv, isBuild),

  // 预加载构建配置（首屏性能)
    optimizeDeps: {
      esbuildOptions: {
        target: 'es2020',
      },
      exclude: [
        //升级vite4后，需要排除online依赖
        '@jeecg/online',
      ],
    },

也可以在vite.config,ts中直接

   server: {
            // 开启局域网访问
            host: '0.0.0.0',
            // 端口
            port: 2472,
            // 代理
            proxy: {
                '/api': {
                    //    'http://39.108.123.235'  'http://192.168.1.37:9002'  天门: http://192.168.194.200
                    target: 'http://39.108.123.235',
                    changeOrigin: true,
                },
                '/scada': {
                    // 本地
                    target: env.VITE_APP_API_URL,
                    changeOrigin: true,
                },
            },
        },

项目结构目录 

vue项目 修改 运行的 ip和端口

在vite.config.ts中

 server: {

            // 开启局域网访问

            host: '0.0.0.0',

            // 端口

            port: 2472,

            // 代理

            proxy: {

                '/api': {

                    //    'http://39.108.123.235'  'http://192.168.1.37:9002'  天门: http://192.168.194.200

                    target: 'http://39.108.123.235',

                    changeOrigin: true,

                },

                '/scada': {

                    // 本地

                    target: env.VITE_APP_API_URL,

                    changeOrigin: true,

                },

            },

        },

在vue项目中使用mockjs模拟数据

方法 下载mockjs npm install mockjs --save-dev  

在 src目录 下创建一个 mock目录 ，然后在里面创建一个 index.js 文件，作为mock各个模块的导出点，供 src/main.js 使用。
在src/mock/ 目录下，创建 xxx.js 规则，模拟各个模块数据，供 mock 使用。
这样按模块划分后的目录结构大致如下所示：

├── src
|   ├── mock
|       ├── index.js
|        ── user.js
|           ├── article.js
|           └── category.js
|          

在tsconfig.json中的include中加入"mock/**/*.ts",
在vite.config.ts中 加入 import mockDevServerPlugin from "vite-plugin-mock-dev-server";
plugins：[
   // MOCK 服务
      env.VITE_MOCK_DEV_SERVER === "true" ? mockDevServerPlugin() : null,
]

在index.ts中
import path from "path";
import { createDefineMock } from "vite-plugin-mock-dev-server";

export const defineMock = createDefineMock((mock) => {
  // 拼接url
  mock.url = path.join(
    import.meta.env.VITE_APP_BASE_API + "/api/v1/",
    mock.url
  );
});

例如在auth。mock。ts中
import { defineMock } from "./base";

export default defineMock([
  {
    url: "auth/captcha",
    method: ["GET"],
    body: {
      code: "00000",
      data: {
        captchaKey: "534b8ef2b0a24121bec76391ddd159f9",
        captchaBase64:
        "https://www.baidu.png",
      },
      msg: "一切ok",
    },
  },

  {
    url: "auth/login",
    method: ["POST"],
    body: {
      code: "00000",
      data: {
        accessToken:
          "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiIsImRlcHRJZCI6MSwiZGF0YVNjb3BlIjoxLCJ1c2VySWQiOjIsImlhdCI6MTcyODE5MzA1MiwiYXV0aG9yaXRpZXMiOlsiUk9MRV9BRE1JTiJdLCJqdGkiOiJhZDg3NzlhZDZlYWY0OWY3OTE4M2ZmYmI5OWM4MjExMSJ9.58YHwL3sNNC22jyAmOZeSm-7MITzfHb_epBIz7LvWeA",
        tokenType: "Bearer",
        refreshToken: null,
        expires: null,
      },
      msg: "一切ok",
    },
  },

  {
    url: "auth/logout",
    method: ["DELETE"],
    body: {
      code: "00000",
      data: {},
      msg: "string",
    },
  },
]);

在 。env。development 中 # 是否启用 Mock 服务
VITE_MOCK_DEV_SERVER=false

回顾插槽的用法

插槽默认用法

 

// 子组件

children.vue

<template>
<div>
<slot>若注释掉img就会显示这句话</slot>
</div>
</template>


// 父组件

<template>
<div>
<children  >
<img />
</children>
</div>
</template>

此时在子组件中会展示照片

具名插槽

当多个slot要展示时需要给他们定义名字

作用域插槽 

scope 和 row 结合

详细看 Vue-几种插槽(slot)的使用_slot插槽-CSDN博客 

补充在融入别的项目时千万不要忘记在与src同级的main.ts中引入主要的技术点