移动端项目开发讲述

去哪儿项目开发过程

1. 确定项目技术栈
vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant + rem + sass + webpack+持久化工具

2. 搭建项目

yarn，npm(cnpm) 包管理工具 【两种模式都可以使用】

• yarn add axios -S
• cnpm install axios -S

不同环境：
-S: --save-dev 生产环境的依赖 （dependencies）
-D: --dev 开发环境的依赖 （devDependencies）

2.1 从0搭建，

指令

vue create projectname

…

cd projectname
yarn install
npm run serve

• UI可视化界面安装、配置、安装插件、启动项目
• vue ui

2.2 使用模块

好处，快,模板给我们配置好了

1. 多环境变量配置（开发、测试、生产）
2. axios 请求拦截，响应拦截 (API统一管理)
3. sass 预编译
4. rem移动端适配方案
5. vant-ui 按需导入
6. 本地跨域
7. vuex
8. 300毫秒延迟问题 （较老设备点击事件有300ms延迟问题）
9. 1px 边框像素问题
10. 初始化样式问题 (reset.css引入项目)
11. js工具文件 （防抖、节流、日期处理、数据类型检测）
12. 字体图标引入
13. 300毫秒延迟问题

yarn add fastclick -S
//main.js
import fastclick from "fastclick";
fastclick.attach(document.body);

1px 像素

// aseets/css/border.css 【文件夹】
/* 2倍屏 */

@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    
    
    .border-bottom::after {
    
    
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

/* 3倍屏 */

@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    
    
    .border-bottom::after {
    
    
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}

---

// 在main.js 中 引入

import './aseets/css/border.css'

3. 路由

3.1路由嵌套

3.2 路由传参

3.3 路由守卫

3.3 keep-alive

4. 组件化开发
4.1 组件拆分合理 （公共组件，页面级别组件、功能性组件）
4.2 组件开发
组件传值 （父传子，子传父，兄弟组件，vuex）

5.webpack配置打包优化 （vue.config.js）
1、跨域，
一系列配置。

————————————————