使用vite初始化vue3项目，并添加iconify库

本文最后更新于1 分钟前，文中所描述的信息可能已发生改变。

一、初始化项目

创建项目

在要创建的文件夹下，执行命令：

我的node版本是16.20.2，所以用了4.4.0版本

bash

npm init vite@4.4.0

根据提示先输入项目名称，这里为init_project, 然后选择Vue, 然后选择JavaScript, 详细如下：

bash

C:\Users\formero>npm init vite@4.4.0
Need to install the following packages:
  create-vite@4.4.0
Ok to proceed? (y) y
√ Project name: ... init_project
√ Select a framework: » Vue
√ Select a variant: » JavaScript

Scaffolding project in C:\Users\formero\Desktop\projects\vite_vue3_init\init_project...

Done. Now run:

cd init_project
npm install
npm run dev

这样基于vite的vue3项目就创建好了。

二、引入组件自动导入插件

安装插件

bash

npm install --save-dev unplugin-vue-components unplugin-auto-import

插件介绍

unplugin-auto-import插件的作用是自动导入第三方库或组件。它会根据我们在代码中使用的标识符自动检测并导入相应的库或组件。这样，我们就不需要手动导入它们了。

unplugin-vue-components插件的作用是自动注册Vue组件。它会根据我们在代码中使用的组件标签自动注册相应的组件。这样，我们就不需要在每个页面或组件中手动注册它们了。

在vite.config.js中添加插件配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        'vue',
        'vue-router',
        // 其他需要自动导入的库
      ],
    }),
    Components({
      // 配置需要自动注册的组件
      dts: true,
      resolvers: [
        (name) => {
          return { importName: name.slice(4), path: `@/components/${name}.vue` }
        },
      ],
    }),
  ],
})

三、添加iconify库

安装iconify库

bash

npm install unplugin-icons @iconify/json @iconify/vue -D

unplugin-icons插件的作用是自动导入图标。它会根据我们在代码中使用的图标名称自动检测并导入相应的图标。这样，我们就不需要手动导入它们了。

@iconify/json是图标库的json文件

@iconify/vue是图标库的vue组件。

修改vite.config.js文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        'vue',
        'vue-router',
        // 其他需要自动导入的库
      ],
    }),
    Components({
      // 配置需要自动注册的组件
      dts: true,
      resolvers: [
        IconsResolver()
      ],
    }),
    Icons({
      compiler: 'vue3',
      autoInstall: true,
      scale: 1,
      defaultClass: 'inline-block',
    }),
  ],
})

在HelloWorld.vue中添加图标

vue

  <div class="logo">222<IconIcBaselineBampaign /></div>
  <i-mdi-white-balance-sunny/>
  <i-carbon-accessibility/>
  <i-mdi-account-box/>

这样就可以直接使用iconify图标了

一、初始化项目 ​

二、引入组件自动导入插件 ​

三、添加iconify库 ​

一、初始化项目

二、引入组件自动导入插件

三、添加iconify库