vue3项目，vite+vue3+ts+pinia(9)-初识ElementPlus

最新推荐文章于 2024-04-14 14:40:09 发布

ybilss

最新推荐文章于 2024-04-14 14:40:09 发布

阅读量336

点赞数

分类专栏： vue3 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ybilss/article/details/127894770

版权

vue3 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

本文档介绍了如何在Vue项目中安装和使用Element Plus UI库，包括完整引入和按需引入的方式。创建plugins文件夹，导入并配置Element Plus，然后在main.ts中引入并注册。此外，还展示了如何调整组件大小和实现国际化。在App.vue中配置locale属性即可实现中文本地化。

摘要由CSDN通过智能技术生成

Element plus 官网:https://element-plus.gitee.io/zh-CN/
安装 npm install element-plus --save
它分是: 完整引入和按需引入,这里项目我是用element plus写的,就用完整引入
在src目录下新建 plugins 文件, 再新建 element-plus.ts

import { App } from 'vue'
import elementPlus from 'element-plus'
import 'element-plus/dist/index.css'

export default {
  install (app: App) {
    app.use(elementPlus)
  }
}

在main.ts 中引入 element plus 插件

// 引入element plus
import elementPlus from './plugins/element-plus'
createApp(App)
  .use(router)
  .use(createPinia())
  .use(elementPlus)
  .mount('#app')

在src=> views => login => indexName.vue 中

<template>
  <div>
    <el-button type="primary">Primary</el-button>
  </div>
</template>

终端: npm run dev
再在浏览器输入地址,就可以看到了
如果感觉element plus 按钮大了,也可以全局设置,在 plgins => element-plus.ts

import { App } from 'vue'
import elementPlus from 'element-plus'
import 'element-plus/dist/index.css'

export default {
  install (app: App) {
    app.use(elementPlus, { size: 'small', zIndex: 2000 })
  }
}

也可以在局部设置 views => login => indexName.vue

<el-button type="primary" size="large">Primary</el-button>

发现按钮变大了
国际化, 后面再讲,目前使用是element plus 自带的
看element plus 官网(https://element-plus.gitee.io/zh-CN/guide/i18n.html),
直接在App.vue中,就okl了

<template>
  <el-config-provider :locale="locale">
    <router-view />
  </el-config-provider>
</template>

<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'
import locale from 'element-plus/dist/locale/zh-cn.mjs'

</script>