关于vue项目中一些常规设置

eslint设置：

1、项目中变量定义未使用报错，在.eslintrc.js中rules中添加 "no-unused-vars":"off"设置，代码如下：

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    // 变量已定义未使用不报错
    "no-unused-vars": "off",
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

vite+vue3中scss引入：

安装sass：npm i -D sass

如果引入全局变量使用，需进行vite.config.js设置，举例如下：

import { defineConfig } from 'vite'
export default defineConfig({
css:{
    preprocessorOptions:{
      scss:{
        additionalData:'@import "./src/assets/globel.scss";'
      }
    }
  }
})

//在globel.scss文件中定义的全局变量$borderColor:#ddd在后续可以直接使用，并生效
<style scoped lang="scss">
.el-aside {
  height: 100vh;
  border-right: 1px solid $borderColor;
}
</style>

vue3中引入element-plus时候，官方推荐按需引入，方式如下：

1、首先安装插件npm i -D element-plus；

2、推荐自动按需引入方法时需要安装另外两个插件：unplugin-vue-components  和 unplugin-auto-import

npm install -D unplugin-vue-components unplugin-auto-import

3、vite.config.js文件中配置：

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { defineConfig } from 'vite'
export default defineConfig({
  plugins: [
     AutoImport({
       resolvers: [ElementPlusResolver()],
     }),
     Components({
       resolvers: [ElementPlusResolver()],
     }),
  ]})

此时，在后续使用过程中会出现报错：在网上查了很久，很多小伙伴说是将安装版本更换为npm i element-plus@1.0.2-beta.28即可解决问题，但是试了没用，有的小伙伴们说是node版本问题导致，最终也没有弄明白具体是什么原因，望哪位知道的大神看到后能给解惑一下，谢谢！