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>