一个具有基本增删改查功能的通讯录，数据保存在本地的localStorage中。
demo地址: https://junjunhuahua.github.io
1. 所用技术
js框架: vue2 https://cn.vuejs.org/
ui框架: elementUI http://element.eleme.io/#/zh-CN
脚手架: vue-cli
单页: vue-router https://router.vuejs.org/zh-cn/
模块打包: webpack
2. 脚手架搭建
# 全局安装 vue-cli$ npm install -g vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack contact
$ cd contact
# 安装依赖
$ npm install
$ npm run dev
这是vue官方基于webpack的脚手架，run dev后浏览器会自动打开localhost:8080,也可以使用run build命令，执行build命令后会自动将src目录中的内容进行编译打包压缩，然后在dist目录中可以看到这些文件
3. 目录结构
项目根目录：
build为构建项目所用的node代码，config为构建时的一些配置项，dist为打包后(npm run build 用于发布)的代码，node_modules为node模块，src为开发时所用的代码。
src目录：
assets为全局css,图片,以及一些工具类的js，components为vue的组件，router为路由配置，app.vue为主页面的组件，config.js为目录配置项，main.js为入口js
4. main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import utils from './assets/utils.js'
import 'element-ui/lib/theme-chalk/index.css'
import './assets/normalize.css'Vue.use(ElementUI)
Vue.use(utils)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
ElementUI,
template: '<App/>',
components: { App }
})
main.js的主要工作是引入一些框架，全局css，以及工具函数，还会处理vue组件的加载，最后实例化vue。
5. App.vue
.vue文件是什么? https://cn.vuejs.org/v2/guide/single-file-components.html
App.vue可以认为是应用最外层的一个容器。
<template>
<div id="app">
<div class="app-left">
<el-row class="tac">
<el-col>
<el-menu :default-active="menuIndex" class="el-menu-vertical-demo"
background-color="#545c64" text-color="#fff" :unique-opened="menuUniqueOpen" :router="menuRouter"
active-text-color="#ffd04b">
