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

1. Element plus 官网:https://element-plus.gitee.io/zh-CN/
2. 安装 npm install element-plus --save
3. 它分是: 完整引入和按需引入,这里项目我是用element plus写的,就用完整引入
4. 在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)
  }
}

1
2
3
4
5
6
7
8
9
10

5. 在main.ts 中引入 element plus 插件

// 引入element plus
import elementPlus from './plugins/element-plus'
createApp(App)
  .use(router)
  .use(createPinia())
  .use(elementPlus)
  .mount('#app')
1
2
3
4
5
6
7

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

<template>
  <div>
    <el-button type="primary">Primary</el-button>
  </div>
</template>
1
2
3
4
5

7. 终端: npm run dev
8. 再在浏览器输入地址,就可以看到了
9. 如果感觉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 })
  }
}
1
2
3
4
5
6
7
8
9

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

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

11. 发现按钮变大了
12. 国际化, 后面再讲,目前使用是element plus 自带的
13. 看element plus 官网(https://element-plus.gitee.io/zh-CN/guide/i18n.html),
14. 直接在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>
1
2
3
4
5
6
7
8
9
10
11