element-ui（PC端）的安装与使用

网站：https://element.eleme.cn/#/zh-CN/component/carousel

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

使用：

1. 文件终端输入npm i element-ui -S ——>回车

2. 检查package.json

3.启动项目 npm run serve

例如想完成这样的页面布局

将以下代码复制到.vue文件中

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
    <el-footer>Footer</el-footer>
  </el-container>
</el-container>

将以下css代码复制到style中

<style scoped>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
</style>

将以下代码复制到入口文件App.vue中

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

即可实现