去哪儿项目开发流程

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.字体图标引入

• 解决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）

我的目录结构

• README.md表示项目的说明文件

• package.json文件里有很多的依赖包，表示再开发项目的时候我们要有一些第三方模块的一些依赖，我们都放在这里

• package-lock.json是package的一个锁文件，可以帮助我们去确定我们安装的第三方包的具体的版本，保持我们团队里面的统一。

• LICENSE代表一个开源协议的说明 index.html 是我们默认的首页的模板文件

• .postcssrc,js是对postcss的一个配置项

• .gitignore当我们使用git上传我们的代码，但是有一些特殊的文件我们不希望上传，那我们就可以在这里配置

• .eslintrc.js用来检测我们写的代码是否标准，配置了一些代码规范，我们写代码必须按照这个规范写，他才不会做错误的提示。

• .eslintignore表示我们在build、config、dist、以及所有的js的文件是不会进行代码检测的。

• .editorconfig是帮我们配置编辑器里面的一些语法，

• .babelrc在这里我们的项目其实是vue的单文件组件的写法，所以需要通过babel这种语法解析器做一些语法上的转换，最终转化成浏览能够编译执行的代码。

• static目录：里面放的是我们的一些静态资源，一些静态的图片 node_module目录：里面放的是我们这个项目中依赖的一些第三方的包

• src目录：里面放的是我们整个项目的源码，下面分别介绍，main.js是我们整个项目的入口文件，App.vue是我们项目最原始的根组件，这个项目里所有的路由我们都放在这个router下面的index.js文件里，components里面放的是我们项目里面要用的一些小组件，assets里面放的是我么项目里面用到的一些图片类的资源

• config目录：里面放的是我们项目的配置文件，基础的配置信息放在index.js文件中，开发环境的一些配置信息放在dev.env.js文件中，线上环境的一些配置信息放在prod.evn,js文件中

• build目录：里面放的是我们项目打包的一些配置信息，webpack.base.conf.js

• 配置的基础的webpack配置项，wepwebpack.dev.conf.js

• 开发环境中的webpack配置项，webpack.prod.conf.js线上环境中的webpack配置项

具体参考资源： 慕课网笔记(一、二、三、四、五 ).