一 去哪儿网项目开发

1、前端 mock 接口数据模拟

  • 使用 vue-cli 创建的项目，static 是可以直接通过服务器访问到的，因此可以将 mock 的 json 数据放到 static 目录下，通过

axios.get("/static/mock/index.json").then(this.fn); ——获取 json 全部数据
axios.get("/static/mock/index.json?city=" + this.city).then(this.fn); ——查询 json 中指定数据
还可以配置 devServer 的代理（在 config/index.js）：

1
2
3
4
5
6
7
8
 proxyTable: {
      '/api': {
               target: 'http://localhost:8081',
               pathRewrite: {
                   '^/api': '/static/mock'
              }
      }
}

前端请求格式可以变为 axios.get(‘/api/index.json’)

2、常见 tips

基本配置：

  • 移动端配置：修改 index.html 文件的 meta，使其适配手机
  • 引入 reset.css 文件（网上有较为成熟的文件，直接引入即可）
  • 解决 300ms 延迟问题：下载 fastclick 库，在 main.js 中加入 import fastClick from ‘fastclick’; fastClick.attach(document.body);
  • 解决移动端一像素边框：可以复用 border.css 文件，使用 class=”border-bottom”即可
  • 通过 iconfont 生成字体图标，直接引入项目即可
  • 最好建立 varibles.style（或其他格式）存储常量（如颜色配置、高度长度值等），修改起来更容易
  • 使用 mixins.style（或其他格式）提取通用样式代码（如文字溢出、2x3x 图等）

组件库：

  • 轮播图解决方案，可以使用 vue-awesome-swiper 库，在 main.js 加入 import VueAwesomeSwiper from ‘vue-awesome-swiper’;import ‘swiper/dist/css/swiper.css’
    ;Vue.use(VueAwesomeSwiper)
  • 移动端滚动库（better-scroll）
  • 图片轮播点击后出现图片画廊

性能优化：

  • 使用 keep-alive 自带标签可以提高性能，不用每次重新请求页面数据。但是其缓存功能也会导致数据不会在状态（如城市）更新时及时更新，因此可以使用 actived 钩子解决
  • 使用 vuex 管理共享数据，对于需要记忆的数据可以采用 localstorage 进行存储，最小加上 try-catch（用户可能关闭了存储功能、或者开启了隐身模式导致程序异常）
  • 对于搜索框，需要采用防抖函数；对于滚动监听，需要采用节流函数——以提高页面性能
  • 全局页面记得解绑，不然会出现大量 bug; 设置定时器 timer 后，在组件卸载时需要及时清除

页面交互效果：

  • 头部渐隐效果——用户体验感觉特别好！

  • 封装动画组件

前后端接口联调：

  • 删除 static 下的 mock 文件夹（模拟数据），修改 config/index.js 中的 proxyTable，地址改为后端的接口地址即可

真机测试：

  • 使用真机的 ip 进行访问，但是 webpack 不支持非 localhost，需要进行配置
    在 package.json 添加 “dev”: “webpack-dev-server –host 0.0.0.0 –inline –progress –config build/webpack.dev.conf.js”
  • 如果在真机过程中出现了一些异常（白屏），如某些浏览器不支持 promise 的话，建议安装 babel-polyfill 包

打包上线：
运行 npm run build，生成 dist 目录，将 dist 目录放置生产环境即可

二 音乐播放器开发

tips：
jsonp 封装（解决跨域问题）
轮播图组件开发
dom 操作函数封装

大型电商网站前端构建：（需要考虑的问题）
如何发布、如何快速地迭代？

前端架构技术基础
1、语言基础 html/css/js
2、基本框架与类库
3、设计模式（继承&重用）
4、性能优化（http cache、dom 渲染）
5、其他（自动化构建、跨终端适配、代码托管）

项目组织
1、产品设计、发布与迭代
2、数据分析与优化
如第三方统计工具（百度统计)——提升产品的质量
3、项目架构组织方式和目录组织
1）目录层次组织
2）页面层次组织
3）组件化和设计模式层次组织
4、组件化中 CMD 和 AMD 模块化

前端架构实施前地思考
1、技术选型
2、模块地边界划分
3、自动化的发布与迭代

前端的优化思路
1、代码层面
2、架构层面（可扩展性是否受到制约
3、协议层面
4、综合（多种技术的综合使用

前端自动化
发布&测试&开发 grunt/gulp/webpack/rollup 等

三 vue 全栈项目后台管理系统

后端：
先使用 express 建立后端 server，并连接 mongodb（安装 mongoose）
搭建路由 routes 和数据模型 model
写登录权限验证接口（安装 body-parser、bcrypt、gravatar、jsonwebtoken、passport、passport-jwt、validator）
解释：
bcrypt——密码加密
gravatar——生成全球公认头像，用户必须要在 gravatar 官网注册头像，否则显示默认头像
jsonwebtoken——根据对应规则生成 token
passport、passport-jwt——验证 token
检查后端，完成接口测试
前后端连载：
安裝 concurrently
“dev”: “concurrently "npm run server" "npm run client"“
前端：
组件组织形式：