下載ElementUI

• 推薦使用npm的方式安裝，它能更好的和webpack打包工具配合使用

npm i element-ui -S

按需引入ElementUI

• 有時候只需要引入ElementUI中的幾個組件，全局引入會增加項目的體積，所以按需引入更合適

例如：Message消息提示組件

• 在mian.js中引入并注冊組件

import {Message} from 'element-ui'

• 在main.js注冊，這里是掛載在Vue原型上的

Vue.prototype.$message = Message;

• 使用

<template><div id="app"><el-button type="primary" @click='clickBtn'>主要按鈕</el-button></div> </template> <script> export default {name: 'App',components: {},methods:{clickBtn:function(){this.$message({message:'這是一條提示信息'});}} } </script>

• 效果
  

全局引入

• 當我們在項目使用ElementUI組件比較多時，就可以全局引入，方便省事兒

• 在main.js中添加以下代碼全局引入

//引入elementui import ElementUI from 'element-ui' //樣式需要單獨引入 import 'element-ui/lib/theme-chalk/index.css' //掛載 Vue.use(ElementUI)

• 使用
  在app.vue中

<template><div id="app"><el-button type="primary" @click='clickBtn'>主要按鈕</el-button></div> </template>

• 相比按需引入，全局引入確實方便很多

總結

以上是生活随笔為你收集整理的Vue如何引入ElementUI进行使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。