（去哪儿）项目的流程

项目开发的技术栈

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

搭建项目

yarn,npm(cnpm)包管理工具
yarn add aioxs -S 使用yarm下载单个插件
cnpm install axios -S 使用cnpm下载单个插件
-S --save-dev 生产环境的依赖 (dependencies)
-D -dev 开发环境的依赖 (devDependencies)
 

手动搭建

使用指令：

vue create projectname

 

 

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

vue ui

使用模板

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

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

300毫秒延迟的问题
安装 fastclick 引入到全局的main.js

yarn add fastclick -S

//main.js

import fastclick from "fastclick";

fastclick.attach(document.body);

1px边框像素问题
解决办法：在assets文件下创建css文件在此文件中创建border.css
写入代码 然后在main.js中引入

// 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'

配置路由

路由嵌套

路由传参

路由守卫

keep-alive

路由懒加载

封装路由

 

组件化开发

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

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

一系列的配置......