VUE移动端开发
备注：红色部分为前端人员课程
项目搭建（1小时）
学习如何快速搭建并跑起项目
git下载
npm本地依赖安装
npm i
webpack基本配置根目录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地址](http://localhost:9000/#/demo-page) 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-show
VUE进阶（4小时）
自定义组件
jsx模式
自定义指令
大局观、全局思维作为开发人员一定要明确自己开发一个组件或者功能是服务于什么的,如何才让它能有价值,更好用.切勿因为别人叫你做什么就做什么,做前一定要先想一下这事情是否合理,再开始写代码.开发一个组件前,请充分跟前/后端组人员沟通,了解清楚规范和需求.
什么时候还能用上jQuery扩展思维问题,请根据实战经验进行回答.
发表回复