利用Vue Native构建移动应用的全过程记录

• 前言

前言

Vue Native 是一个 JavaScript 框架，旨在使用 JavaScript 构建可以在 Android 和 iOS 上运行的跨平台移动应用程序。通过封装 React Native，开发人员可以使用 Vue Native 使用 Vue.js 构建移动应用程序。

正因为如此，所有可以在 React Native 中完成的事情都可以在 Vue Native 中完成，并且代码被编译为 React Native。通过这种方式，开发人员可以从 Vue 和 React Native 生态系统提供的内容中受益。

在这篇文章中，我们将讨论 Vue Native 的特性以及如何使用 Vue Native 创建移动应用程序。

Vue Native 的特性

在决定使用 Vue.js 构建移动应用程序时，Vue Native 有许多有用的特性需要考虑。

声明式渲染

Vue Native使用声明式编程范式。这意味着我们只需声明我们希望我们的组件和状态如何渲染以获得我们想要的结本文来源gao($daima.com搞@代@#码8网^果。

双向绑定

在我们的Vue Native应用中，我们可以在我们的组件类和其模板之间共享数据。如果我们改变了状态中的数据，它就会自动反映在用户界面中。

我们仍然必须访问 v-model 进行双向数据绑定。这意味着我们可以使用 v-model 将一个 input 元素的值绑定到我们组件的数据属性中。

Vue.js 生态系统的丰富性

Vue 生态系统是 JavaScript 领域最大、发展最快的生态系统之一。使用 Vue Native 构建应用程序提供了更大的 Vue 生态系统的好处。

这意味着我们可以使用诸如 v-if 用于条件渲染，v-model 用于双向数据绑定，v-for 用于列表渲染，以及Vuex用于状态管理等功能。

编译为 React Native

因为 Vue Native 依赖于 React Native，所以熟悉 React Native 生态系统的开发者更容易上手。

我们还可以在 Vue Native 中渲染 React Native 组件，而无需编写一行额外的配置，以便轻松集成并提高生产力。

设置开发环境

开始使用 Vue Native 的最快和最简单的方法是使用 Vue Native CLI 引导移动应用程序。此 CLI 使用Expo CLI 或 React Native CLI 生成一个简单的单页应用程序。

这意味着我们必须安装任一CLI，根据我们应用程序的需要，来使用Vue Native CLI。

要开始，我们必须安装一些依赖项。首先，运行下面的命令来全局安装Vue Native CLI。

 $ npm install --g vue-native-cli 

接下来，全局安装 Expo CLI，尽管这可以与 React Native CLI 互换：

 $  npm install --g expo-cli 

创建一个Vue Native项目

现在 Vue Native 和 Expo CLI 都已全局安装，让我们使用以下命令创建一个 Vue Native 项目：

 vue-native init  

通过在项目的根目录下导航并运行这个命令，启动一个开发服务器：

 $ cd  $ npm start 

Metro Bundler 在 React Native 中编译 JavaScript 代码，从 http://localhost:19002/ 运行。通过在 Web 浏览器中访问 http://localhost:8080/，将出现以下页面：

若要在物理设备上查看Vue Native应用，请扫描浏览器中的二维码，并在Android或iOS的Expo Go中打开链接。

我们也可以通过点击浏览器中显示的链接，在安卓模拟器或iOS模拟器上打开应用程序，但并不是所有在Expo Go中可用的API都可以在模拟器上使用。

作为选择，我们可以克隆Vue Native核心团队准备的Kitchen Sink演示应用程序。

Vue Native UI组件

Vue Native提供了一些开箱即用的UI组件来构建应用界面，让我们来看看其中最重要的一些组件。

视图组件

view 组件就像我们普通HTML中的 div 标签一样工作。这个组件是在Vue Native中创建用户界面的基本构建模块，就像在React Native中一样。

我们可以在一个 view 组件中拥有多个子组件，比如下面的代码。

   My Awesome Vue Native App

Text组件