elementplus

npm install element-plus --save

在ts项目中完整引入

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'//1
import 'element-plus/dist/index.css'//2
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)//3
app.mount('#app')

使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]//1
  }
}

全局引入后在项目中使用例子

<template>
  <div class="about">
    <h1>This is an about page</h1>
    {{ timer }}
    <el-button @click="add">button</el-button>
  </div>
</template>
<script lang="ts">
interface data {
  timer: number;
  double?: string;
}
export default {
  data(): data {
    return {
      timer: 1,
    };
  },
  methods: {
    add(): void {
      this.timer++;
      this.$message.success("ok");
    },
  },
};
</script>

自动导入elementplus(不包括非template中使用组件[如message之类的])

npm i unplugin-vue-components unplugin-auto-import -D

• vue.config.js

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
    configureWebpack: {
      plugins: [
        AutoImport({
          resolvers: [ElementPlusResolver()],
        }),
        Components({
          resolvers: [ElementPlusResolver()],
        }),
      ],
}
    }

<template>
    <div>
        <el-button>按钮</el-button>
    </div>
</template>

elementplus手动导入借助babel导入样式

// 可以引入全局样式，当然也可以进入文件查看，只引入el-button的css，basecss也需要引入
import { ElButton } from 'element-plus'

• babel.config.js:引入插件后配置

cnpm install babel-plugin-import -D

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'element-plus',
        customStyleName: (name) => {
		  // 注意查看：新版本的elementplus这里的路径已经修改了，根据实际需要去处理
          return `element-plus/lib/theme-chalk/${name}.css`
        }
      }
    ]
  ],
  presets: ['@vue/cli-plugin-babel/preset']
}

import {
  ElButton,
  ElTable,
  ElAlert,
  ElAside,
  ElAutocomplete,
  ElAvatar,
  ElBacktop,
  ElBadge,
} from 'element-plus'

const app = createApp(App)

const components = [
  ElButton,
  ElTable,
  ElAlert,
  ElAside,
  ElAutocomplete,
  ElAvatar,
  ElBacktop,
  ElBadge
]

for (const cpn of components) {
  app.component(cpn.name, cpn)
}