成都做网站建设公司,梅州新农村建设网站,东莞形象设计公司,石家庄网站建设成功案例目录 Vue3项目中引入 ElementUI1.安装2.引入2.1 全局引入2.2 按需引入viteWebpack 3.使用 Vue3项目中引入 ElementUI
ElementUI是一个强大的PC端UI组件框架#xff0c;它不依赖于vue#xff0c;但是却是当前和vue配合做项目开发的一个比较好的ui框架#xff0c;其包含了布局… 目录 Vue3项目中引入 ElementUI1.安装2.引入2.1 全局引入2.2 按需引入viteWebpack 3.使用 Vue3项目中引入 ElementUI
ElementUI是一个强大的PC端UI组件框架它不依赖于vue但是却是当前和vue配合做项目开发的一个比较好的ui框架其包含了布局layout)容器container等各类组件基本上能满足日常网站的搭建开发。针对vue2和vue3都有对应的组件版本本文主要介绍在vue3中如何引入使用ElementUIvue3中升级为Element Plus。
1.安装
vue3中使用如下命令通过 npm 安装 ECharts本人项目使用的安装方式
$ npm install element-plus --save也可以使用其他的包管理起进行安装
# Yarn
$ yarn add element-plus# pnpm
$ pnpm install element-plus2.引入
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.vueconst 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
// 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/resolversexport default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})Webpack
// 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.使用
引入完毕之后我们可进行按需引入需要使用的组件使用方法如下引入input组件和button组件
templatedivel-input classinput v-modelinput typefile placeholderPlease input /el-button classbutton typeprimary文件处理/el-button/div
/templatescriptimport { ElButton, ElInput } from element-plusimport { ref } from vueexport default {components: { ElButton,ElInput },}/script
style scoped
.input {display: inline;margin: 20px 30px;
}
.button {width: 90px;
}
/style
效果如下 此外ElementUI中还有其他组件基本能满足开发需求提升开发效率详情请见官网ElementUI
注在vue3中由于vite打包拥有良好的性能本文使用的示例为vite打包方式同时建议使用其他包最新的支持版本进行开发。
