【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框架，看相应样式能否正常显示。



成功！