当前位置:   article > 正文

系列六、Vue Cli3安装element-ui(命令行方式)_vue3安装element

vue3安装element

一、概述

        Element-UI是一套为开发者、设计师和产品经理准本的基于Vue2.0的桌面端组件库。官网地址:

https://element.eleme.cn/#/zh-CN

说明:element-ui是基于Vue2.0的,Vue3安装的是element-plus 

二、初始化项目

vue create vue-cli3-elementplus

 三、验证安装是否成功

 

四、安装element-plus 

npm install element-plus --save

 4.1、package.json中的变化

4.2、main.js 中配置

  1. import ElementPlus from 'element-plus'
  2. import 'element-plus/theme-chalk/index.css'
  3. createApp(App).use(router).use(ElementPlus).mount('#app')

五、App.vue添加element-ui组件

  1. <el-row>
  2. <el-button round>圆角按钮</el-button>
  3. <el-button type="primary" round>主要按钮</el-button>
  4. <el-button type="success" round>成功按钮</el-button>
  5. <el-button type="info" round>信息按钮</el-button>
  6. <el-button type="warning" round>警告按钮</el-button>
  7. <el-button type="danger" round>危险按钮</el-button>
  8. </el-row>

六、启动项目验证element-ui安装是否成功 

npm run serve

七、项目源码 

  1. 链接:https://pan.baidu.com/s/19ASFVl6qGAeHwyPfGpbwKA?pwd=yyds
  2. 提取码:yyds

八、参考

https://blog.csdn.net/qq_44017116/article/details/127713704

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/118049
推荐阅读
相关标签
  

闽ICP备14008679号