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

Vue Native 是一个利用 Vue.js 和 React Native 建立移动应用程序的框架，使开发人员拥有更好的体验和开发效率。

准备工作

安装 Node.js 和 npm
安装 Vue CLI 和 React Native 命令行工具 (CLI)
安装 Expo 命令行工具
编辑器：推荐使用 Visual Studio Code 或 WebStorm
了解 Vue.js 和 React Native

创建Vue Native项目

利用 Vue CLI 可以轻松创建 Vue Native 项目。在命令行中输入以下命令：

# using vue-cli
$ npm install -g vue-cli
$ vue init vuejs-templates/webpack vue-native-demo

# change directory
$ cd vue-native-demo

# install dependencies
$ npm install

以上命令已经完成了 Vue Native 项目的创建。在上一步完成后，我们可以看看目录结构：

├── README.md
├── index.android.js
├── index.ios.js
├── node_modules
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js
└── yarn.lock

运行Vue Native项目

接下来就是启动项目，可以在 Android 或 iOS 设备上显示应用程序:

安装 Expo 手机应用程序
在终端中，运行以下命令:

$ npm install -g expo-cli
$ npm start

您将被要求扫描二维码，这将在 Expo 应用程序中打开应用程序。

示例一

在 HelloWorld.vue 文件中添加下面的代码:

<template>
  <view>
    <text>
      {{ message }}
    </text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

现在，我们可以看到应用程序欢迎界面上 “Hello World！” 的文本。

示例二

在 App.vue 文件中添加下面的代码：

<template>
  <view class="container">
    <text class="title">Vue Native</text>
    <hello-world></hello-world>
  </view>
</template>

<script>
  import HelloWorld from './components/HelloWorld.vue'
  export default {
    components: {
      HelloWorld
    }
  }
</script>

<style scoped>
  .container {
    flex: 1;
    alignItems: center;
    justifyContent: center;
    backgroundColor: #F5FCFF;
  }
  .title {
    fontSize: 20;
    marginBottom: 20;
    textAlign: 'center';
  }
</style>

运行应用程序，我们可以看到标题为 “Vue Native” 的欢迎界面和已添加的 “Hello World” 组件。