vue项目构建和部署_如何使用Vue设置，构建和部署本机应用程序

vue项目构建和部署

Vue Native is a Javascript framework that is designed to deliver cross platform mobile native applications. It is inspired by the React Native project.

Vue Native是一个Javascript框架，旨在提供跨平台的移动本机应用程序。它受React Native项目的启发。

Vue Native was originally a fork from React-vue, a compiler that gave developers that ability to write Vue and React in the same codebase. In this tutorial you will build an application to learn about the APIs and components available in Vue Native.

Vue Native最初是React-vue的分支，该编译器使开发人员能够在同一代码库中编写Vue和React。在本教程中，您将构建一个应用程序以了解Vue Native中可用的API和组件。

The application that you build will display trending gifs on the Giphy platform. The Giphy API will be used to get the associated gif image, title and type from for each trending gif. The image and details will be displayed using Vue Native components like ScrollView, Text, and Image.

您构建的应用程序将在Giphy平台上显示趋势gif。 Giphy API将用于为每个趋势gif获取相关的gif图像，标题和类型。图像和详细信息将使用Vue Native组件(例如ScrollView，Text和Image)显示。

先决条件 (Prerequisites)

To follow this tutorial, you will need to have Node > 6.0 installed. You will also need a Node package manager like NPM (which comes packaged with Node) or Yarn.

要遵循本教程，您将需要安装Node > 6.0。您还需要一个Node软件包管理器，例如NPM(与Node一起打包)或Yarn 。

Some knowledge of Javascript and Vue is also required. You can follow the official Vue documentation here to become familiar with some fo the core Vue concepts and components.

还需要一些Javascript和Vue的知识。您可以在此处遵循Vue的官方文档，以熟悉Vue的核心概念和组件。

入门 (Getting started)

Before getting started, you will need to setup a project and install some dependencies. The Vue native CLI will be used to bootstrap the application.

在开始之前，您将需要设置一个项目并安装一些依赖项。 Vue本机CLI将用于引导应用程序。

First, install the Vue Native CLI by running the following command (choose one based on your package manager):

首先，通过运行以下命令安装Vue Native CLI(根据您的软件包管理器选择一个)：

yarn global add vue-native-cli
纱线全球添加vue-native-cli
// or
// 要么
npm install -g vue-native-cli
npm install -g vue-native-cli

Then initialize a new project by running the following command:

然后通过运行以下命令初始化一个新项目：

vue-native init vue-gifs
vue-native初始化vue-gifs

Running this command will bootstrap an application for this project using the Expo CLI.

运行此命令将使用Expo CLI引导该项目的应用程序。

At the time of writing the Vue Native CLI needs the React Native version 0.55.4 and expo version 29.0.0, so update your package.json to set these versions. To build for ios and android platforms, update the scripts object like this:

在撰写本文时，Vue Native CLI需要React Native版本0.55.4和expo版本29.0.0 ，因此更新您的package.json以设置这些版本。要针对ios和android平台进行构建，请更新scripts对象，如下所示：

//package.json

{
  "name": "vue-gifs",
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    ...
    "build:ios": "expo build:ios",
    "build:android": "expo build:android",
  },
  "dependencies": {
    "expo": "^29.0.0",
    ...
    "react-native": "0.55.4",
    ...
  },
  "devDependencies": {
    "babel-preset-expo": "^4.0.0",
    ...
  }
}

Then update the sdkVersion in the app.json file to match the expo version. Open the app.json file and update it like the snippet below:

然后更新app.json文件中的sdkVersion以匹配博览会版本。打开app.json文件并按照以下代码片段进行更新：

{
  "expo": {
    "name": "vue-gifs",
    "description": "This project is really great.",
    ...
    "sdkVersion": "29.0.0",
    ...
  }
}

Everything else will remain the same. After making these changes, run npm install or yarn to install the required versions for the application. When this is done, run npm start to run the application.

其他所有内容将保持不变。进行这些更改后，运行npm install或yarn来安装应用程序所需的版本。完成此操作后，运行npm start来运行该应用程序。

Expo will be used to build and run the new application. Expo is an open source tool-chain built around React Native for building Android and iOS applications. It provides access to the system’s functionality like the Camera and Storage.

Expo将用于构建和运行新应用程序。 Expo是一个围绕React Native构建的开源工具链，用于构建Android和iOS应用程序。它提供对系统功能(如“相机”和“存储”)的访问。

在手机上测试 (Testing on mobile)

To test the application on mobile, the expo-cli provides various methods to test the application. The first is using a URL that is generated after running the application. This URL can be visited on your mobile browser to test the application.

为了在移动设备上测试应用程序，expo-cli提供了各种方法来测试应用程序。第一种是使用运行应用程序后生成的URL。可以在您的移动浏览器上访问该URL以测试该应用程序。

Run the npm run start-native command within your project folder to run the application using Expo. Expo typically starts your application on port 19002 so visit (http://localhost:19002) to view the expo dev tools in your browser. Within the dev tools you can send the preview link as an SMS or email to your mobile phone.

在项目文件夹中运行npm run start-native命令，以使用Expo运行该应用程序。 Expo通常在端口19002上启动您的应用程序，因此请访问( http：// localhost：19002 )在浏览器中查看expo dev工具。在开发工具中，您可以通过SMS或电子邮件将预览链接发送到您的手机。

You can select any of the three connection options. An external tunnel, LAN or Local connection. For the local connection, your mobile phone and work PC have to be connection to the same network but the tunnel will work in all cases.

您可以选择三个连接选项中的任何一个。外部隧道，LAN或本地连接。对于本地连接，您的手机和工作PC必须连接到同一网络，但是隧道在所有情况下都可以使用。

The next testing method that you can use is to download the Expo mobile app. It can be found on both the Apple App store and the Android Play store. On iOS, after installing the app open up your camera and scan the barcode from the browser version of the application to run it on your phone. On Android you can use the Expo app directly to scan the barcode and run the application.

您可以使用的下一种测试方法是下载Expo移动应用程序。它可以在Apple App Store和Android Play商店中找到。在iOS上，安装应用程序后，打开相机并从应用程序的浏览器版本扫描条形码以在手机上运行它。在Android上，您可以直接使用Expo应用程序来扫描条形码并运行该应用程序。

Run any of the following command to test on either platforms:

运行以下任何命令以在两个平台上进行测试：

npm start
npm开始

After starting the application scan the barcode and view the application on the expo app. You should see a view similar to the screenshot below:

启动应用程序后，扫描条形码并在expo应用程序上查看该应用程序。您应该看到类似于以下屏幕截图的视图：

Another option for testing on a mobile device is using an emulator or simulator. Using Android studio or Xcode on macOS, you can boot emulators or simulators for their respective platforms. Download and install the tool for the platform of choice, Xcode for iOS and Android studio for Android. After installation, run any of the following commands to start the application:

在移动设备上进行测试的另一种方法是使用模拟器。在macOS上使用Android studio或Xcode ，您可以为各自的平台启动模拟器。下载并安装用于所选平台的工具，适用于iOS的Xcode和适用于Android的Android studio。安装后，运行以下任何命令以启动应用程序：

npm run ios
npm运行ios
# OR
＃要么
npm run android
npm运行android

创建一个Giphy应用程序 (Creating a Giphy application)

To get started consuming the Giphy API, you’ll need to create or log in to a Giphy account. Create one if you haven’t already. The next step is to create an app on the developer platform. On your developer account dashboard, there is a Create App button. Click it and fill in the details about your application.

要开始使用Giphy API，您需要创建或登录Giphy 帐户。如果尚未创建一个。下一步是在开发人员平台上创建一个应用程序。在开发人员帐户仪表板上，有一个“ Create App按钮。单击它并填写有关您的应用程序的详细信息。

After creating the app, your new application should be displayed on your dashboard with an API key. This key will be used when making requests to Giphy

创建应用程序后，应使用API密钥将新应用程序显示在仪表板上。向Giphy提出请求时将使用此密钥

Giphy’s Javascript SDK will be used to make requests to the Giphy service itself. Run the following command to install the package:

Giphy的Javascript SDK将用于向Giphy服务本身发出请求。运行以下命令以安装软件包：

npm install --save giphy-js-sdk-core
npm install-保存giphy-js-sdk-core

Now your project is ready to consume the Giphy APIs with the help of this SDK.

现在，您的项目已准备好在此SDK的帮助下使用Giphy API。

应用程序组件 (App component)

Open the App.vue file in the root folder and update it like the snippet below:

打开根文件夹中的App.vue文件，然后像下面的代码片段一样对其进行更新：

<template>
    <view>
        <scroll-view class="scroll-view">
           //Todo: Create gif item and header
           <view class="loading-container" :style="{flex: 1, justifyContent: 'center'}" v-if="loading">
              <activity-indicator size="large" color="#0000ff"></activity-indicator>
            </view>         </scroll-view>
    </view>
</template>
<script>
  import Giphy from 'giphy-js-sdk-core';
  const client = Giphy('GIPHY_API_KEY');

  export default {
    name: 'App',
    data() {
      return {
        gifs: [],
        loading: true,
      };
    },
    async created() {
      const response = await client.trending('gifs', {limit: 20});
      this.gifs = response.data;
    },
  };
</script>
<style>
    .scroll-view {
        padding-top: 20px;
        padding-bottom: 30px;
    }
    .loading-container {
        height: 600px;
    }
</style>

In the snippet above, the App component renders a scrollview component that houses the components elements. It only displays an activityindicator, this will be replaced by the list of gifs when the call to the API is complete.

在上面的代码段中， App组件呈现了一个滚动视图组件，其中包含了components元素。它仅显示一个活动指示器，当对API的调用完成时，它将由gif列表替换。

The Giphy client is instantiated using the API key obtained from the developers dashboard. Be sure to replace the placeholder string with the API key. Calling the trending method makes a call to the Giphy trending endpoint. The first provided parameter is gifs: this indicates which trending items should be returned, either gifs or stickers. The second parameter is an object providing optional parameters like the limit, offset, rating and fmt (format).

使用从开发人员仪表板获得的API密钥实例化Giphy客户端。确保使用API密钥替换占位符字符串。调用trending方法将调用Giphy趋势端点。提供的第一个参数是gifs ：指示应返回哪些趋势项目，即gifs或stickers 。第二个参数是一个对象，提供可选参数，例如limit ， offset ， rating和fmt (格式)。

The only parameter used in this code is the limit parameter, which restricts the results to 20 items. This call is made in the created lifecycle of the component. Finally the gif list is used to render the returned results.

此代码中使用的唯一参数是limit参数，该参数将结果限制为20个项目。在组件的已created生命周期中进行此调用。最后， gif列表用于呈现返回的结果。

After reloading, the application should display the activity indicator:

重新加载后，应用程序应显示活动指示器：

创建gif项目组件 (Creating the gif item component)

Each gif item will be displayed using a View component. The View component is an important building block in the framework. It supports layout using flexbox, styling and accessibility. Each item will display the gif, title and type. Create a folder components in the root folder. Within the components directory, create a file named GifItem.vue and add the following code:

每个gif项目都将使用“ View组件显示。 View组件是框架中的重要构建块。它支持使用flexbox的布局，样式和可访问性。每个项目将显示gif，标题和类型。在根文件夹中创建一个文件夹components 。在components目录中，创建一个名为GifItem.vue的文件，并添加以下代码：

// GifItem.vue

<template>
  <view class="container">
    <image class="img" :source="{uri: `${gif.images.original.url}`}" style="max-width:100%;"/>
    <text class="title">{{titleCase(gif.title)}}</text>
  </view>
</template>
<script>
export default {
  name: "GifItem",
  props: ["gif"],
  methods: {
    titleCase(text) {
      const textArray = text.split(" ");
      return textArray
        .map(text => {
          const trimmedText = text.trim();
          return `${trimmedText[0].toUpperCase()}${trimmedText.slice(1)}`;
        })
        .join(" ");
    }
  }
};
</script>
<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  position: relative;
}
.img {
  height: 200px;
  width: 300px;
}
.title {
  font-size: 14px;
  font-weight: 500;
  margin-top: 7px;
}
</style>

The Image component will be used to display the source of each gif and the Text component will be used to display the gif title. The Image component takes a source prop which is an object with a uri property.

“ 图像”组件将用于显示每个gif的源，“ 文本”组件将用于显示gif标题。 Image组件采用一个source prop，该对象是具有uri属性的对象。

The titleCase method takes the title of each gif and returns the text in title case, capitalizing the first letter of each word in the text. The GifItem component will take a single prop gif.

titleCase方法获取每个gif的标题，并以标题大小写形式返回文本，将文本中每个单词的首字母大写。 GifItem组件将使用单个prop gif 。

Update the App.vue file to include the new GifItem using the the snippet below:

使用以下代码段更新App.vue文件以包括新的GifItem ：

<template>
    <view>
        <scroll-view class="scroll-view">
            <gif-item v-for="gif in gifs" :gif="gif" :key="gif.id" v-if="!loading"/>
            <view class="loading-container" :style="{flex: 1, justifyContent: 'center'}" v-if="loading">
                <activity-indicator size="large" color="#0000ff"></activity-indicator>
            </view>
        </scroll-view>
    </view>
</template>
<script>
  import Giphy from 'giphy-js-sdk-core';
  const client = Giphy('API_KEY');
  import GifItem from './components/GifItem';

  export default {
    name: 'App',
    data() {
      return {
        gifs: [],
        loading: true
      };
    },
    async created() {
      const response = await client.trending('gifs', {limit: 20});
      this.gifs = response.data;
      this.loading = false;
    },
    components: {GifItem}
  };
</script>
<style>
    .scroll-view {
        padding-top: 20px;
        padding-bottom: 30px;
    }
    .loading-container {
        height: 600px;
    }
</style>

When you open the application in the expo app, you’ll see something similar to this screenshot:

在expo应用程序中打开该应用程序时，您将看到类似于以下屏幕截图的内容：

If your local application is not displaying a list of gifs, ensure that your code matches the snippets in this tutorial, and that your Giphy API key is valid.

如果您的本地应用程序未显示gif列表，请确保您的代码与本教程中的代码段匹配，并且您的Giphy API密钥有效。

标头组件 (Header component)

Now that the application can retrieve and display a list of trending gifs, let’s include a header to give the application context. The View component will be used to create an area that will act as the header for the application. Create a file called header.vue within the components directory and update it with the code below:

现在，应用程序可以检索并显示趋势gif列表，让我们包括一个标题以提供应用程序上下文。 View组件将用于创建一个区域，该区域将充当应用程序的标题。在components目录中创建一个名为header.vue的文件，并使用以下代码对其进行更新：

// /components/header.vue
<template>
    <view class="header-container">
        <text class="header">Trending</text>
    </view>
</template>
<script>
  export default {
    name: 'header.vue'
  };
</script>
<style scoped>
    .header-container {
        background-color: rgba(0, 0, 0, 0.05);
        display: flex;
        justify-content: center;
        padding-top: 15px;
        padding-bottom: 15px;
        border-bottom-color: aquamarine;
        border-bottom-width: 1px;
        margin-top: 20px;
    }
    .header {
        font-size: 16px;
        color: black;
        opacity: 0.8;
        font-weight: 600;
        text-align: center;
    }
</style>

Now add the header component to the App component. This will display a header at the top of the application. Update the App.vue file to include the Header component:

现在，将header组件添加到App组件。这将在应用程序顶部显示标题。更新App.vue文件以包含Header组件：

<template>
    <view>
        <header/>
        <scroll-view class="scroll-view">
            ...
        </scroll-view>
    </view>
</template>
<script>
  import Giphy from 'giphy-js-sdk-core';
  const client = Giphy('TxuQbNU1nyDBwpqrcib61LxmOzsXTPEk');

  import GifItem from './components/GifItem';
  import Header from './components/header';

  export default {
    name: 'App',
    data() {
     ...
    },
    async created() {
      ...
    },
    components: {GifItem, Header}
  };
</script>
<style>
   ...
</style>

After the application refreshes the header will be added to the top of the application.

应用程序刷新后，标题将添加到应用程序的顶部。

The components provided by Vue Native have done all of the work required to render, order, and display the list of trending gifs.

Vue Native提供的组件已完成渲染，排序和显示趋势gif列表所需的所有工作。

在Android上部署应用程序 (Deploying the application on Android)

The final step in this tutorial is to deploy the application to the Android Play store. First, you will need to update app.json to include Android specific properties. Open the app.json file and update the file to include the `android` field:

本教程的最后一步是将应用程序部署到Android Play商店。首先，您需要更新app.json以包含Android特定的属性。打开app.json文件并更新文件，使其包含`android`字段：

{
  "expo": {
    ...
    "android": {
      "package": "com.vue.gifs"
    }
  }
}

The android.package field is a unique value that will represent your package in the app store. You can read more on the package naming convention here. After updating the file, run the npm run build:android command.

android.package字段是一个唯一值，它将代表您在应用商店中的包。您可以在此处阅读有关包命名约定的更多信息。更新文件后，运行npm run build:android命令。

npm run build:android
npm运行build：android

This command will present you with a prompt, asking you to provide a keystore or to generate a new one. If you have an existing keystore, you can select this option or let expo generate one for your application.

此命令将提示您，要求您提供密钥库或生成一个新的密钥库。如果您现有密钥库，则可以选择此选项，或者让expo为您的应用程序生成一个。

After completion, a download link will be generated for your application, clicking on this link will be trigger a download for your apk.

完成后，将为您的应用程序生成一个下载链接，单击此链接将触发您的apk下载。

To deploy the downloaded APK to the Android Play Store, visit the Play Console to create an account. You will need to pay a registration fee of $25 before proceeding. When registration is complete, visit this page and follow the steps to upload your application to the Play Store.

要将下载的APK部署到Android Play商店，请访问Play控制台创建一个帐户。在继续操作之前，您需要支付$ 25的注册费。注册完成后，请访问此页面并按照步骤将您的应用程序上传到Play商店。

摘要 (Summary)

Vue Native is a useful framework to build applications for mobile platforms using Vuejs. Vue Native compiles to React and uses components provided by React Native. As as the time of writing, some of its components require that you write JSX with the actual React Native components. Since Vue native works with React native, you can follow the official React native documentation to learn more about it.

Vue Native是一个有用的框架，可以使用Vuejs为移动平台构建应用程序。 Vue Native编译为React并使用React Native提供的组件。在撰写本文时，其某些组件要求您使用实际的React Native组件编写JSX。由于Vue本机可以与React本机一起使用，因此您可以阅读官方的React本机文档以了解更多信息。

You can view the source code for the demo on GitHub.

您可以在GitHub上查看该演示的源代码。

翻译自: https://www.digitalocean.com/community/tutorials/how-to-setup-build-and-deploy-native-apps-with-vue

vue项目构建和部署