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

移动端开发流程[通俗易懂]一、确定项目技术栈vue2.0+vue-cli3/4+vue-router+axios+vuex+vant+rem+sass+webpack二、搭建推荐使用yarnyarn,npm(cnpm)包管理工具yarnaddaxios-Scnpminstallaxios-S-S:–save-dev生产环境的依赖(dependencies)-D:–dev开发环境的依赖(devDependencies)从0开始搭建首先我们要创建一

大家好,又见面了,我是你们的朋友全栈君。

一、确定项目技术栈

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)
  1. 从0开始搭建
    首先我们要创建一个项目,使用以下:
    指令
vue create demo
.....
cd demo
yarn install
npm run serve  //项目启动

或者我们可以使用可视化安装、配置、安装插件、启动项目。
在命令窗口中使用vue ui,弹出页面

  1. 使用模块
  1. 多环境变量配置(开发、测试、生产)
  2. axios 请求拦截,响应拦截 (API统一管理)
  3. sass 预编译
  4. rem移动端适配方案
  5. vant-ui 按需导入
  6. 本地跨域
  7. vuex
  8. 300毫秒延迟问题 (较老设备点击事件有300ms延迟问题)
  9. 1px 边框像素问题
  10. 初始化样式问题 (reset.css引入项目)
  11. js工具文件 (防抖、节流、日期处理、数据类型检测)
  12. 字体图标引入

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

三、路由

我们经常用的有

  1. 路由嵌套
  2. 路由传参
  3. 路由守卫
  4. keep-alive

四、组件化开发

1.组件拆分问题:我们可以封装公共组件、功能性组件
2.组件开发:父传子、子传父、兄弟传值

五、webpack配置的打包优化(vue.config.js)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/152736.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 什么是promise?

    什么是promise?什么是promise?Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,promise是一个对象,从它可以获取异步操作的的最终状态(成功或失败)。Promise是一个构造函数,对外提供统一的API,自己身上有all、reject、resolve等方法,原型上有then、catch等方法。Promise的两个特点Promise对象的状态不受外界影响pending初始状态fulfilled成功状态rejected失

  • CSS制作一个半透明边框

    CSS制作一个半透明边框CSS制作一个半透明边框,background-clip属性,如何实现半透明边框

  • platform_driver_register调用probe

    platform_driver_register调用probekernel_init中do_basic_setup()->driver_init()->platform_bus_init()->…初始化platformbus(虚拟总线)设备向内核注册的时候platform_device_register()->platform_device_add()->…内核把设备挂在虚拟的platformbus下驱动注册的时候platform_dri

  • java IO流详解

    java IO流详解

  • leetcode数组汇总_环形数组

    leetcode数组汇总_环形数组原题链接给定一个由整数数组 A 表示的环形数组 C,求 C 的非空子数组的最大可能和。在此处,环形数组意味着数组的末端将会与开头相连呈环状。(形式上,当0 <= i < A.length 时 C[i] = A[i],且当 i >= 0 时 C[i+A.length] = C[i])此外,子数组最多只能包含固定缓冲区 A 中的每个元素一次。(形式上,对于子数组 C[i], C[i+1], …, C[j],不存在 i <= k1, k2 <= j 其中 k1 % A.leng

  • NAS备份, NDMP

    NAS备份, NDMP

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号