vue使用elementUI组件，写一个简单的前端页面
以下是一个使用Vue和Element UI创建简单前端页面的示例代码：
首先，确保你已经安装了Vue和Element UI。
npm install vue
npm install element-ui然后，你可以创建一个简单的Vue组件，使用Element UI组件：
<template>
<div>
<el-button @click="handleClick">点击我</el-button>
<el-input v-model="input" placeholder="请输入内容"></el-input>
</div>
</template>
<script>
import Vue from 'vue';
import { Button, Input } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Button);
Vue.use(Input);
export default {
data() {
return {
input: ''
};
},
methods: {
handleClick() {
alert('按钮被点击，输入的内容是：' + this.input);
}
}
};
</script>最后，在你的主文件（main.js或者app.js）中引入Vue和Element UI的样式，并初始化Vue实例：
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)
});确保你的HTML文件中有一个id为app的元素作为Vue实例挂载的点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Element UI Example</title>
<!-- 引入Vue实例化的主文件 -->
<script src="path/to/your/main.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>这样，你就创建了一个简单的Vue页面，使用了Element UI的按钮和输入框组件。
评论已关闭