新星计划打卡学习：VUE3引入element-plus-Toy模板网

这篇具有很好参考价值的文章主要介绍了新星计划打卡学习：VUE3引入element-plus。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、安装element-plus

2、安装按需导入插件

3、修改配置文件

4、添加页面内容

5、保存并重启项目

1、安装element-plus

官网说要想使用element-plus需要先进行安装，并给出了三种安装方式，我选择了第三种。

新星计划打卡学习：VUE3引入element-plus,arcgis,javascript,开发语言

报错了：

新星计划打卡学习：VUE3引入element-plus,arcgis,javascript,开发语言

解决的办法：

原因是没有安装pnpm，看此博主文章进行解决https://blog.csdn.net/weixin_51803498/article/details/128920452然后又报错了：

新星计划打卡学习：VUE3引入element-plus,arcgis,javascript,开发语言

解决办法：

npm : 无法加载文件 E:\NodeJS\npm.ps1，因为在此系统上禁止运行脚本【解决办法】_ynpm : 无法加载文件 e:\nodejs\node_global\ynpm.ps1_百思不得小赵的博客-CSDN博客

然后又报错了：

新星计划打卡学习：VUE3引入element-plus,arcgis,javascript,开发语言

解决办法：

以管理员的身份打开powershell，执行set-ExecutionPolicy RemoteSigned，然后输入Y

新星计划打卡学习：VUE3引入element-plus,arcgis,javascript,开发语言

然后继续去下载依赖效果如下--完美解决：

新星计划打卡学习：VUE3引入element-plus,arcgis,javascript,开发语言

2、安装按需导入插件

pnpm add -D unplugin-vue-components unplugin-auto-import

新星计划打卡学习：VUE3引入element-plus,arcgis,javascript,开发语言

3、修改配置文件

往配置文件里面加入以下两段代码

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),

新星计划打卡学习：VUE3引入element-plus,arcgis,javascript,开发语言

4、添加页面内容

新星计划打卡学习：VUE3引入element-plus,arcgis,javascript,开发语言

<script setup> 
</script>

<template>
  <el-row class="mb-4">
    <el-button disabled>Default</el-button>
    <el-button type="primary" disabled>Primary</el-button>
    <el-button type="success" disabled>Success</el-button>
    <el-button type="info" disabled>Info</el-button>
    <el-button type="warning" disabled>Warning</el-button>
    <el-button type="danger" disabled>Danger</el-button>
  </el-row>

  <el-row>
    <el-button plain disabled>Plain</el-button>
    <el-button type="primary" plain disabled>Primary</el-button>
    <el-button type="success" plain disabled>Success</el-button>
    <el-button type="info" plain disabled>Info</el-button>
    <el-button type="warning" plain disabled>Warning</el-button>
    <el-button type="danger" plain disabled>Danger</el-button>
  </el-row>
</template>

<style scoped>
</style>