去哪儿项目开发过程
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 使用模块
好处,快,模板给我们配置好了
- 多环境变量配置(开发、测试、生产)
- axios 请求拦截,响应拦截 (API统一管理)
- sass 预编译
- rem移动端适配方案
- vant-ui 按需导入
- 本地跨域
- vuex
- 300毫秒延迟问题 (较老设备点击事件有300ms延迟问题)
- 1px 边框像素问题
- 初始化样式问题 (reset.css引入项目)
- js工具文件 (防抖、节流、日期处理、数据类型检测)
- 字体图标引入
- 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、跨域,
一系列配置。
————————————————