elementui引入文件-Vue3项目中引入和使用ElementUI示例解读

Vue3项目中引入ElementUI

ElementUI是一个强大的PC端UI组件框架。 它不依赖于vue，但是是目前比较好的配合vue进行项目开发的ui框架。 它包括各种布局、容器等组件，基本可以满足网站的日常建设和开发。 vue2和vue3都有对应的组件版本。 本文主要介绍如何在vue3中引入和使用ElementUI（在vue3中升级到ElementPlus）。

1. 安装

在vue3中使用以下命令通过npm安装ECharts（我的项目使用的安装方法）

$ npm install element-plus --save

您还可以使用其他包管理器来安装：

# Yarn
$ yarn add element-plus
# pnpm
$ pnpm install element-plus

2. 介绍

element-plus分为全局导入和按需导入两种形式。 通常在工程项目中，由于全局导入会造成必要的资源加载，为了提高项目性能，建议按需导入。 下面我们介绍一下这两种导入形式。

2.1 全局介绍

全局导入是直接导入项目入口（main.ts）文件中的组件以及组件的所有样式文件； 代码如下：

// 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')

2.2 按需导入

根据需要在vue3中引入ElementUI，需要使用其他插件来辅助。 需要安装unplugin-vue-components和unplugin-auto-import这两个插件； 安装方法如下：

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

然后在vite或者webpack配置中添加相应的配置，如下图：

维特

// 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: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

网页包

// webpack.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 = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

如果日志在vue.config.js中，导出方法是一样的：

const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = defineConfig({
  configureWebpack: {
  	plugins: [
        AutoImport({
          resolvers: [ElementPlusResolver()],
        }),
        Components({
          resolvers: [ElementPlusResolver()],
        }),
      ],
  }
})

3.使用

导入完成后，我们就可以按需导入需要使用的组件了。 使用方法如下，导入输入组件和按钮组件

  

    
    文件处理
  


  import { ElButton, ElInput } from 'element-plus'
  import { ref } from 'vue'
  export default {
    components: { ElButton,ElInput },
  }


.input {
  display: inline;
  margin: 20px 30px;
}
.button {
  width: 90px;
}

疗效如下：

据悉，ElementUI中还有其他组件，基本可以满足开发需求elementui引入文件，提高开发效率。 详情请参考官网：ElementUI

注意：在vue3中，由于vite打包具有良好的性能elementui引入文件，本文示例使用的是vite打包方式，建议使用其他包最新支持的版本进行开发。

以上就是Vue3项目中ElementUI的介绍和使用示例解读的详细内容。 更多关于Vue3ElementUI的信息，请关注Scripter其他相关文章！