Element UI是Vue界不错的UI框架。
其实各个前端框架还有很多UI框架,你可以查看此文章了解更多UI框架 https://www.jianshu.com/p/0051e626b88b
今天我们看看如何使用它。
首先确保你已经安装vue框架。
接下来我们来安装element-ui
1 |
npm i element-ui -S |
这样就可以了
因为我的Vue是Laravel框架集成的,所以我们要来到 resources/js/app.js ,引入element-ui。
1 2 3 4 5 6 7 8 9 10 11 |
import ElementUI from 'element-ui' //引入element-ui import 'element-ui/lib/theme-chalk/index.css' //引入element-ui所需的css样式资源文件 Vue.use(ElementUI) //把引入的ElementUI装入我们的Vue /** * Next, we will create a fresh Vue application instance and attach it to * the page. Then, you may begin adding components to this application * or customize the JavaScript scaffolding to fit your unique needs. */ const app = new Vue({ el: '#app', }); |
好了,这样我们就可以使用Element里面的组件了
我们可以在
resources/js/components/ExampleComponent.vue
里面加入一个按钮
1 |
<el-button>默认按钮</el-button> |
运行你的应用应该就可以看到效果了。