vite学习笔记

1、vite的index.html放在根目录

2、package.json 中的 "dev": "vite --open", --open表示浏览器自动打开

3、eslint配置：A、pnpm i eslint -D。B、npx eslint --init（生成eslint配置文件：eslint.cjs）,还要继续安装 npm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser

4、配置 prettier ：npm install -D eslint-plugin-prettier prettier eslint-config-prettier

5、修改src别名，修改后src目录可以用@替代，例如：import App from "@/App.vue";

vite.config.ts 文件红色部分如下：

import { defineConfig } from "vite";

import vue from "@vitejs/plugin-vue";

import path from "path";

// https://vitejs.dev/config/

export default defineConfig({

  plugins: [vue()],

  resolve: {

    alias: {

      "@": path.resolve("./src"), //相对路径别名配置，使用@替代src

    },

  },

});

tsconfig.json文件红色部分如下：

{

  "compilerOptions": {

    "target": "ESNext",

    "useDefineForClassFields": true,

    "module": "ESNext",

    "moduleResolution": "Node",

    "strict": true,

    "jsx": "preserve",

    "resolveJsonModule": true,

    "isolatedModules": true,

    "esModuleInterop": true,

    "lib": ["ESNext", "DOM"],

    "skipLibCheck": true,

    "noEmit": true,

    "baseUrl": "./", //解析非相对模块的基地址，默认是当前目录

    "paths": {

      //路径映射，相对于baseUrl

      "@/*": ["src/*"]

    }

  },

  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],

  "references": [{ "path": "./tsconfig.node.json" }]

}

6、SVG图标配置：npm install vite-plugin-svg-icons -D

main.ts导入

//svg插件需要配置代码

import 'virtual:svg-icons-register'

 

vite.config.ts添加红色部分

//引入svg需要用到插件

import { createSvgIconsPlugin } from "vite-plugin-svg-icons";

export default defineConfig({

  plugins: [

    vue(),

    createSvgIconsPlugin({

      iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],

      symbolId: "icon-[dir]-[name]",

    }),

  ],

  resolve: {

    alias: {

      "@": path.resolve("./src"), //相对路径别名配置，使用@替代src

    },

  },

});

 

vue文件中使用方式：

    <!-- 测试SVG图标使用 -->

    <!-- svg：图标外层容器节点，内部需要与use标签结合使用 -->

    <svg>

      <!-- xlink：href执行哪一个图标，属性值必须为#icon-图标文件名 -->

      <!-- use标签fill属性可以设置图标的颜色 -->

      <use xlink:href="#icon-phone" fill="green"></use>

    </svg>

7、mock数据

npm install -D vite-plugin-mock mockjs

官网资料

https://github.com/vbenjs/vite-plugin-mock/blob/main/README.zh_CN.md

如果遇到，如下错误

......./node_modules/vite-plugin-mock/dist/index.mjs:128
if (!require.cache) {^

ReferenceError: require is not defined

则在node_modules/vite-plugin-mock/dist/index.mjs文件添加：

import { createRequire } from 'node:module';

const require=createRequire(import.meta.url)