移动端开发流程[通俗易懂]

编程汇总 • 2025-10-08 08:33 • 阅读 40

一、确定项目技术栈

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

二、搭建

推荐使用yarn
 yarn，npm(cnpm) 包管理工具
 yarn add axios -S
 cnpm install axios -S
 -S: --save-dev 生产环境的依赖 （dependencies）
 -D: --dev 开发环境的依赖 （devDependencies）

从0开始搭建
首先我们要创建一个项目，使用以下：
指令：

vue create demo
 .....
 cd demo
 yarn install
 npm run serve //项目启动

使用模块

多环境变量配置（开发、测试、生产）

axios 请求拦截，响应拦截 (API统一管理)

sass 预编译

rem移动端适配方案

vant-ui 按需导入

本地跨域

vuex

300毫秒延迟问题（较老设备事件有300ms延迟问题）

1px 边框像素问题

初始化样式问题 (reset.css引入项目)

js工具文件（防抖、节流、日期处理、数据类型检测）

字体图标引入

1.多环境变量首先配置我们的开发环境下的，生产环境下的，测试环境下的，再运行 npm run build ,或者是test
2.配置axios时，我们写入请求拦截和响应拦截，进行API的统一管理，请求分两种形式：分别为get , post 形式进行传参
3.sass预解析：意思就是说将浏览器不能识别的css代码转换成浏览器能识别的
4.rem：针对于移动端的适配问题，是根据手机屏幕进行适配的–也就是响应式的
5.vue ui 的按需引入
6.本地跨域– 通常我们使用jsonp跨域
7.vuex–vuex是vue的状态管理工具，我们可以存放公共数据
8.300毫秒延迟问题 –我们可以下载插件，如下↓

yarn add fastclick -S
 //main.js
 import fastclick from "fastclick";
 fastclick.attach(document.body);

9.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'

10.初始化样式问题 —我们可以在(reset.css中引入项目) 例如 box-sizing:border-box

三、路由

我们经常用的有

路由嵌套

路由传参

路由守卫

keep-alive

四、组件化开发

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

今天的文章移动端开发流程[通俗易懂]分享到此就结束了，感谢您的阅读。