本文已参与「新人创作礼」活动，一起开启掘金创作之路

下载element-plus依赖

这里介绍一个简单的依赖导入的方法:使用Vue自带的可视化界面引入依赖。

在cmd中执行vue ui命令,等待输出Ready on http://localhost:8000之后，访问该地址
在Vue项目管理器中，选择导入Tab项，找到需要导入的项目，然后进入该项目的目录之后，点击导入这个文件夹即可将项目导入Vue项目管理器
在第一个项目Tab中已经有了刚刚选择的工程，双击进入该工程的设置，默认是进入项目依赖设置页面
以引入element-plus为例，点击右侧的安装依赖按钮，弹出搜索依赖的页面。由于我们的这个组件在运行时会使用，所以选择安装运行依赖
搜索element-plus，然后选中，再点击右下角的按钮进行安装，等待下载完成之后在运行依赖中会发现刚刚选择的组件。
关闭cmd命令窗口，开始进行项目整合注意：此处的下载速度和链接的npm源有关，建议使用阿里的源

按需引入

吐槽一下，一开始整合element-plus时还是使用vite-plugin-style-import这个依赖，现在又出来新的依赖了。话不多说，直接按照官网的开搞

下载插件yarn add -D unplugin-vue-components unplugin-auto-import
将vite.config.js改为vite.config.ts，将内容修改为如下所示

import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
const path = require('path')
// https://vitejs.dev/config/
export default ({ mode }) => {
  return {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    },
    plugins: [
      vue(),
      AutoImport({ resolvers: [ElementPlusResolver()] }),
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ]
  }
}

AutoImport和Components：按照官网的配置来设置按需加载
alias:指向路径简写设置，引入文件再也不用../../了，这里设置的是指向src目录

修改App.vue简写如下

<script setup lang="ts">
import HelloWorld from '@/components/HelloWorld.vue'
</script>
<template>
  <hello-world />
</template>

修改HelloWorld.vue简写如下

<template>
  <el-button type="primary">一刀999</el-button>
</template>

执行yarn dev,等待reloading page...结束之后访问项目即可看到一刀999的蓝色按钮

企业微信截图_16418974498642.png

其他：如果有需要可以删除logo图片，后期会替换为自己的logo

结语

欢迎关注我的掘金账号:juejin.cn/user/261290…
欢迎star我的git项目:gitee.com/liangminghu…
下期预告:集成集成vue-router，实现静态目录跳转

Vite+Vue3按需引入Element-Plus

下载element-plus依赖

按需引入

结语