去哪儿项目开发流程
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. 组件化开发
- 组件拆分合理 (公共组件,页面级别组件、功能性组件)
- 组件开发
组件传值 (父传子,子传父,兄弟组件,vuex)