移动端项目(去哪儿)项目开发流程

确定项目技术栈

技术栈： Vue、 vue-cli、 vue-router、 Vuex、 axios、 vant、 rem、 scss、 webpack、

描述： vue.js、 vue脚手架、 vue路由、 vue状态管理工具、 异步请求数据、移动端框架、自适应布局、css扩展语言、 打包工具

搭建项目

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

• 手动搭建
  (1) 先创建一个项目vue create projectname；
  
  (2)
  (3)
  
  (4)
  
  (5)
  

(6)

(8)

(9)

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

vue ui

使用模板(找到项目相应的模板可以省略手动配置文件步骤,同时也不容易出错)
1.多环境变量配置（开发、测试、生产);查看多环境变量
2.axios 请求拦截，响应拦截 (API统一管理);
3.sass 预编译;
4.rem移动端适配方案;
5.vant-ui 按需导入;
6.本地跨域;
7.vuex;查看Vuex
8.300毫秒延迟问题(较老设备点击事件有300ms延迟问题);
9.1px 边框像素问题;
10.初始化样式问题(reset.css引入项目);
11.js工具文件(防抖、节流、日期处理、数据类型检测);
12.字体图标引入;

多环境变量

用多环境变量来解决,来回改变代码,

因为

开发时,使用的是一个服务器;

测试时,使用是另一个服务器;

上线时,使用又是另外一个服务器;

多环境变量

路由

(1)路由的嵌套;
(2)路由传参;查看路由传参
(3)路由守卫;
(4)keep-alive;查看keep-alive
(5)路由懒加载;
(6)封装路由;

组件化开发

1、 封装公共的组件;
2、合理化的拆分组件;
3、组件的开发;
4、组件间的传值;

webpack配置打包优化------>vue.config.js文件

/路径替换为./ 
解决跨域