vue3之写一个aichat项目------项目初始化

创建项目

1、执行命令

npm create vite@latest

2、执行命令后根据需要选择，并执行后续命令
在这里插入图片描述

添加ESLint 代码规范

ESLint 文档
ESLint对javascript语法检测、限制和修复，对代码进行格式化，但是不能对css、less等格式化，目的是使代码更加一致和避免错误
在刚刚建好的项目下执行命令

npm init @eslint/config@latest

在这里插入图片描述
上面选择接受
选择默认的检查语法和发现问题

接着询问使用什么类型的模块

JavaScript modules (import/export)：ES6引入的原生模块系统，使用import和export关键字，这种模块系统提供了静态结构（在编译时就能确定模块依赖关系），有助于优化和更好的理解代码结构

//导出模块
export function exportFun(){}
//导入模块
import { exportFun } from '导出模块的文件路径'

CommonJS(require/exports): CommonJS主要是Node.js环境下的模块系统，使用require()来导入模块，使用module.exports或exports来导出模块，与ES6模块不同，CommonJS的动态的，意味着模块依赖可以在运行时决定

//导出模块
module.exports = function exportFun(){}
//导入模块
const exportFun = require('导出模块文件地址')

**None of these:**如果选择这个选项，意味着当前的项目不直接使用上述任何一种模块系统，既没有使用ES6模块也没有使用CommonJS模块
在开始新项目时，考虑未来兼容性和标准化，一般倾向于使用ES6模块

接着选择项目的框架，这里我选择的是vue
在这里插入图片描述
项目使用使用typescript ，No

代码运行在哪
这里选择Browser
Browser：如果你的代码主要在浏览器环境中运行，选择这个选项。这会启用与浏览器相关的规则和环境设置。
Node：如果你的代码主要在 Node.js 环境中运行，选择这个选项。这会启用与 Node.js 相关的规则和环境设置。

你所选择的配置需要以下依赖，你是否选择现在安装它们，选择Yes
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/9939af7a52944246bab20191bd4455f3.png

在这里插入图片描述
你希望使用哪个包管理器？这里就选择默认的
npm: Node.js的默认包管理器
yarn: Facebook开发的包管理器，提供更快的安装速度和更好的依赖锁定
pnpm: 一个快速切节省磁盘空间的包管理器
bun: 一个新兴的、高性能的JavaScript运行时和包管理器
在这里插入图片描述
上述步骤完成后，就会在项目的根目录下得到一个eslint.config.js文件，内容如下

import globals from "globals";//包含各种全局变量的集合，例如浏览器环境中的全局变量、Node.js环境中的全局变量等
import pluginJs from "@eslint/js";//ESLint的官方JavaScript插件，提供了推荐的配置和规则
import pluginVue from "eslint-plugin-vue";//ESLint的Vue插件，用于lint vue.js文件


/** @type {import('eslint').Linter.Config[]} *///JSDoc注释，用于指定导出类型为ESLint配置数组
// 导出一个默认的配置数组
export default [
  {files: ["**/*.{js,mjs,cjs,vue}"]},//指定要检查的文件类型，包括Java删除riot文件（.js,.mjs,.cjs）和vue文件（.vue）
  {languageOptions: { globals: globals.browser,env:{
    browser: true,//指定全局变量为浏览器环境中的全局变量
    node: true,//指定全局变量为Node.js环境中的全局变量
  } }},//配置语言选项，指定全局变量为浏览器环境中的全局变量
  pluginJs.configs.recommended,//引入JavaScript插件的推荐配置
  ...pluginVue.configs["flat/essential"],//引入Vue插件的"essential"配置，使用扩展运算符(...)将其展开
  
  // 自定义规则
  {
    rules: {
      "semi": ["error"],//指定必须使用分号
      "indent": ["error", 2],//指定缩进为2个空格
      "linebreak-style" : ["error", "unix"],//指定换行符为unix风格
      "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",//在生产环境中禁用console.log，在开发环境中允许使用
      "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",//在生产环境中禁用debugger，在开发环境中允许使用
    }
  }
];

在这里插入图片描述

配置package.json脚本文件

在项目中运行ESLint,检查所有的JavaScript和vue文件
eslint . --ext .js,.vue：这个命令告诉ESLint检查当前目录(.)及其子目录中的所有.js和.vue文件

 "lint": "eslint . --ext .js,.vue"

自动修复ESLint发现的一些问题，–fix会让ESLint尝试自动修复可以自动修复的问题

"lint": "eslint src --ext .js,.vue"

配置vite.config.js中的ESLint

在vie.config.js中引入vite-plugin-eslint，并在plugin中进行配置
在这里插入图片描述

import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
// import vueDevTools from 'vite-plugin-vue-devtools';
import { viteVConsole } from 'vite-plugin-vconsole';
import path from 'path';
import postcssPxToRem from 'postcss-pxtorem';
import eslint from 'vite-plugin-eslint';

// https://vite.dev/config/
export default defineConfig(({ mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  const env = loadEnv(mode, process.cwd());
  const enableVConsole = env.VITE_USER_NODE_ENV !== 'production'; // 只有非生产环境启用
  const proxy = env.VITE_USER_NODE_ENV
    === 'development' ? {
      '/api': {
        target: env.VITE_API_BASE_URL,
        changeOrigin: true,
        secure: false,
        ws: true,  // 支持 websocket
        rewrite: (path) => path.replace(/^\/api/, ''),
        onError: (err, req, res) => {
          console.log('proxy error', err);
        }
      }
    } : {
      '/': {
        target: 'https://xxx.xxxxxx.cn/',
        changeOrigin: true,
        ws: true,
        timeout: 300000
      },
    };
  return {
    plugins: [
      vue(),
      enableVConsole&&viteVConsole({
        entry: path.resolve('src/main.js'),
        enabled: true,
        config: {
          maxLogNumber: 1000,
          theme: 'dark'
        }
      }),
      eslint({
        fix: true,// 自动修复
        cache: false,// 缓存
        include: ['src/**/*.js', 'src/**/*.vue'],// 需要检查的文件
        exclude: ['node_modules', 'dist'],// node_modules和dist目录下的文件不检查
      }),
      // vueDevTools(),
    ].filter(Boolean),
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    },
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
          additionalData: '@import "@/assets/styles/variables.less";'
        }
      },
      postcss: {
        plugins: [
          postcssPxToRem({
            // 配置在将px转化为rem时 1rem等于多少px(因为我们搭配使用了amfe-flexible插件 此处我们需要设置的值应是UI设计稿全屏基准宽度的十分之一)
            rootValue: 75,
            propList: ['*'],
            selectorBlackList: [],
            replace: true,
            mediaQuery: false,
            minPixelValue: 0,
            exclude: /node_modules/i,
            atRules: true,
            inline: true
          })
        ]
      }
    },
    server: {
      host: '0.0.0.0',
      port: 8008,
      proxy,
      //内网穿透，手机调试本地代码用
      allowedHosts: [
        '8eec-113-106-75-166.ngrok-free.app', // 添加你的ngrok URL
        // 如果需要，可以添加其他允许的主机
        'localhost', // 允许本地访问
        '127.0.0.1' // 允许本地访问
      ],
    }
  };
});

关于 vite-plugin-eslint 和 eslint.config.js

eslint.config.js
是ESLint的核心配置文件，它定义了项目中使用的所有规则、环境设置、解析器选项等，通过这个文件，可以
定制化规则：指定哪些代码风格和质量相关的规则应该被应用到项目中，例如是否允许分号；
配置插件：ESLint支持通过插件来扩展其功能，比如支持新的语言特性或者添加额外的规则集；
设置环境：告诉ESLint代码将在哪个环境运行（浏览器、nodejs）
指定解析器：默认情况下，ESLint使用express解析JavaScript代码，但是也可以选择Babel-ESLint或者其他的解析器来支持更复杂的语法结构
vite-plugin-eslint
vite-plugin-eslint是vite的插件，用于在开发过程中自动集成，用于定义项目的ESLint规则、环境、解析器，也就是说：
自动化检查：在启动vite开发服务器时自动进行代码质量检查，无需手动运行ESLint命令
即时反馈：当代码违反了ESLint规则时，可以在中断立即看到警告

区别与联系
区别：
功能定位不同：vite-plugin-eslint主要负责在Vite项目中集成ESLint，使其能够在开发和构建阶段自动检查代码；而 eslint.config.js则是一个配置文件，用来指定ESLint应该应用的具体规则和选项。
使用场景不同：vite-plugin-eslint侧重于集成和自动合检查过程，eslint.config.js侧重与定制化的设置ESLint的行为
联系：
它们都是为提高代码质量和一致性服务的，vite-plugin-eslint依赖于eslint.config.js中的配置来决定如何检查代码，换句话说，eslint.config.js提供了ESLint的规则和配置，而vite-plugin-eslint则负责在Vite环境中应用这些规则
所以，在一个使用vite的项目中，若要充分利用ESLint来提升代码质量，通常需要同时配置vite-plugin-eslint和eslint.config.js，前者保证ESLint能够无缝融入Vite开发体验中，后者则精准的控制了ESLint的具体行为。