Android 转Vue前端的思想转变

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

• 一、Vue和前端的关系
• 二、框架思想上的转变
• 三、UI布局流上思想的改变
• 1.app
• 2.vue前端
• 总结

---

前言

接触vue一段时间后，感觉vue和app开发还是有很大不同的。

在开发APP转向开发网页等前端之前，如果在思想上有一些提前准备的话，可能接受起来会事半功倍。

---

一、Vue和前端的关系

如果从没接触过网页端，强烈建议去Learn web development | MDN

学习一下。虽然是英语的，但是用必应词典对应着查看应该没什么问题。这里面的教程相对比较简单明了，非常适合小白。

web端分为三个部分：

• html文件：网页的ui部分 相当于Android中的xml文件，是布局文件，可以直接用浏览器打开
• css文件: ui的样式修饰器 相当于Android中的values中的styles.xml文件 存放一些修饰器
• js文件:  存储数据和处理逻辑的文件 相当于Android中的java文件

这三个文件按照某种规则部署在某个文件夹下，这三个文件相互引用，就可以打造一个动态的网页

但是时间长了，人们发现这种原始的方式写起来太麻烦了，就先后出现了一些js的框架，比如react，Angular，jQuery等，这其中就包括了Vue.

Vue项目中会把html、css、和js相关的放在一个文件里，以.vue结尾的文件。

因为这些vue文件是不能直接被浏览器识别的，所以在部署之前我们需要把他们依然变成html,css和js文件，这就需要打包工具。

这几年，打包工具也有很多，用的比较多的是webpack和vite.

如果需要webpack打包，就要按照webpack中针对vue项目的规则创建初始文件，设置文件夹名称等。想想也挺麻烦的，就有了脚手架一说，就是说我们用脚手架能打造一个最基本的空白项目，额，类似于Android studio里面的【新建项目】---》【empty activiey】吧。而这个脚手架，目前比较流行的有vue-cli 和 create-vue(只适用于vue3项目)

二、框架思想上的转变

Android app开发上经历了MVC、MVP、MVVM三个阶段。虽然现在用的比较多的是MVVM阶段，但是在接触新项目时，会不由自主的用MVC的模式去接触新语言。

但是前端，尤其是Vue的MVVM模式已经用了很多年了，就是说数据和UI中的展示是响应式的。就像MVVM中的livedata差不多，UI部分（类比Android的xml文件）直接绑定数据。

三、UI布局流上思想的改变

1.app

        所有的布局都在xml文件中完成，在xml文件中，必须有一个根元素是layout,这个layout规定了组件的排列顺序。（如果没有根元素，组件会默认在左上角）.比如：LinearLayout可以规定方向为垂直或者水平 

2.vue前端

        在<template></template>中放置组件，组件会默认从上到下，从左到右排列。

• 有些组件默认是占一行的 比如div ,h ,p,他们独自占一行，所以跟在他们后面的组件将重启一行进行排列。        
• 有些组件默认是不占一行的 比如span,img等，所以跟在他们后面的组件将在同行进行排列。

        所以平常我会把div当做Android中的layout来用。

        同时这些组件可以被两种方式修饰

• style :行内修饰 ，级别最高
• class或者id：class属性修饰 可以一个样式应用给多个组件 类似Android中的                                  style.xml

四、善用各种第三方插件

不管是组件库还是逻辑方面（比如日期处理等）的插件，vue都Android这一块丰富的多。所以当某个功能对于你确实不会用时，去找找第三方，可能会事半功倍。当然高手可自定义哈。

---

总结

只是一些我自己接触下来vue的一些想法 记录一下 。