vite搭建项目

1.vite搭建

开始 | Vite 官方中文文档 (vitejs.dev)

cmd命令

npm create vite@latest
// 或者使用vue模板
npm create vite@latest my-vue-app -- --template vue

2.项目基本结构

3.eslint规范

首先在命令行下下载规范

yarn add eslint --dev

然后初始化规范

yarn run eslint --init

就会在项目里生成一个js配置


配置package：“lint”: “eslint ./src/**/*.{js,jsx,vue,ts,tsx} --fix”，写完代码后就可以运行代码来进行验证

更换vue3的规范检验

然后配置编辑器的eslint

如果使用的eslint太新，而webstorm太老，比如我用的是es2021，怎么也得是2021.2.2以上才行，但是我目前用的是2021.1，那么就需要修改编辑器的源文件，复制地址用管理员模式编辑即可，搜索“this.cliEngineCtor”，然后把第一处替换成“this.cliEngineCtor = requireInContext(eslintPackagePath + “lib/cli-engine”).CLIEngine;”

然后就是配置git提交时候的检测，先下载插件

//git初始化
git init
//安装husky
npx husky-init
npx mrm@2 lint-staged

在package.json中设置

"lint-staged": {  "*.{js.jsx,vue,vue,ts,tsx}":[    "npm run lint",    "git add"  ]}

再配置平时开发和构建的时候自动检测，这里采用大佬写的插件

yarn add --dev @nabla/vite-plugin-eslint

然后在vite.config.ts中引入即可

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from "@nabla/vite-plugin-eslint"
export default defineConfig({
	plugins: [vue(),eslintPlugin()]
})

到此vite搭建vue的架子就算搭建完成了