去哪儿项目开发流程

去哪儿项目开发流程

1.确定项目技术栈

vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant + rem + sass + webpack

2. 项目的搭建

项目的打包可以用到的工具有yarn 和npm(cnpm)，
eg：yarn add axios -S
cnpm install axios -S
注：
-S: --save-dev 生产环境的依赖 （dependencies）
-D: --dev 开发环境的依赖 （devDependencies）

1）①先搭建个vue的框架，在这里我们可以根据项目的需要搭建新的模板框架，或者是使用以前自己提前搭建过得模板。
搭建新的模板需打开终端输入指令：

vue create projectname
.....
cd projectname
yarn install
npm run serve

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

vue ui

3 使用模块

好处：找到我们项目相应的模板就不用我们手动配置文件，且不易出错。

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

我们在写入项目的时候总会存在一些问题

eg：
①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'

4. 路由的配置

1).路由嵌套
2).路由传参
3).路由守卫
4).keep-alive

5. 组件化开发

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

5.webpack配置打包优化 （vue.config.js）