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

運行結果：

點擊連接查看頁面。