Element UI 安装
-
npm安装。
npm i element-ui -S
如果出现报错,请查看我的上一篇文章!
Element UI 引入
-
全局引入。
在 main.js 中写入以下内容:
import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) });
然后启动项目,如果没有报错,那就是成功啦。
npm run serve
-
按需引入。
这个适用于,当项目比较大的时候,按需引入就会使得文件打包后较小,在初学时,就会显得比较繁琐。
Element UI 使用
-
将项目中默认的组件HelloWorld删除,然后将项目中的主组件App的一些内容和样式删除,从element ui官网中找一个最基本的按钮,然后开始测试Element UI使用咯。
<template> <div id="app"> <el-button type="success">成功按钮</el-button> </div> </template> <script> export default { name: 'App', components: { } } </script> <style> </style>
-
运行结果。
测试完成后,就开始真正的项目编写了奥!
大家以后页面中想使用什么样式,就去element ui官网拉过来使用就可以了奥!