VUE移动端开发备注：红色部分为前端人员课程项目搭建（1小时）学习如何快速搭建并跑起项目git下载npm本地依赖安装 npm iwebpack基本配置根目录vue.config文件,请根据官方链接进行配置.这里列举几个常用的配置讲解:devServer: { port: 9000,//启动端口号 proxy: { ‘/api’: { //跨域配置标示 target: ${IP}/api, //所有访问标示的都被代理到这个地址,例如 http://后端域名/api changeOrigin: true,//跨域支持,开启才允许发送session pathRewrite: {//代理名称替换 ‘^/api’: ‘/’ } }, },}运行项目npm start打包发布npm build项目结构（2小时）目录结构了解src开发目录assets 公共资源配置lib 第三方资源,懒加载pages 开发模块scss 样式库vant-ui 本地组件库,仅用于学习.项目使用npm远程库并保持最新App.vue 基础页面,根路由main.js 项目入口配置,启动前初始化配置ip.js解压ip.zip获得,此文件不提交到git,根据自己需要配置要访问的内网地址开发规范详见开发规范手册<span style=“color:pink”>全项目结构学习</span>移动端适配postcss管理项目css兼容关联文件 postcss.config.js屏幕容器适配确保适配 iphone8/8p/x与原生交互实现原理是在window上绑定方法或变量,让原生调用h5实现android物理返回键例如compatibility.js文件中实现的安卓物理返回键在点击物理按键时,实现路由页面的返回或者弹出层的关闭.js window.APP_BACK = function(){ ... }VANT组件库（1小时讲解，其余时间自学）https://youzan.github.io/vant…考试:请用vant写一个基础表单页面,包括输入框,单选,多选,富文本,日期选择.扩展库 （4小时）https://218.201.222.159:18081/core-framework/vue-vant请下载并运行扩展库, 然后查看库中对应的markdown文件进行学习ui-main页面外框学习其用法,注意附带的参数ui-page子页面路由页面列表常用第三方库（2小时）考试请用page子页面和路由页面结合,写一个产品列表页、详情页、二级详情页的综合页面。图标库Vue-Awesome阿里图标库考试请在自己创建的项目中,演示如何成功引入上面2中图标库echart的使用axios 网络请求模块globalMethod 以$开头的常用公共方法eventHub 全局事件广播vue-touch手势lightbox图片画廊 src/lib/lightbox.md考试 请用$http请求任意测试接口,获取图片,然后用lightbox展示效果样式库（2小时）1-5节不涉及demo,快速理解的最好办法就是通读一遍样式库源码base全局基础样式public公共变量库ui –开头常用样式库rewrite重构样式库vue-transition过度动画style标签作用域阅读资料页面私有样式-scope为什么scope时无法修改页面class/deep/ 语法的使用考试请在一个vue页面修改vant组件的样式,并确保它只在当前页面生效.实战开发（重点）（6小时）父子页面通讯demo地址 src/pages/demo/page.vue跨页面通讯 // 接收消息的页面 export default { mounted(){ // 页面生成时启动广播 this.$eventHub.$on(‘msg’,(msg)=>{ console.log(‘接收到消息’, msg) }) }, beforeDestory(){ this.$eventHub.$off(‘msg’) //页面销毁时一定记得销毁广播监听 } } // 发送消息的页面 export default { methods: { sendMessage(){ this.$eventHub.$emit(‘msg’,‘我是一段消息’) } } }复杂页面的模块化拆分常用的逻辑例如将页面拆分为页头,主体,页脚三部分<template> <ui-main> <header></header> 我是主体内容… <footer></footer> </ui-main></template><script>import header from ‘./header.vue’import footer from ‘./footer.vue’export default { components:{ header, footer }}</script>拆分原则:页面代码过长按模块大标题进行拆分有echart的可以单独按图表进行拆分列表可以单独拆分可编辑部分单独拆分筛选功能使用van-popup组件实现弹出层进行筛选<van-popup v-model=“searchShow” position=“top” get-container=“body”> <div class=“ui-content”> <div class=“pt10 mb5 f14 f-color-grey”>风险等级</div> <van-checkbox-group v-model=“riskLevel”> <van-checkbox v-for="(item,i) in riskLevels" :key=“i” :name=“item.name” class=“ui-checkbox”>{{item.data_name}}</van-checkbox> </van-checkbox-group> <div class=“pt10 mb5 f14 f-color-grey”>风险范畴</div> <van-checkbox-group v-model=“riskCategory”> <van-checkbox v-for="(item,i) in riskCategorys" :key=“i” :name=“item.name” class=“ui-checkbox”>{{item.data_name}}</van-checkbox> </van-checkbox-group> <div class=“pt10 mb5 f14 f-color-grey”>危害类别</div> <van-checkbox-group v-model=“riskHazard”> <van-checkbox v-for="(item,i) in riskHazards" :key=“i” :name=“item.name” class=“ui-checkbox”>{{item.data_name}}</van-checkbox> </van-checkbox-group> </div> <div class=“flex mt10”> <van-button class=“flex-1” type=“primary” @click=“search()">查询</van-button> <van-button class=“flex-1” @click=“reset()">重置</van-button> </div></van-popup>下拉刷新/上拉加载详细内容阅读 ui-pull属性key的运用官方文档正确使用v-if/v-show阅读资料区别:v-if会触发dom重新渲染v-show只是用css将dom隐藏如何选择:需要销毁dom的条件语句用v-if需要平凡开关的条件用v-showVUE进阶（4小时）自定义组件jsx模式自定义指令大局观、全局思维作为开发人员一定要明确自己开发一个组件或者功能是服务于什么的,如何才让它能有价值,更好用.切勿因为别人叫你做什么就做什么,做前一定要先想一下这事情是否合理,再开始写代码.开发一个组件前,请充分跟前/后端组人员沟通,了解清楚规范和需求.什么时候还能用上jQuery扩展思维问题,请根据实战经验进行回答.