Element-ui安装与使用（网站快速成型工具）

我之因此将Element归类为Vue.js，其主要缘由是Element是（饿了么团队）基于MVVM框架Vue开源出来的一套前端ui组件。我最爱的就是它的布局容器！！！

下面进入正题：

一、Element的安装

首先你须要建立一个Vue初始项目，再在初始项目中进行安装~初始项目的建立参见我以前的博客：Vue项目初始化

经过cd命令进入想要安装Element的目录（即上一步初始化获得的Vue项目）：

cd D:
cd D:\WebstormProjects\test_vuecli

安装Element：

npm i element-ui -S

安装完成后能够在 \test_vuecli\node_modules\目录下找到element-ui，还能够在项目根目录\test_vuecli\下的package.json文件中的dependencies项中找到element-ui的版本信息，如："element-ui": "^2.4.4"

二、使用Element

（1）Element的引入

在项目\test_vuecli\src\目录下的main.js文件中写入如下内容：

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({
  el: '#app',
  render: h => h(App)
});

以上代码便完成了 Element 的引入，须要注意的是，样式文件须要单独引入（即index.css）。

（2）使用Element组件

以分页样式组件为例，咱们在Element官网组件中找到了Pagination 分页项。

 

 

假设咱们选定“带背景色的分页”，查看源代码（源码很是简洁）：

 

<el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>

 

接下来在\test_vuecli\src\components\目录下建立名为paging.vue的组件，直接将上面的源代码复制到<template><div></div></template>标签中。

（3）加载Element组件

在第（2）步建立paging,vue时，会自动生成如下代码：

<script>
    export default {
        name: "paging"
    }
</script>

目的是方便咱们加载该组件,组件名为“paging”，接下来找到项目入口文件App.vue，在须要放分页的地方加上<paging></paging>

<el-footer>
    <!--分页-->
　　<paging></paging>
</el-footer>

并在App.vue文件的<script></script>中添加如下代码：

import paging from './components/paging.vue'
export default {
    name:'App',
    components:{
      paging
    }
  };

保存后运行项目：在Webstrom中的左下角点击npm，右键start→run start

运行结果：

点击连接查看页面。