前言
随着互联网和移动设备的飞速发展,手机等移动端设备上的Web App开发越来越流行。随着前后端分离的开发模式成为流行趋势,前端技术也占据了重要地位,并且随着Node.js和JSON-Server等各种在线模拟服务器、Mock.js模拟数据以及移动端UI框架的出现,使得移动开发更加容易,也受到越来越多人的喜爱与追逐。
随着前端技术的不断发展,利用JavaScript编程语言进行软件开发时便显示出了得天独厚的优势,特别是在单页应用和前端框架上,能够减少DOM操作,优化性能,能够快速搭建一个通用的Web网站。各种性能优化解决方案、各种简洁API的出现,尤其是ES6、ES7、ES8等的广泛应用,还有近期特别流行的TypeScript语言,更加能够约束变量类型,使得多人协作开发大型项目时不易出现错误的类型判断。所以移动前端开发具有良好的发展前景,也是比较容易入门的一种技术。
程序员要想进入移动Web前端开发的行业,除了需要有扎实的JavaScript语言基础外,还要掌握多种开发框架,比如Vue、React和Angular等前端三大框架。除了这些必须掌握的基础知识和框架之外,最好还要多进行实际操作与代码的书写,多进行项目实战开发,这样才能够真正掌握理论知识,也能够快速地从实践中提升自己的技能和技术,丰富自己的开发经验。只有牢固掌握技术知识和多加熟悉应用开发的各种实例与项目案例,才能在互联网技术领域的环境中具有较强的行业竞争力和明确提升前端技术的途径与方法。
目前适用于初学者学习前端的书籍很多,但是将基础知识与实例和项目案例相结合来讲解移动端Web App开发的书籍相对较少,本书便是以实战和案例为基础,通过对Vue移动端Web开发中最常见的技术知识和多个完整项目案例的讲解,让读者全面、深入地理解移动Vue项目开发的完整流程和需要使用的各种技术,通过实际案例快速提高读者实际开发水平和进行完整项目开发的能力。
写给读者的话
我的笔名是绵绵的糖,有多年前端开发从业经验,比较擅长Vue框架,也了解并会使用React框架。由于自己比较喜欢小程序开发,所以对原生小程序开发也比较有经验。
总的来说,写作这本书的过程也是一个不断学习的过程,不断汲取新的或者以前没有注意到的小知识点,将自己知道的与网上其他人的经验相结合,经过实践总结出许多知识点,供大家学习,为读者提供一本入门Vue移动开发的书籍。由于个人能力、经验和时间等的限制,书中可能存在部分未讲解透彻的地方,还望读者多提意见。
对于初次学习移动前端开发的读者来说,本书是完全可以参考的。希望这本书能够帮助到学习前端移动开发的初学者。
本书有何特色
(1)附带各种案例源代码,提高学习效率。为了便于读者理解本书内容,提高学习效率,笔者为本书每一章内容都提供了案例的源代码和部分理论的图解。
(2)涵盖移动端Web开发的各种热门技术、主流框架及其整合使用。本书涵盖Vue、Node.js、Vuex、Vue Router、Vant Weapp、Json-Server、ES6、ES7和axios等热门开源技术及Vue+Vuex+Vue Router+axios+Vant Weapp、Vue+Webpack等主流框架的整合使用。
(3)对移动端Web开发的各种技术和框架作详细介绍。本书从一开始便对移动端Web发展技术与历程做了基本介绍,并且对开始学习所需要使用的各种技术也进行了简要介绍,讲解如何进行各种环境下的安装配置,以及提供给读者多种开发编辑器,供读者自行选择,这样便于读者理解书中典型功能的开发和快速上手项目案例。
(4)案例驱动,应用性强。本书提供大量移动端Web开发的典型案例,这些案例讲述的都是Vue移动开发中经常要用到的功能,具有超强的实用性,能够在读者学习基础知识的同时,帮助读者快速掌握以后开发中能够用到的技术功能,也便于前端开发人员随时查阅和参考。
本书内容及知识体系
第1章 什么是移动端Web开发
本章主要介绍移动端Web技术的发展、移动端Web与PC Web和App开发三者之间的区别,以及说明如何进行Web页面开发环境的搭建,同时还介绍Vue开发环境的搭建过程。
第2章 Vue移动端Web开发的技术栈
本章主要介绍Vue移动端Web开发中常用的各种技术栈,主要包括Webpack脚手架、Vuex状态管理库、前端路由Vue Router、第三方请求管理库axios等,也简要介绍ES6与ES7、移动端屏幕适配和页面调试方法等。
第3章 Webpack脚手架快速入门
本章主要介绍Webpack相关的概念、功能与使用方法,说明如何利用Webpack-cli脚手架进行项目的创建,如何利用Webpack进行打包,如何结合Vue和Webpack开发项目。
第4章 Vue快速入门
本章主要介绍Vue相关的概念、功能与使用方法,详细阐述如何创建Vue实例和组件,Vue的模板语法,Vue中的方法、计算属性和监听器三者的相同与不同之处,插槽的用法和Vue的过渡与动画效果的实现方法等。
第5章 Vuex快速入门
本章主要介绍Vue的状态管理库Vuex的五个相关的核心概念,如何安装与使用Vuex,以及哪些场景下适合使用Vuex进行状态共享,并且提供实战项目使读者能更好地理解Vuex的技术知识。
第6章 Vue Router快速入门
本章主要介绍前端路由Vue Router的概念和使用方法,以及涉及的动态路由、嵌套路由、导航守卫和路由懒加载等。
第7章 ES6/ES7快速入门
本章主要介绍ECMAScript 6.0(即ES6)和其新版本ES7等的基础知识,包括箭头函数、变量声明、模块化和Async、Await等,利用ES6、ES7的语法能够使代码更加简洁。
第8章 axios快速入门
本章主要介绍axios相关的知识,axios是一个可用于浏览器端和Node端的请求库,它是基于Promise封装而成的,具有许多优势。本章着重介绍axios的API与其返回的响应数据的结构,带领读者进行axios请求的封装。
第9章 移动端Web屏幕适配和UI框架
本章为移动端屏幕适配提供多种解决方案,介绍视区概念、Flex布局、rem响应式布局、vw适配和媒体查询等,同时介绍如何进行移动端Web屏幕适配,以及有哪些适合移动端的UI框架,并且提供多种案例。
第10章 移动端Web单击事件
本章介绍移动端Web单击事件,包括其中涉及的一些问题,比如iOS端单击存在延迟的问题和单击穿透的问题等,以及介绍解决这些问题的方法。
第11章 实战项目:响应式单页面管理系统TODO
本章进行一个简单的项目实战,利用Vue 3实现一个响应式单页面管理系统TODO待办事项页面管理,通过该章提高读者项目实战开发能力,并巩固所学知识。
第12章 实战项目:移动电商Web App
本章主要利用所学知识开发一个移动电商项目,通过该项目了解开发一个完整项目的基本流程,复习之前所学知识,掌握编码设计思想,帮助读者获得独立开发移动端Web App的能力。
第13章 实战项目:Web App打包成移动端App
本章主要介绍如何通过HBuilderX来实现将Web App项目打包成移动端App,并且展示生成的.apk文件安装运行在手机上的效果。
配套源码下载
本书配套的示例源码,需要用微信扫描右边的二维码获取,也可按扫描后的页面提示填写你的邮箱,把下载链接转发到邮箱中下载。如果有疑问和建议,请用电子邮件联系booksaga@163.com,邮件主题为“Vue.js 3移动应用开发实战”。
适合阅读本书的读者
· 网页开发人员
· 前端开发人员
· Vue开发人员
· 广大移动端Web开发程序员
· 移动端App开发程序员
· 专业培训机构的学员
· 需要一本Vue开发必备查询手册的人员
作者
2022年5月