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)
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。