VueCli@3中Elemnt的具体使用

ElementUI的使用

官方文档对vuecli@3/4的按需引入写的还是不太明确, 如果你看官方文档看的比较懵逼, 那不妨参照一下以下方法.
以下方法参照这位老哥在使用vuecli@3并引入element所踩得坑得出的比较简便的方法
https://blog.csdn.net/longlon...

vue-cli@4 文件中引入

vue create my-app  # vue-cli创建项目  
cd my-app  # 进入项目文件  
vue add element  # 添加element插件  
 Installing vue-cli-plugin-element...  
​  
#↓↓↓↓↓↓↓#  
​  
? How do you want to import Element? # 你想如何导入Element  
> Fully import  # 完全导入  
 Import on demand  # 按需导入  
   
? Choose the locale you want to load (zh-CN)  # 选择语言  
  Invoking generator for vue-cli-plugin-element...  
  Installing additional dependencies...

vue-cli@4 UI中引入

自定义主题样式

# 在线主题编辑器编辑样式
  1. https://element.eleme.cn/#/zh-CN/theme
  2. 下载自定义样式压缩包
  3. 解压到项目文件--> my_app --> theme
# 搭配插件按需引入组件主题
  修改babel.config.js配置 --> plugins --> styleLibraryName: "~theme"

plugins 插件配置文件

// 当用vue add 或者vue-cli ui添加完element插件后  
// 会在src中多出一个plugins的插件配置文件  
// 里面包括了所有第三方插件的配置, element的配置也在其中  
// plugins/element.js的配置主要作用是按需引入需要的组件  
import Vue from "vue";  
import { Button } from "element-ui";  
Vue.use(Button);

.vue 组件中使用

<template>  
 <div>  
 <el-button>Click Me</el-button>  
 </div>  
</template>  
​  
<script>  
 export default {}  
</script>  
​  
<style>  
</style>