这里写目录标题
npm run start
“start”: “vite --host 0.0.0.0 --port 83”,
Init file
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
Vite.config.ts 配置自动导入
Element plus, 其他组件也一样,您需要使用额外的插件来导入要使用的组件。
npm install -D unplugin-vue-components unplugin-auto-import
pnpm add -D unplugin-auto-import
pnpm add -D unplugin-vue-components
AutoImport({
resolvers: [ElementPlusResolver()],
eslintrc: {
enabled: true,
filepath: './.eslintrc-auto-import.json',
globalsPropValue: true
}
}),
Components({
resolvers: [ElementPlusResolver()]
})
生成两个文件
成功安装后,在项目的根目录下生成两个文件
auto-imports.d.ts
/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// noinspection JSUnusedGlobalSymbols
// Generated by unplugin-auto-import
export {}
declare global {
const ElMessage: typeof import('element-plus/es')['ElMessage']
}
components.d.ts
/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {}
declare module 'vue' {
export interface GlobalComponents {
ElButton: typeof import('element-plus/es')['ElButton']
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']
WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
}
}
配置Eslint
- 在vite.config.ts导入Eslint文件
eslintrc: {
enabled: true,
filepath: './.eslintrc-auto-import.json',
globalsPropValue: true
}
- 生成.eslintrc-auto-import.json文件
{
"globals": {
"ElMessage": true
}
}
- .eslintrc.cjs 包含进来 …eslintrc-auto-import文件,让Eslint可以检测到
extends: [
'./.eslintrc-auto-import.json',
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-typescript',
'@vue/eslint-config-prettier/skip-formatting'
],
vite 使用 svg
安装依赖
npm install vite-plugin-svg-icons -D
配置 vite.config.ts
import { createSvgIconsPlugin } from ‘vite-plugin-svg-icons’
//svg plugin
createSvgIconsPlugin({
iconDirs: [resolve(process.cwd(), 'src/assets/icons')],
symbolId: 'icon-[dir]-[name]'
}),
编写 IconSvg.vue
<script lang="ts" setup>
defineProps({
prefix:{
type:String,
default:'#icon-'
},
name:String,
color:{
type:String,
default:''
},
width:{
type:String,
default:'16px'
},
height:{
type:String,
default:'16px'
}
})
</script>
<template>
<svg :style="{width,height}">
<use :xlink:href="prefix+name" :fill="color"></use>
</svg>
</template>
使用
<IconSvg name="icon-vend-48" width="24px" height="24px"/>