vue使用elementUI组件，写一个简单的前端页面

前面我们介绍了关于如何创建一个vue工程以及在vue工程中下载elementUI组件，接下来我们使用这些组件来写一个简单的前端页面。

一.vue目录结构

首先我们先熟悉vue的目录结构，如图所示。根据目录结构了解我们在哪写前端界面。

1.node_modules

该文件夹是安装node后用来存放本项目所需要的各类包文件。内容包括我们封装好的一些JavaScript方法、json数据以及编译过的C/C++拓展等

2.public

用于存放静态资源，如图片、字体等，可以使用/开头直接访问public 目录下的资源。

3.src

用来存放源代码的文件夹包括assets、component、router、views、app.vue、main.js等

assets: 存放静态资源文件，包括公共的 css 文件、 js 文件、字体、图片等。
components: 存放通用模块组件。主要包含项目中常用的一些模块。
router: 放置路由设置文件，指定路由对应的组件；
App.vue: 根组件
main.js: 入口 js 文件

4.package.json

项目的配置文件，常见的配置有配置项目启动、打包命令，声明依赖包，版本号等。

5.vue.config.js

项目配置文件，可以对一些基础项目以及拓展项目进行配置。例如指定文件生成路径以及上次我们用到的修改端口号等。

二.引入ElementUI组件库

在main.js文件中插入以下代码：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

三.创建vue文件

在views文件下创建新的vue文件。例如我们创建ElementView.vue（这里采用驼峰命名或者-命名不然可能会报错，或者跟改配置文件，可以自行百度）。

在ElementView中新建三个空白模块template（模板部分用来生成HTML文件）、script（控制数据的来源以及行为）、style（css样式部分）。

<template>
    
</template>
<script>
export default {
    
}
</script>

<style>

</style>

进入element官网， 找一个喜欢的组件。我们以table表格组件为例。

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
</template>
<script>
export default {
    data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
}
</script>

<style>

</style>

保存，然后在app.vue中引入该项目，完成后运行项目。

<template>
  <div id="app">
   <ElementView></ElementView>
  </div>
</template>

<script>
import ElementView from './views/ElementView.vue'
export default {
  components: { ElementView },
  
}
</script>>
<style>

</style>

 运行完成后打开链接。

网页成功打开。这里可以根据自身情况参考element官网文档去完成跟多的组件引用 。

到这里我们就完成了一个简单的element的组件引用展示。