一个具有基本增删改查功能的通讯录,数据保存在本地的localStorage中。
,演示地址:https://junjunhuahua.github.io
js框架:vue2 https://cn.vuejs.org/
ui框架:elementUI
http://element.eleme.io//应用
脚手架:vue-cli
单页:vue-router https://router.vuejs.org/zh-cn/
模块打包:webpack
#全局安装vue-cli
npm安装- g vue-cli美元
#创建一个基于webpack模板的新项目
美元vue init webpack接触
$ cd联系
#安装依赖
美元npm安装
美元npm运行开发
之前
这是vue官方基于webpack的脚手架,运行开发后浏览器会自动打开localhost: 8080年,也可以使用运行构建命令,执行构建命令后会自动将src目录中的内容进行编译打包压缩,然后在dist目录中可以看到这些文件
项目根目录:
资产为全局css,图片,以及一些工具类的js,组件为vue的组件,路由器为路由配置,app.vue为主页面的组件,config.js为目录配置项,main.js为入口js
从“Vue”进口Vue
导入应用程序从“/App.vue。”
从“进口路由器。/路由器的
从“element-ui”进口ElementUI
从“进口跑龙套。/资产/utils.js”
导入“element-ui/lib/theme-chalk/index.css”
进口的。/资产/normalize.css”
Vue.use (ElementUI)
Vue.use(跑龙套)/* eslint-disable没有新*/新Vue ({
埃尔:“#应用”,
路由器,
ElementUI,
模板:& lt; App/祝辞,
组件:{应用}
}）
之前
main.js的主要工作是引入一些框架,全局css,以及工具函数,还会处理vue组件的加载,最后实例化vue。
.vue文件是什么& # 63;,https://cn.vuejs.org/v2/guide/single-file-components.html
App.vue可以认为是应用最外层的一个容器。
& lt; template>
& lt; div id=坝τ谩北?
& lt; div类=癮pp-left”比;
& lt; el-row类=皌ac”比;
& lt; el-col>
& lt; el-menu: default-active=癿enuIndex”类=癳l-menu-vertical-demo”
background - color=" # 545 c64 "文本颜色=" # fff”: unique-opened=癿enuUniqueOpen”:路由器=癿enuRouter”
active-text-color=" # ffd04b”比;
& lt; h4>我的应用& lt;/h4>
& lt;模板v="(项目、索引)menuData”比;
& lt; !——此处的索引需显示转换为字符串,否则会报警告——比;
& lt; el-submenu:指数=" " +(指数+ 1)”在
& lt;模板槽="标题"在{{item.name}} & lt;/template>
& lt;模板v="(子项,我)item.value”比;
& lt; !——此处指数格式为父级的指数加上下划线加上当前的指数,指数都需加1——比;
& lt; router-link标签=翱缍取?=皊ubItem.path”比;
& lt; el-menu-item:指数=" subItem.name "在{{子项。标题}}& lt;/el-menu-item>
& lt;/router-link>
& lt;/template>
& lt;/el-submenu>
& lt;/template>
& lt;/el-menu>
& lt;/el-col>
& lt;/el-row>
& lt;/div>
& lt; div类=在“应用程序”;
& lt; router-view> & lt;/router-view>
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
从“进口menuData。/配置
出口默认{
名称:“应用程序”,
数据(){
返回{
menuData,
menuIndex:“,//菜单当前所在位置
menuUniqueOpen:真的,//菜单项是否唯一开启
menuRouter:真//是否开启路由模式
}
}，
安装:函数(){
…
}，
看:{
“美元路线”(){
这一点。menuIndex=to.name
}
}
}
& lt;/script>
这边偷了一个懒,没有把左侧的菜单单独做成一个vue而是混入App.vue中。
在正式写代码之前,首先要确定要项目的结构,模块如何划分,哪个模块对应哪个路由。
