一个具有基本增删改查功能的通讯录，数据保存在本地的localStorage中。
demo地址: https://junjunhuahua.github.io
1. 所用技术
js框架: vue2 https://cn.vuejs.org/
ui框架: elementUI
脚手架: 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> <div> <el-row> <el-col> <el-menu :default-active="menuIndex" 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> <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>
这边偷了一个懒，没有把左侧的menu单独做成一个vue而是混入App.vue中。
6. 路由
在正式写代码之前，首先要确定要项目的结构，模块如何划分，哪个模块对应哪个路由。
因为整个项目现在就划分出两个大板块，通讯录与记账本，所以路由第一级就只有contact和account两种。
Vue.use(VueRouter) let myRouter = new VueRouter({ routes: [ { path: '*', component: () => import('../components/NotFoundComponent.vue') }, { path: 'https://www.jb51.net/', 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') } ] })