Element UI 是一个用于开发 Web 应用的基于 Vue.js 的组件库。它提供了丰富的组件和友好的 API,帮助开发者快速构建现代 Web 应用。以下是 Element UI 的快速入门指南:
安装 Element UI
你可以通过 npm 或 yarn 安装 Element UI。
使用 npm 安装
npm install element-ui --save
使用 yarn 安装
yarn add element-ui
在 Vue 项目中使用 Element UI
引入 Element UI
在你的 Vue 项目的入口文件(通常是 main.js
)中引入 Element UI 和相关的样式。
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({
render: h => h(App),
}).$mount('#app');
创建一个简单的页面
1. 创建 Vue 组件
在你的 src
目录中创建一个新的 Vue 组件文件,例如 HelloWorld.vue
。
<template>
<div>
<el-button type="primary">Primary Button</el-button>
<el-input placeholder="Please input"></el-input>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
};
</script>
2. 使用组件
在 App.vue
中使用刚才创建的 HelloWorld
组件。
<template>
<div id="app">
<HelloWorld />
</div>
</template>
<script>
import HelloWorld from './HelloWorld.vue';
export default {
name: 'App',
components: {
HelloWorld
}
};
</script>
运行项目
npm run serve
打开浏览器访问 http://localhost:8080
,就可以看到一个element的输入框和按钮