使用 npm 的方式安裝，它能更好地和?webpack?打包工具配合使用。

npm i element-ui -S

在 web目錄src下main.js 中引用，并use

import ElementUI from 'element-ui';

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

Vue.use(ElementUI);

在HelloWorld.vue文件中，就可以直接調用組件了，使用也非常簡單，到官網中復制組件的代碼，填入需要的位置。

我這邊選取了菜單欄，加入HelloWorld中，home前面注冊了HelloWorld組件，這樣嵌入home的頁面都可以看到菜單欄，看一下成功引入后的結果：

layout布局：

<el-row>

<el-col:span="24">

<divclass="grid-contentbg-purple-dark">

</div></el-col></el-row>

Container布局容器：

<el-container>：外層容器。當子元素中包含?<el-header>?或?<el-footer>?時，全部子元素會垂直上下排列，否則會水平左右排列。

<el-header>：頂欄容器。

<el-aside>：側邊欄容器。

<el-main>：主要區域容器。

<el-footer>：底欄容器。

接下去的內容就大家根據需要自行填充了，頁面搭建按需各自完成，下面我將登陸頁面login.vue中的登錄框及登陸按鈕使用ElementUI，復制密碼驗證表單，初始化時這樣滴

修改后簡單的密碼框，為了下一章測試vue和koa的數據傳輸做準備。

下一章我們就開始測試vue和koa的數據傳輸！