如何利用vue+vue-router+elementUI實現(xiàn)簡易通訊錄

# 全局安裝 vue-cli

$ npm install -g vue-cli

# 創(chuàng)建一個基于 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">
   <h4>我的應(yīng)用</h4>
   <template v-for="(item, index) in menuData">
    <!-- 此處的index需顯示轉(zhuǎn)換為string，否則會報warn -->
    <el-submenu :index="'' + (index + 1)">
    <template slot="title">{{ item.name }}</template>
    <template v-for="(subItem, i) in item.value">
     <!-- 此處index格式為父級的index加上下劃線加上當(dāng)前的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: '', // 菜單當(dāng)前所在位置
  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">新增聯(lián)系人</el-button>
 </div>
 <div class="contact-list-content">
  <template>
  <div class="contact-list-wrap">
   <h4>高級檢索</h4>
   <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">
   <h4>聯(lián)系人列表</h4>
   <el-table
   :data="listNewData"
   
   @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('此操作將永久刪除該聯(lián)系人, 是否繼續(xù)?', '提示', {
   confirmButtonText: '確定',
   cancelButtonText: '取消',
   type: 'warning',
   callback: (action) => {
   if (action === 'confirm') {
    this.$delete(this.listData, data.id)
    this.utils.setLocalStorage('vueContact', this.listData)
   }
   }
  })
  },
  editContact: function (res) {
  let data = res.row
  this.$router.push({
   path: '/contact/edit', query: {id: data.id}
  })
  },
  viewContact: function (row) {
  this.viewShow = true
  this.curData = this.listData[row.id]
  },
  contactSearch: function () {
  let data = this.utils.getLocalStorage('vueContact')
  let newData = {}
  for (let item in data) {
   if (data[item].name.indexOf(this.searchParams.name) > -1) {
   newData[item] = data[item]
   }
  }
  this.listData = newData
  }
 }
 }
</script>

<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 () {
  // 需手動關(guān)閉彈窗,找到父組件中調(diào)用的地方進(jìn)行事件的觸發(fā)
  this.$parent.$refs.contactView.$emit('update:viewShow', false)
  }
 }

 }
</script>

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