【VUE专题】2. 零基础-ElementUI前端组件安装使用保姆级教程

📅 2026/7/8 10:55:43 👁️ 阅读次数 📝 编程学习
【VUE专题】2. 零基础-ElementUI前端组件安装使用保姆级教程

【VUE专题】2. 零基础-ElementUI前端组件安装使用保姆级教程

    • 第一步:安装
    • 第二步:导入
    • 第三步:测试

第一步:安装

详细参考ElementUI官网“快速开始”专栏:
https://element-plus.org/zh-CN/guide/quickstart

将新建好的VUE框架导入编译器后,在编译器中新建一个终端,在终端中输入如下命令,按回车(注意是在项目根目录下,如红色箭头所示):

npm install element-plus --save



至此,安装完成!

第二步:导入

找到main.js:

将如下内容复制粘贴至main.js中:

importElementPlusfrom'element-plus'import'element-plus/dist/index.css'//中文组件importzhCnfrom"element-plus/es/locale/lang/zh-cn"app.use(ElementPlus)app.mount('#app')

引入后,main.js最终内容修改为如下:

import'./assets/main.css'import'./assets/css/global.css'import{createApp}from'vue'importElementPlusfrom'element-plus'import'element-plus/dist/index.css'importAppfrom'./App.vue'importrouterfrom'./router'importzhCnfrom"element-plus/es/locale/lang/zh-cn"constapp=createApp(App)app.use(router)app.use(ElementPlus)app.mount('#app')

第三步:测试

打开ElementUI的“组件”页面,复制一段代码至App.vue,并运行该Vue框架,看相应样式能否正常显示。



成功!