element ui+vue快速入门

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的输入框和按钮