Java实现OpenAI 模型训练（fine-tune）-CFANZ编程社区

Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本(这里建议node版本在16以上)，

推荐使用 pnpm 包管理工具管理项目

创建项目流程：

create-vue，即官方的项目脚手架工具，提供了搭建基于 Vite 且 TypeScript 就绪的 Vue 项目的选项。

```
pnpm create vue
```

根据下方提示依次进行你所需要的项目依赖

安装成功后依次执行箭头指向命令，即可启动项目。over

项目配置-准备工作：

1、运行yarn dev后自动打开项目，dev后加上 --open

2、vscode插件安装（必装）

3、更高效的开启TS托管模式（Take Over Mode(托管模式)，TS服务性能更好）

4、eslint (代码风格)预制配置（参考Prettier官网进行自己想要的配置）

5、提交代码前做代码检查 -使用husky这个git hooks工具(husky相当于是git的钩子)

项目结构调整-准备工作：

./src
├── assets        `静态资源，图片...`
├── components    `通用组件`
├── composable    `组合功能通用函数`
├── icons         `svg图标`
├── router        `路由`
│   └── index.ts
├── services      `接口服务API`
├── stores        `状态仓库`
├── styles        `样式`
│   └── main.scss
├── types         `TS类型`
├── utils         `工具函数`
├── views         `页面`
├── main.ts       `入口文件`
└──App.vue       `根组件`

项目使用sass预处理器，安装sass，即可支持scss语法：

pnpm add sass -D

移动端项目基础架构要做的工作：

基础架构-vant的引入：

vant 安装：

# Vue 3 项目，安装最新版 Vant
npm i vant
# 通过 yarn 安装
yarn add vant
# 通过 pnpm 安装
pnpm add vant

vant 自动引入组件，并按需引入组件的样式：

1. 安装插件

# 通过 pnpm 安装
pnpm add unplugin-vue-components -D

2. 配置插件
如果是基于 vite 的项目，在 vite.config.js 文件中配置插件：

import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

export default {
  plugins: [
    vue(),
    Components({
      // importStyle 关闭自动导入样式，防止和main.ts导入的样式冲突
      resolvers: [VantResolver({ importStyle: false })],
    }),
  ],
};

样式：main.ts 引入

在main.scss之前引入，因为后面可能有样式会覆盖vant的样式

// 样式全局使用
import 'vant/lib/index.css'
import './styles/main.scss'

基础架构-移动端的适配：

安装px-vw工具

pnpm add -D postcss-px-to-viewport

参考vant官方推荐PostCSS PostCSS 示例配置

// postcss.config.js 文件

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    },
  },
};

基础架构- css主题定制：

如果定义 css 变量使用 css 变量

全局变量：使用场景：项目主题

:root {
  // 全局css变量
  --main: #999;
  --cp-primary: #16C2A3;
  // 覆盖vant主体色
  --van-primary-color: var(--cp-primary);
a {
  // 使用变量
  color: var(--main)
}

局部变量：使用场景：组件变量

.footer {
  // 局部变量
  --footer-color: green;
}

.footer {
 // 只能在footer下使用
  color: var(--footer-color);
}

如何覆盖vant的主题色：找到主题色的变量名，覆盖即可。

vite.config.ts的配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'

// 下面两行引入：配置自动按需加载
import { VantResolver } from 'unplugin-vue-components/resolvers'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

import path from 'path'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
  return {
    // base:'',// 前端上下文
    plugins: [
      vue({
        reactivityTransform: true
      }),
      //  自动导入的插件，默认会自动加载components下的所有组件作为全局组件
      Components({
        // 默认是true，开启自动生成组件的类型声明文件
        dts: false,
        resolvers: [VantResolver({ importStyle: false })]
      }),
      createSvgIconsPlugin({
        // 指定图标文件夹，打包哪个文件夹下的icon,绝对路径（NODE代码）
        iconDirs: [path.resolve(process.cwd(), 'src/icons')]
      })
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    //打包配置
    build: {
      sourcemap: false, // 非生产环境生成 sourcemap
      outDir: env.VITE_APP_OUTDIR, //打包目录
      assetsDir: 'assets', // 静态资源目录
      sourceMap: true, // 是否生成sourceMap
      chunkSizeWarningLimit: 2000,
      cssCodeSplit: true, //css 拆分
      assetsInlineLimit: 5000, //小于该值 图片将打包成Base64
      minify: false, //是否禁用最小化混淆，esbuild打包速度最快，'terser'打包体积最小。
      // Rollup 打包配置
      rollupOptions: {
        brotliSize: false, // 不统计
        target: 'esnext',
        minify: 'esbuild', // 混淆器，terser构建后文件体积更小
        plugins: [
          // visualizer({ open: true, gzipSize: true })
        ]
      }
    },
    server: {
      port: 80,
      host: 'wx.yibaodaojia.com',
      // hmr: true
      proxy: {
        // 统一认证模块API转发
        '/h5api/': {
          target: 'http://10.10.100.84:8060',
          changeOrigin: true,
          logLevel: 'debug'
        }
      }
    }
  }
})

扩展相关知识：

import.meta：

路由代码相关解析：

dependencies 和 devDependencies的区别：

dependencies：项目依赖。在编码阶段和呈现页面阶段都需要的，也就是说，项目依赖即在开发环境中，又在生产环境中。如js框架vue、页面路由vue-router，各种ui框架antd、element-ui、vant等。
后面部分为–save的情况会使得下载的插件放在package.json文件的dependencies对象里面
devDependencies: 开发依赖（在本地或开发坏境下运行代码所依赖的）。仅仅在写代码过程中需要使用，比如css预处理器、各种loader、vue-cli脚手架、eslint之类，不用于生产环境，因此不需要打包
后面部分为–save -dev 的情况会使得下载的插件放在package.json文件的devDpendencies对象里面

vite.config.ts中访问环境变量：

import { loadEnv } from "vite";

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
})

项目创建过程中报错总结:

项目@符路径提示问题：

import.meta ts报下方--module 错误提示解决方法：

ES5/ES3 中的动态导入调用需要 “Promise” 构造函数。请确保对 “Promise” 构造函数进行了声明或在 “--lib” 选项中包含了 “ES2015”。