前端UI框架ElementUl目前已经被广泛使用，其入门轻松、语法简洁、功能强悍，可以帮助我们快速完成网站开发，因此也深受开发者的喜欢。

今天就分享一下，如何利用 vue +ElementUI 分享一下如何来实现个人网站的开发，欢迎大家讨论和交流。

1. 利用 vue+webpack 创建项目

具体项目创建方法可以参考sumBlog

本次开发使用 vs code + node +element-ui，因此需要事先完成软件下载和安装：

vs code : https://code.visualstudio.com/

node： https://nodejs.org/en/download/

element-ui ： npm i element-ui -S

2. 网页结构设计

整体布局 采用 顶栏 + 侧栏 混搭的方式搭建：

先看一下目前的页面主题效果：

项目启动： npm run dev， 本地网址：http://localhost:8080

2.1 导航栏设计：

大家也可以按照自己喜欢的进行设计， 如elementui 官方例子：

***在建好的项目staock_insight/components/ 创建公用组件, 包括 common， dashboard， sidemenu，

这里分享一个小技巧， 可以使用Project Tree

│ ├─components│ │ ├─common│ │ │ ├─Grid.vue│ │ │ ├─i18n.js│ │ │ ├─I18n.vue│ │ │ ├─Table.vue│ │ │ └─Whole.vue│ │ ├─dashboard│ │ │ └─LineECharts.vue│ │ └─sidemenu│ │ └─SideMenu.vue

页面详情部分放到 staock_insight/page/, 具体结构：

2.2 代码解析：

Whole.vue 是用来实现网站整体导航栏部分的页面结构布局，通过 div 分区 + ElelemetUI el-menu 组件实现, 仿照 el-menu:

"activeIndex"class="el-menu-demo"mode="horizontal"@select="handleSelect"><el-menu-itemindex="1">处理中心