vue3 + vite + element puls + auto import + eslint

tolure

已于 2023-08-24 15:22:59 修改

阅读量255

点赞数

文章标签： vue.js javascript 前端

于 2023-08-24 15:13:51 首次发布

本文链接：https://blog.csdn.net/u010726020/article/details/132474933

版权

本文介绍了如何使用Vue3和Vite创建项目，包括项目初始化、依赖管理、AutoImport插件的配置、解决eslint冲突以及组件命名的最佳实践。重点提到了`script-setup`语法和递归组件的注意事项。

摘要由CSDN通过智能技术生成

vue3使用vite创建项目，项目初始化配置及插件引入使用

版本号

Tips：创建项目命令：npm create vue@latest

{
  "dependencies": {
    "vue": "^3.3.4"
  },
  "devDependencies"：{
    "eslint": "^8.46.0",
    "eslint-plugin-vue": "^9.16.1",
    "unplugin-auto-import": "^0.16.6",
    "unplugin-vue-components": "^0.25.1",
    "vite": "^4.4.9",
    "vite-plugin-vue-setup-extend": "^0.4.0"
  }
}

AutoImport Element pluh & Vue

Element此引入方式为官方推荐，AutoImport同时支持自动引入vue常用变量，例如：ref、reactive、vue-touter、onMounted...，自动引入后页面不需要再收到引入即可直接使用

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue','vue-router'],
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ]
})

eslint

使用自动引入后，在页面直接使用ref、reactive这些变量的时候，会提示undefined，此时需要针对配置eslint

在AutoImport中加入eslintrc会生成eslint的配置文件，改文件生产一次即可，后续有新的自动映入需要配置eslint的时候再设置为true，重新生成

AutoImport({
   eslintrc: {
      enabled: false,  // 1、改为true用于生成eslint配置。2、生成后改回false，避免重复生成消耗
   },
}),

在生成的配置文件.eslintrc.cjs里加上配置

module.exports = {
	'extends': [
    //新加上该配置
		"./.eslintrc-auto-import.json",
  ],
}

设置完成之后就不会再报因为自动引入导致的代码规范提示

组件命名

Vue3使用script-setup语法糖后，使用原有的方式对对面命名存在一定的不便与弊端，这里推荐使用插件，在script标签上对组件进行命名，使用方式类似上面的字段引入，在vite.config.js的插件配置plugins中加入setup扩张组件，即可在script标签上进行命名

Tips：使用递归组件时，组件一定需要有命名

vite.config.js

import VueSetupExtend from 'vite-plugin-vue-setup-extend'

plugins: [
    VueSetupExtend()
]

vue 组件

<script setup name="menu-item">
defineProps({
    data: {
        type: Object,
        required: true,
        default: () => ({})
    }
})
</script>