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

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

---

一、确定项目技术栈

技术栈：  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、手动搭建

     (1)先创建一个项目vue create projectname；

      

      (2)

      (3)

      (4)

      (5)

      (6)

      (7)

      (8)

(9)

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

 vue ui

     2、使用模板(找到项目相应的模板可以省略手动配置文件步骤,同时也不容易出错)

    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文件

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