如何利用vue+vue-router+elementUI实现简易通讯录

# 全局安装 vue-cli

$ npm install -g vue-cli

# 创建一个基于 webpack 模板的新项目

$ vue init webpack contact

$ cd contact

# 安装依赖

$ npm install

$ npm run dev

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 }
})

<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">
   <h3>我的应用</h3>
   <template v-for="(item, index) in menuData">
    <!-- 此处的index需显示转换为string，否则会报warn -->
    <el-submenu :index="'' + (index + 1)">
    <template slot="title">{{ item.name }}</template>
    <template v-for="(subItem, i) in item.value">
     <!-- 此处index格式为父级的index加上下划线加上当前的index，index都需加1 -->
     <router-link tag="span" :to="subItem.path">
     <el-menu-item :index="subItem.name">{{ subItem.title }}</el-menu-item>
     </router-link>
    </template>
    </el-submenu>
   </template>
   </el-menu>
  </el-col>
  </el-row>
 </div>
 <div class="app-right">
  <router-view></router-view>
 </div>
 </div>
</template>

<script>
 import menuData from './config'

 export default {
 name: 'app',
 data () {
  return {
  menuData,
  menuIndex: '', // 菜单当前所在位置
  menuUniqueOpen: true, // 菜单项是否唯一开启
  menuRouter: true // 是否开启路由模式
  }
 },
 mounted: function () {
  ...
 },
 watch: {
  '$route' (to) {
  this.menuIndex = to.name
  }
 }
 }
</script>

Vue.use(VueRouter)
let myRouter = new VueRouter({
 routes: [
 {
  path: '*',
  component: () => import('../components/NotFoundComponent.vue')
 },
 {
  path: '/',
  redirect: '/contact'
 },
 {
  path: '/contact',
  name: 'Contact',
  component: () => import('../components/contact/List.vue')
 },
 {
  path: '/contact/edit',
  name: 'Contact',
  component: () => import('../components/contact/Edit.vue')
 },
 {
  path: '/account',
  name: 'Account',
  component: () => import('../components/account/list.vue')
 }
 ]
})

<template>
 <div class="contact-list">
 <div class="contact-list-header">
  <el-button @click="goToNew" type="primary">新增联系人</el-button>
 </div>
 <div class="contact-list-content">
  <template>
  <div class="contact-list-wrap">
   <h3>高级检索</h3>
   <el-form ref="contactSearch" :model="searchParams" :inline=true>
   <el-form-item label="姓名">
    <el-input v-model="searchParams.name" placeholder="请输入需要检索的姓名"></el-input>
   </el-form-item>
   </el-form>
   <el-button type="primary" size="mini" round @click="contactSearch('contactSearch')">搜索</el-button>
  </div>
  <div class="contact-list-wrap">
   <h3>联系人列表</h3>
   <el-table
   :data="listNewData"
   style="width: 100%"
   @row-click="viewContact"
   :default-sort="{prop: 'name', order: 'descending'}"
   >
   <el-table-column
    label="姓名"
    prop="name"
    sortable
    width="180">
   </el-table-column>
　　　　　　　　...
   <el-table-column
    label="功能">
    <template scope="scope">
    <el-button size="mini" type="primary" @click.stop="editContact(scope)">编辑</el-button>
    <el-button size="mini" @click.stop="deleteContact(scope)">删除</el-button>
    </template>
   </el-table-column>
   </el-table>
  </div>
  </template>
 </div>
 <contact-view ref="contactView" :viewData="curData" :viewShow.sync="viewShow"></contact-view>
 </div>
</template>

<script>
 import contactView from './View.vue'

 export default {
 data () { ... },
 components: {
  contactView
 },
 computed: {
  listNewData: function () { ... },
 mounted: function () {
  this.listData = this.utils.getLocalStorage('vueContact')
 },
 methods: {
  goToNew: function () {
  this.$router.push('/contact/edit')
  },
  sexFormatter: function (row) { ... },
  deleteContact: function (res) {
  let data = res.row
  this.$confirm('此操作将永久删除该联系人, 是否继续"htmlcode">

<template>
 <div class="contact-view">
 <el-dialog :before-close="closePop" ref="myDialog" :visible="viewShow">
  <el-form :model="viewData" label-width="60px">
  <el-form-item label="姓名" prop="name">
   <el-input :readonly="true" v-model="viewData.name"></el-input>
  </el-form-item>
  ...
  <el-form-item label="备注">
   <el-input :readonly="true" type="textarea" v-model="viewData.desc"></el-input>
  </el-form-item>
  </el-form>
 </el-dialog>
 </div>
</template>

<script>
 export default {
 props: ['viewShow', 'viewData'],
 methods: {
  closePop: function () {
  // 需手动关闭弹窗,找到父组件中调用的地方进行事件的触发
  this.$parent.$refs.contactView.$emit('update:viewShow', false)
  }
 }

 }
</script>



这里有个比较值得注意的点，就是关闭查看弹窗，弹窗的开启关闭状态通过list也就是父级中的viewShow来控制，viewShow通过view也就是子级中的props流入到子级中，但是vue中的数据流向是默认是单向的，想要子级中修改父级属性必须使用emit，详见上面代码。
这里原先使用elementUI的dialog组件的自己的关闭，会报错，只能自己修改了。
ps: 为什么这里不用vuex处理父子组件的通信？因为如果是一个大型的后台管理系统，像这样的情况会经常发生，如果都放在vuex中管理，那vuex的体积会非常庞大，反而不利于维护。
8. 联系人编辑(新增)页 --- edit.vue


<template>
 <div class="contact-edit">
 <el-form ref="contactForm" :model="form" :rules="rules" label-width="80px">
  <el-form-item label="姓名" prop="name">
  <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="性别">
  <el-select v-model="form.sex" placeholder="请选择性别">
   <el-option label="男" value="male"></el-option>
   <el-option label="女" value="female"></el-option>
  </el-select>
  </el-form-item>
　　　　...
  <el-form-item label="备注">
  <el-input type="textarea" v-model="form.desc"></el-input>
  </el-form-item>
  <el-form-item>
  <el-button type="primary" @click="onSubmit('contactForm')">{{ btnName }}</el-button>
  <el-button @click="cancelForm">取消</el-button>
  </el-form-item>
 </el-form>
 </div>
</template>

<script>
 export default {
 data () {
  var nameValid = (rule, value, callback) => {
  if (!value) {
   callback(new Error('姓名不能为空'))
  } else {
   callback()
  }
  }
  var mobileValid = (rule, value, callback) => {
  let phonePattern = /(^\s*$)|(^[1][3,4,5,7,8][0-9]{9}$)/
  if (value && !phonePattern.test(value)) {
   callback(new Error('手机号格式不正确'))
  } else {
   callback()
  }
  }
  return {
  type: '', // 控制是否是新建
  ...
  rules: {
   name: [{validator: nameValid, trigger: 'blur'}],
   mobile: [
//   {required: true, message: '手机号不能为空', trigger: 'blur'},
   {validator: mobileValid, trigger: 'blur'}
   ]
  }
  }
 },
 // 组件加载后的钩子
 mounted: function () {
  this.checkPageStatus(this.$route.query.id)
 },
 // 路由在组件中的钩子
 beforeRouteUpdate: function (to, from, next) {
  this.checkPageStatus(to.query.id)
  next()
 },
 methods: {
  // 检查页面是新建还是编辑
  checkPageStatus: function (id) { ... },
  cancelForm: function () {
  this.$router.push('/contact')
  },
  onSubmit: function (formName) { ... }
 }
 }
</script>


可以看到mounted与beforeRouteUpdate中的代码有些重合，那是因为vue在路由仅仅只是参数变换的时候，是不会重新重新加载组件的，所以需要在beforeRouteUpdate中处理初始的数据。
nameValid与mobileValid为表单验证的函数，el-form配置rules属性名称，然后data中相应的添加rules即可开启表单验证，但是有一点一定要注意el-form-item上一定要设置对应的prop属性，rules才会生效。
9. 总结
非常简单的一个项目，但是有几个点一定要关注好：
模块的划分，模块划分要合理，尽量能保证模块的复用性
状态的管理，一定要明确什么东西要放vuex中，什么东西不用放，以免使项目的维护反而变得更复杂
如果是大型项目，路由中一定要让.vue文件在需要时再引入，否则会加重初次加载的负担
为了减少篇幅，删减了很多不重要的代码，需要查看源码请移步，项目地址： https://github.com/junjunhuahua/vue-basic-demo
github上的项目已改为后台提供接口，不再使用localStorage操作数据，后台项目使用MongoDB+node实现，具体项目：https://github.com/junjunhuahua/mongodb-demo


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。