vue element ui - 安装、使用的两种方式

使用的两种方式

官网解释:
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

访问首页,正确显示 按钮,说明配置成功,页面如下:


原文出处:/show_1IX6m27Ai1Ca.html