Vite manual

MyFreeIT

已于 2024-04-22 17:21:33 修改

阅读量343

点赞数

分类专栏：前端文章标签： Vite

于 2023-07-06 17:58:16 首次发布

创作源自于MyFreeIT

本文链接：https://blog.youkuaiyun.com/MyFreeIT/article/details/131577954

版权

前端专栏收录该内容

33 篇文章

订阅专栏

这里写目录标题

npm run start

“start”: “vite --host 0.0.0.0 --port 83”,

–port 默認 80

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"/>