vue后台管理系统从0到1（3）element plus 的三种导入方式

element plus 引入方式

官方网址：https://element-plus.org/zh-CN/guide/quickstart.html

完整引入

根据官网提升，首先在 main.js 中引入代码

在我们上一期的代码中加入以下三条代码

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

然后我们测试一下，是否引入成功，在app.vue中加入一个按钮

Main.vue

<script setup>

</script>

<template>
helloworld
  <RouterView></RouterView>
  <el-button>默认按钮</el-button>
</template>

<style scoped>

</style>

运行代码看浏览器

这种方式引入成功

按需导入

第一步先下载插件

 npm install -D unplugin-vue-components unplugin-auto-import

第二部在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 { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
      vue(),
      AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
       Components({
       resolvers: [ElementPlusResolver()],
     }),
  ],
  resolve: {
    alias: [
      {
        find:"@",
        replacement:"/src"
      }
    ]
  },
});

然后我们先去把上次的全部导入的代码注释掉

在main.js中注释掉这三行代码

重新启动程序
发现依旧可以显示按钮，配置成功

手动导入

第一步，下载插件

npm install  unplugin-element-plus -D

第二步，修改配置文件

加入这两句

import ElementPlus from 'unplugin-element-plus/vite'
 plugins: [
      vue(),
      ElementPlus()
    //   AutoImport({
    //   resolvers: [ElementPlusResolver()],
    // }),
    //    Components({
    //    resolvers: [ElementPlusResolver()],
    //  }),
  ],

完整配置代码如下

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 { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  plugins: [
      vue(),
      ElementPlus()
    //   AutoImport({
    //   resolvers: [ElementPlusResolver()],
    // }),
    //    Components({
    //    resolvers: [ElementPlusResolver()],
    //  }),
  ],
  resolve: {
    alias: [
      {
        find:"@",
        replacement:"/src"
      }
    ]
  },
});

第三步，在使用按钮的地方导入

App.vue

<script>
import { ElButton } from 'element-plus'
export default {
  components: { ElButton },
}
</script>

<template>
helloworld
  <RouterView></RouterView>
  <el-button>默认按钮</el-button>
</template>

<style scoped>

</style>

重启项目

查看按钮状态：

配置成功！！！！

最后，我们使用第二种，按需导入

删除 App.vue script 代码

注释掉两行加入的代码在vite.config.js

重新取消注释的上面三行导入代码，和下面两行配置代码


最后重启启动项目就好了

到这里第三期就结束了