Vue项目使用Element Plus依赖

Element Plus的官方文档：快速开始 | Element Plus

这些都是我根据B站winWeb前端分享的个人空间_哔哩哔哩_Bilibili 

Vue项目使用Element Plus依赖有三种方法，完整引入，按需引入和手动引入。

在此之前我们需要先下载Element Plus

# npm
npm install element-plus -S

# yarn
yarn add element-plus -S

完整引入

这种引入方法在导入时会将所有依赖都进行打包（即使没用上的UI），如果对打包的大小不是很在乎可以使用这种办法。

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

const app = createApp(App)

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

在main.ts/js中import即可

按需引入

这种方法需要先下载额外的插件：unplugin-vue-components 和 unplugin-auto-import

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

然后修改vite.config.ts/js文件

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

export default defineConfig({
  // ...
  plugins: [
    vue(),
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

手动引入

需要安装 unplugin-element-plus 来导入样式。

npm install unplugin-element-plus -S

然后修改vite.config.ts/js文件

// vite.config.ts
import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  // ...
  plugins: [
    ...
    vue(),
    ElementPlus()
    ],
})

然后就可以在.vue界面中使用了

比如在vite自动生成的项目中修改HelloWorld.vue中的script

<script>
import { ref,defineComponent } from 'vue'
import {ElButton} from 'element-plus'

// 自动生成项目原来的代码
// defineProps({
//   msg: String
// })
//
// const count = ref(100)

export default defineComponent({
  components:{
    ElButton
  },
  setup() {
    const count = ref(0);
    return{
      count
    }
  }
})
</script>

可以和之前的完整引入和按需引入使用ElButton生成的效果一样。