首页 APP开发正文

vue手机app开发框架（vue app开发框架）

APP开发 2023-01-30T04:18:11 1828

本篇文章给大家谈谈vue手机app开发框架，以及vue app开发框架对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。本文目录一览： 1、号称目前最火的前端框架Vue，它有什么显著特点呢？

本篇文章给大家谈谈vue手机app开发框架，以及vue app开发框架对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

1、号称目前最火的前端框架Vue，它有什么显著特点呢？
2、5分钟看懂VUE项目
3、uniapp开发工具有没有手机版
4、移动APP开发框架盘点2：Web移动前端框架大全
5、vue项目如何开发,后期容易移植成app

号称目前最火的前端框架Vue，它有什么显著特点呢？

1、Vue是什么

Vue.js 是目前最火的一个前端框架，除了可以开发网站，还可以开发手机App。

Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架。

Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。

Vue.js 是一套用于构建用户界面的渐进式框架。

2、Vue的特点

遵循 MVVM 模式

编码简洁，体积小，运行效率高，适合移动/PC 端开发

它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目

3、Vue与其他前端框架的关系

借鉴 angular 的模板和数据绑定技术

借鉴 react 的组件化和虚拟 DOM 技术

4、Vue的现有插件

vue-cli: vue 脚手架，用于搭建项目的骨架

vue-resource(axios): ajax 请求

vue-router: 路由

vuex: 状态管理

vue-lazyload: 图片懒加载

vue-scroller: 页面滑动相关

mint-ui: 基于 vue 的 UI 组件库(移动端)

element-ui: 基于 vue 的 UI 组件库(PC 端)

5、学习Vue的思想改变

Vue的中心思想是数据驱动，像远古时代的老前辈jQuery是结构驱动。

大家回忆下以前我们使用jQuery写代码的时候，经常是这样写的：

$("#myDiv").html("HelloWorld");

这些写法首先要获取Dom节点，也就是Dom结构，然后再修改数据更新结构的内容，使用jQuery的一个很大的目的就是为了去简化Dom的操作，而使用Vue就大不一样了，Vue的做法就是直接this.msg=HelloWorld，然后msg就会自动的同步到结构上，我们所要关心的是数据内容的改变，而不再去关心如何操作Dom结构了。

总结一句话：不要在想着怎么操作DOM，而是想着如何操作数据!!

5分钟看懂VUE项目

VUE是前端开发框架。诞生于2014年吧。

原始的前端开发框架需要工程师写html、写css、写javascript(js)。js是脚本语言，浏览器可以运行js来执行一些js支持的动作，例如点击反馈，下拉菜单、操作html的DOM元素之类。这样开放效率就很低了。

后来诞生了一些前端开发框架，VUE就是其中之一。目前在国内前端开发中，特别是手机app的h5页面的开发部分，被很多公司采用。

使用VUE开发的时候，不需要js直接操作html元素，只需要管理js的变量值，html会自动更新这些值。传统的html配合js能完成的功能，VUE都给出了实现方案，开发只写简单的html和js语句就可以实现。

VUE开发的工具一般是visio stdio code（vscode），稍微适应两天就可以熟练应用了。还是很强大的。

但是vscode本身只是编辑器，开发编译类语言需要自己配编译环境，具体我没配过。

前端开发不需要配编译环境了，只需要把需要的各种库、工具在命令行界面安装就行。具体过程网上搜“从零开始搭建vue项目”。

刚建立好的项目一定是下面这种目录结构（ranktable.vue是我后加的

这对于新手村的人会引起头晕呕吐，老子啥都没写就出来这么多文件，不但数量不少，文件种类还齐全。

学习VUE别想一下吃的太多，除非你本身前端经验丰富。否则先看懂红色箭头的几个文件吧，看懂这几个就算入门了。看的顺序严格按照下面这样。

index.html-main.js-App.vue-index.js-HelloWorld.vue

我将这几个文件大概讲一讲，你就能有个清晰的脉络了。

一、index.html

!DOCTYPE html

html

head

meta charset="utf-8"

meta name="viewport" content="width=device-width,initial-scale=1.0"

titletradedatapy/title

/head

body

div id="app"/div

/body

/html

页面开发当然是要有html了，VUE开发也不例外。这个html就是整个项目的入口了。只不过是body里面过于简单。div id="app"/div表示本html绑定了一个id为app的VUE对象。

二、main.js

new Vue({ //new Vue语句就是定义了一个VUE对象

el: '#app', //vue对象的id是app

router,

components: { App }, //vue的组件名是APP

})

这就定义了一个app的VUE对象，index.html就可以找到它了。

三、App.vue

template

div id="app"

router-view/

/div

/template

script

export default {

}

/script

上面的template都理解为html的一部分片断就行了，片断可以拼接到html对应的位置，构成一个有内容的完整的页面。img src="./assets/logo.png"这句被我注释了，否则页面会显示这个图片的。下面的route-view/部分是路由，根据用户的url不同，会路由到不同的vue文件，进而展示不同的页面内容。

四、index.js

项目里有不只一个index.js，一定看准了，我要讲解的是router目录下的index.js.

//这里的配置决定了App.vue里router-view/位置会展示什么内容

export default new Router({

routes: [

{

path: '/', //当用户访问根目录也就是默认目录会被路由到HelloWorld组件，

//这个组件的所有内容会被在App.vue里router-view/显示出来

component: HelloWorld

{//当用户访问会显示ranktable.vue内容

//ranktable.vue是我后加的

path: '/ranktable',

component: ranktable

}

]

})

五、HelloWorld.vue

最后看看这里有什么

template

div

原来的内容被我删除了，现在页面显示这句话。

/div

/template

script

/script

vscode命令行执行npm run dev，看见下面说明成功了，将地址贴进浏览器

Compiled successfully in 983ms 15:43:26

I Your application is running here:

如果想要更复杂的功能，在helloworld.vue实现就行了，比如我要一个填表查询功能，里面改成

template

div

group title="城市"

selector placeholder="请选择城市" v-model="demo01" title="" name="district" :options="list" @on-change="onChange1"/selector

/group

group title="街道"

selector placeholder="请选择街道" v-model="demo03" title="" name="district" :options="list4" @on-change="onChange3" @click.native="onClickpz"/selector

/group

group title="小区"

selector placeholder="请选择小区" v-model="demo02" title="" name="district" :options="list3" @on-change="onChange2" @click.native="onClickheyue"/selector

/group

group title="日期"

selector placeholder="请选择日期" v-model="demo04" title="" name="district" :options="list5" @on-change="onChange4" @click.native="onClickdate"/selector

/group

group title="统计类型"

selector placeholder="请选择统计类型" v-model="demo06" title="" name="district" :options="list6" @on-change="onChange6"/selector

/group

div style="padding:15px;"

x-button type="primary" @click.native="getValue('plainValueRef')"查询/x-button

/div

/template

script

import { Selector, Group, Cell, CellBox, XButton } from 'vux'

此处省略很多东西

/script

这个例子有点复杂，需要下面script里实现很多内容，引入vux的一些组件，vux大家可以自行研究。效果是这样的

uniapp开发工具有没有手机版

uniapp开发工具没有手机版。uni-app是一个使用Vue.js开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。uni-app框架由Dcloud即数字天堂(北京)网络技术有限公司推出，该公司主要产品有Web开发IDEHbuiler、HbuilderX，前端框架mui、uni-app，增强版的手机浏览器引擎H5plus。

移动APP开发框架盘点2：Web移动前端框架大全

开源项目其实有一个成熟周期，这个周期大概是三年左右，自React框架在2013年发布并引爆了前端框架的大潮，这个属于前端的周期就此开始了。

之后在2015年5月开源的React Native又开启了属于Web移动前端的周期，15-16年，18-19年，21-22年正好就是属于移动前端的三个爆发点。

三年前，在第一个成熟收获期，我盘点了移动开发框架。在这第二个成熟收获期，理所当然要来盘点一波。

不过，当我点开github项目的code-frequency时，还是被这个准到吓人的周期猜想惊呆了，先给你们看一波，剩下的自行验证。

1、

2、

再来说第二个比较有意思的发现，停止维护的项目绝大多数是Vue框架项目。

盘点开始的时候我还觉得React框架处于绝对劣势，到完成时我发现React无论在选择面还是成熟度上都超过了Vue。

原因我这里就不分析了，反正大家都有自己的看法。

网页类框架就是前端组件框架，这一次虽然有大量项目停止维护，但是也有很多项目坚持了下来，而且还涌现出了一批新项目。

大厂占了主导，因为这些年大厂在移动开发上的需求，远高于其它方面。个人项目要坚持确实不易。

本来是想要做一个验证项目，把所有框架都试用一遍并给出推荐度的。由于进度太慢，还是下一次再发吧。

这次的重点是渐进类框架，就是所谓多端同构框架（小程序框架）。这几年国内的重点的各种小程序平台，所以多端框架的需求很是旺盛。

不过大多数先行者都没挺过来还是让我很意外，只有Taro成功了，想想还是有很多让人唏嘘的东西。

在这里还是先预测一波吧，因为这一类框架最变化最大，最终还是有很多框架要出局的。

渐进类框架是一个过渡性的产品，最终会变成桥接类框架的一部分，所以，与桥接类框架协同才是框架的出路。

这个赛道基本全是大厂了。

腾讯新一代跨端开发框架Hippy

Hippy一看就是淘宝Weex的对标项目，Kpi功能全面压制。所以官方支持 React 和 Vue 两种主流前端框架。在Weex2019年实质停更后发布，要不要这么卷？

Hippy 2.x 架构主要分成三层，UI(JS) 层 Hippy-React 和 Hippy-Vue 负责驱动 UI 指令生成；中间层 C++ HippyCore 负责抹平平台差异性和提供高性能模块；渲染层 Android 和 iOS 负责提供终端底层模块、组件，并与布局引擎通信。

对Weex惨遭遗弃，我上次就说过：「ReactNative提供工具，Weex提供框架，将平台差异化屏蔽（Write Once, Run Everywhere）。所以Weex则注定功能相对弱小，并且坑比较多。」Weex最终下马也是必然的，淘宝又发布升级版北海，为了实现（Write Once, Run Everywhere），它采用自绘，而且是基于Flutter自绘。

所以Hippy3.x就一如既往的Kpi功能层层加码，很有腾讯风格。在未来的 3.x 中业务与渲染层中的具体实现可根据用户实际场景进行切换：业务层上不再局限于 JS 驱动，还可选择（如：DSL/Dart/WASM 等）其它语言进行驱动；在渲染层中，渲染引擎除了支持现有原生（Native）渲染之外，还可以选择其他渲染 Renderer，如 Flutter(Voltron) 渲染。

「Kraken 北海」是一款高性能Web渲染引擎。底层基于 Flutter 进行渲染。

Kraken 不限制上层开发者使用的框架，无论你是使用 Vue 、Rax 还是 React 都可以开发 Kraken 应用。

Kraken 的 runtime 通过 JS Engine Binding 的方式提供了一系列 Web 标准的 API 接口，调用相应 API 会执行相关逻辑并创建一系列需要发送给 Dart 层处理的指令。

Kraken 其实就是一个小程序平台，而且追求全平台完全一致。我虽然认为各平台不一致是很自然的事情，但是也表示理解，毕竟别人吹牛有当真的传统（KFC表示认同）。

Kraken 现在也是一个小号浏览器，所以它的主要工作就是抠标准，毕竟它是一款基于 W3C 标准的高性能渲染引擎。

最后，我劝淘宝领导定Kpi要理智些，毕竟Hippy4我还蛮期待的。

滴滴出品的超轻量级动态化跨端开发框架，主打轻量和实用。

Hummer 以 JS 引擎为基石，目前已支持 JavaScriptCore、Hermers、QuickJS 等业内知名 JS 引擎（这里本来还有个V8的，我删除了，源码里面没有，Kpi需要）。再配合经过调优的 Yoga 布局引擎，抹平了两端视图布局差异（性能更佳的自研布局引擎开发中）。顺便提一下，Hippy采用V8（功能更强）自研布局引擎（性能更佳）。

Hummer 的特点是抛弃了业界其他动态化跨端框架普遍使用的DSL层和VDOM层，因此原生 Hummer 不具备前端开发常用的响应式编程的能力，但同时换来的是接近原生开发的体验和性能。再以原生 Hummer 为基础，在此之上开发了一套基于MVVM架构的开发框架 —— Tenon ，通过 Tenon，可以把使用 Vue/React 编写的代码，转换成原生 Hummer 的代码。

Hummer也是一个小程序平台，而且超轻量。如果想要无限提升自己APP的能力，可以考虑嵌入Hummer。

Web移动前端框架正在迎来第三个高速发展期，各类框架得到极大繁荣。

个人在具体项目的贡献已经微乎其微了，创新、架构创新是唯一制胜的手段，这也是我看好React的根本原因。

最后，还是想做点微不足道的探索，现在前端组件库层出不穷，更换组件库带来的代价有点大。想创建一个框架，来实现上次说的组件公约数和公倍数，无缝切换组件库。理论上支持所有组件库，也能为后来者提供弯道超车的机会。我想大厂可能没有需求，也不会愿意发布这种框架，毕竟都是平台部门说了算。

这个库就是useMobile，当然分为useMobileReact和useMobileVue。下次先发布useMobileReact。等我发布后，再来填上面表中缺的推荐度。

原文地址：