Element快速入门
Element快速入门
-
安装ElementUI组件库(在当前工程的目录下),在命令行执行指令:
yarn add element-ui
-
引入ElementUI组件库:在main.js文件中新增
import ElementUI from "element-ui"; import "element-ui/lib/theme-chalk/index.css"; Vue.use(ElementUI);
-
在
views
目录下新建文件夹elements
用来存储element的组件, 并添加文件ElementView.vue
(文件名注意用驼峰式命名,否则报错), 文件内容如下
<template>
<div>
</div>
</template>
<script>
</script>
<style>
</style>
- 官网查找需要的示例代码,粘贴到
<div>...</div>
之间。
<template>
<div>
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
</div>
</template>
<script>
</script>
<style>
</style>
- 在
App.vue
中引用ElementView.vue
,(注意:这里有vue代码自动补全功能,如果没有,需要安装vscode插件vetur)
<template>
<div>
<!-- <h1>{{ message }}</h1> -->
<element-view></element-view>
</div>
</template>
<script>
import ElementView from './views/element/ElementView.vue'
export default{
components: { ElementView },
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>