使用的两种方式
官网解释:
https://element.eleme.cn/#/zh-CN/component/installation
方式一:html 引入 js 和 css
应用场景:此方式适合一个一个的 HTML 文件,像使用 JQuery 和 bootstrap 那样,引入 js 和 css 文件
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
方式二:vue 单文件工程
应用场景:vue脚手架创建的工程、webpack创建的工程
通过 npm 命令安装,在工程根目录下执行下面命令:
npm i element-ui -S
修改main.js
修改 main.js 添加下面代码:
引入库和样式:
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
vue启用element ui:
Vue.use(ElementUI);
如下图:
测试是否成功
在页面添加按钮,如果能够看到效果,说明vue配置element UI 成功
修改 App.vue,添加下面按钮:
<el-button type="primary">主要按钮</el-button>
启动服务:
npm run serve
访问首页,正确显示 按钮,说明配置成功,页面如下:


