共计 3325 个字符，预计需要花费 9 分钟才能阅读完成。
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 扩展思维问题, 请根据实战经验进行回答.
