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

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


最后重启启动项目就好了

到这里第三期就结束了