快速搭建vue3+vite+eslint

一、项目安装

npm init vite@latest

npm install vue-router@4
npm install vuex@next --save

二、安装eslint

参考地址： https://juejin.cn/post/6982529246480564238

第一步：安装eslint和eslint官方对.vue的支持

cnpm install --save-dev eslint                      // 安装eslint插件
cnpm install --save-dev eslint-plugin-vue           // ESLint官方提供的Vue插件，可以检查 .vue文件中的语法错误

// eslintrc.js 配置
{
  "extends": ["plugin:vue/vue3-recommended"]        // 使用vue3推荐规则
}

第二步：安装prettier和 eslint的prettier插件

npm install --save-dev --save-exact prettier        // 安装prettier
npm install --save-dev eslint-plugin-prettier       // 将prettier作为ESLint插件,

// eslintrc.js 配置
{
    extends: ["plugin:vue/vue3-recommended", "plugin:prettier/recommended"],    // 使用vue3推荐规则、prettier推荐！ 后者替换前者。
}

第三步：调整并使用

此时 eslint 规则和 prettier 规则冲突的情况，eslint告诉我们要使用单引号，但是改为单引号以后，prettier有告诉我们要使用双引号。

这时候就需要另一个eslint的插件 eslint-config-prettier，这个插件的作用是禁用所有与格式相关的eslint规则，也就是说把所有格式相关的校验都交给 prettier 处理。

npm install --save-dev eslint-config-prettier

// eslintrc.js 配置
module.exports = {
  extends: ["plugin:vue/vue3-recommended", "plugin:prettier/recommended"],
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": "error",
  },
};

第四步：拓展

我们还可以在根目录新建 .prettierrc.js 文件自定义 prettier 规则，保存规则后，重启编辑器的eslint服务以更新编辑器读取的配置文件。

// .prettierrc.js
module.exports = {
  singleQuote: true, // 使用单引号
}

通常以上不生效，如果修改不大推荐在

module.exports = {
  extends: ["plugin:vue/vue3-recommended", "plugin:prettier/recommended"],
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": ["error", { useTabs: true }],
  },
};

三、安装sass

cnpm i sass -D

四、axios/安装elementPlus

cnpm i axios --save

安装elementPlus 按照官网安装

五、环境变量、@符号

cnpm i @vitejs/plugin-vue -D        具体可搜索插件用法

拓展环境变量，新增 .env.dev .env.text .env.production, https://cn.vitejs.dev/guide/env-and-mode.html#production-replacement 需要注意必须VITE 开头

六、兼容，推荐

https://blog.csdn.net/fighting_sunnyGirl/article/details/119727647
安装 "babel-polyfill" 并配置兼容ie11， https://www.npmjs.com/package/vite-plugin-legacy