Vue与ElementUI整合使用

版权声明：转载请标注来向，[email protected] https://blog.csdn.net/weixin_43993307/article/details/86219624

1.打开vue项目，推荐使用webstrom我这里用的是Sublime Text，在控制台输入如下命令下载elementui

npm i element-ui -S

2.打开mian.js文件，修改部分代码如下引入相关文件，

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

3.现在就可以在vue中使用elementui组件了

  <template>
  <div id="app">
  		<router-link to="/message">消息提示</router-link>
  		<router-link to="/index">主页</router-link>
  		<div class="button">
		 <el-row>
		  <el-button type="primary" plain @click="buttonClick">点击显示test</el-button>
		</el-row>	
	 </div>
	 <div class="test">
	 	<span v-if="state"> this is test </span>
	 </div>
  </div>
</template>
<script>
export default {
  name: 'Test',
  data() {
  	return {
  	  	state: false
  	}
  },
  methods: {
  	buttonClick (data){
  	 this.state = true;
  	}
  }
}
</script>
<style scoped>
</style>