vue3的项目main中引入element-plus

npm安装element-plus

npm install element-plus --save

element-plus安装官网链接

 安装 | Element Plus

main.js引入

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'



createApp(App).use(store).use(ElementPlus).use(router).mount('#app')

这是全局引入,测试一下

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

<script lang="ts">
</script>

 图片中是element-plus的按钮组件效果如下

 

### 安装和配置 Element Plus #### 创建 Vue 3 项目 为了开始集成 Element Plus,首先需要拥有一个基于 Vue 3项目环境。如果尚未创建,则可以通过 `@vue/cli` 或者 Vite 来快速构建一个新的应用实例[^1]。 对于采用 Vite 构建的应用程序而言,在初始化阶段可以选择定制化选项来确保使用的是最新版的 Vue 版本,并且可以在后续过程中单独添加所需的插件和服务[^3]。 #### 安装 Element Plus 库 一旦拥有了合适的开发环境之后,就可以通过 npm 或 yarn 命令行工具轻松地将 Element Plus 添加到项目的依赖列表中: ```bash npm install element-plus --save ``` 或者如果是 Yarn 用户则执行如下命令: ```bash yarn add element-plus ``` 这会下载并安装必要的文件至 node_modules 文件夹内以便于稍后的导入操作[^4]。 #### 配置全局样式与按需加载 为了让应用程序能够识别来自 Element Plus 组件库中的 CSS 类名和其他资源,默认情况下建议在 main.js/main.ts 中引入整个设计系统的公共样式表;然而考虑到性能优化的需求,也可以借助诸如 unplugin-vue-components 和 vite-plugin-style-import 插件实现更精细粒度上的控制——仅当页面实际请求某个特定组件时才去异步获取对应的外观定义。 ```javascript // main.js or main.ts import { createApp } from &#39;vue&#39; import App from &#39;./App.vue&#39; const app = createApp(App) app.use(ElementPlus) app.mount(&#39;#app&#39;) ``` 上述代码片段展示了最简单的全量引入方式,而针对生产环境中追求极致效率的情况,应该考虑按照官方文档指导完成更加复杂的设置过程以支持懒加载特性。 #### 动态主题色及深色模式切换的支持 除了基本的功能外,还可以利用 VueUse 提供的一系列实用函数进一步增强用户体验,例如允许用户自定义界面颜色方案或是便捷地启用夜间视觉效果等功能点都变得异常简单易行[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值