Vue Native开发环境搭建教程：Windows/macOS/Linux全平台指南

你是否在寻找一种简单高效的方式来构建跨平台原生移动应用？Vue Native 让你能够使用 JavaScript 和 Vue.js 的语法来开发 iOS 和 Android 应用。本教程将详细介绍如何在 Windows、macOS 和 Linux 系统上搭建 Vue Native 开发环境，无论你是初学者还是有经验的开发者，都能轻松上手。

关于 Vue Native

Vue Native 是一个基于 React Native 的框架，它允许开发者使用 Vue.js 的语法来构建原生移动应用。通过 Vue Native，你可以享受到 Vue.js 的简洁语法和 React Native 的原生性能，同时开发出能够在 iOS 和 Android 平台上运行的应用。

官方文档：README.md 核心源码：src/core/

环境准备

在开始搭建 Vue Native 开发环境之前，你需要确保系统中已经安装了以下软件：

• Node.js (推荐 v14 及以上版本)
• npm 或 yarn 包管理器
• Git

安装 Node.js 和 npm

Node.js 是 Vue Native 开发的基础，你可以通过以下方式安装：

Windows 和 macOS： 访问 Node.js 官网下载安装包：https://nodejs.org/

Linux：

sudo apt update
sudo apt install nodejs npm

安装完成后，你可以通过以下命令验证安装是否成功：

node -v
npm -v

安装 Vue Native CLI

Vue Native 提供了官方的命令行工具 Vue Native CLI，它可以帮助你快速创建和管理 Vue Native 项目。

打开终端，运行以下命令安装 Vue Native CLI：

npm install vue-native-cli -g

Vue Native CLI 源码：packages/vue-native-scripts/

安装 Expo CLI 或 React Native CLI

Vue Native 项目需要依赖 Expo 或 React Native 的构建工具，你可以根据自己的需求选择其中一种：

安装 Expo CLI (推荐新手使用)

Expo 提供了一套完整的工具链，让你可以快速开发和测试 React Native 应用，而无需配置复杂的原生开发环境。

npm install expo-cli -g

安装 React Native CLI (适合需要深度原生开发的场景)

如果你需要更深入地控制原生代码，可以选择安装 React Native CLI：

npm install react-native-cli -g

创建 Vue Native 项目

使用 Vue Native CLI 可以轻松创建一个新的 Vue Native 项目。在终端中运行以下命令：

vue-native init MyFirstVueNativeApp

这个命令会创建一个名为 MyFirstVueNativeApp 的新项目，并自动安装所需的依赖。

项目创建流程：

1. 选择使用 Expo 或 React Native 模板
2. 等待依赖安装完成
3. 进入项目目录：cd MyFirstVueNativeApp

项目模板文件：src/platforms/vue-native/

配置现有 React Native 项目

如果你已经有一个现有的 React Native 项目，也可以将 Vue Native 集成到其中。具体步骤如下：

1. 安装必要的依赖：

npm install --save vue-native-core vue-native-helper
npm install --save-dev vue-native-scripts

2. 创建 metro.config.js 文件：

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("./vueTransformerPlugin.js"),
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      })
    },
    resolver: {
      sourceExts: [...sourceExts, "vue"]
    }
  };
})();

3. 创建 vueTransformerPlugin.js 文件：

const vueNativeScripts = require("vue-native-scripts");
const upstreamTransformer = require("metro-react-native-babel-transformer");

const vueExtensions = ["vue"];

module.exports.transform = function ({ src, filename, options }) {
  if (vueExtensions.some(ext => filename.endsWith("." + ext))) {
    return vueNativeScripts.transform({ src, filename, options });
  }
  return upstreamTransformer.transform({ src, filename, options });
};

配置指南：converting-react-native-project.md

运行项目

项目创建完成后，你可以使用以下命令运行应用：

使用 Expo 运行

expo start

这个命令会启动 Expo 开发服务器，并生成一个二维码。你可以使用 Expo Go 应用扫描二维码，在手机上预览你的应用。

使用 React Native 运行

iOS：

react-native run-ios

Android：

react-native run-android

注意：使用 React Native 运行需要配置相应的原生开发环境（Xcode 或 Android Studio）。

运行脚本：scripts/

常见问题解决

1. 依赖安装失败

如果在安装依赖过程中遇到问题，可以尝试以下解决方法：

• 清除 npm 缓存：npm cache clean --force
• 使用 yarn 代替 npm：yarn install

2. 项目启动时报错

如果项目启动时出现错误，可能是由于 Metro bundler 缓存问题导致的。你可以尝试以下命令清除缓存：

expo start --clear
# 或
react-native start --reset-cache

3. 原生依赖问题

对于一些需要原生代码支持的第三方库，你可能需要运行以下命令来链接原生依赖：

react-native link

问题排查参考：tests/unit/features/instance/init.spec.js

总结

通过本教程，你已经了解了如何在 Windows、macOS 和 Linux 系统上搭建 Vue Native 开发环境。现在你可以开始创建自己的 Vue Native 应用了！

如果你想深入学习 Vue Native 的更多功能，可以参考官方文档和示例代码：

• 官方文档：README.md
• 组件文档：COMPONENT.md
• 转换现有 React Native 项目：converting-react-native-project.md

祝你在 Vue Native 的开发之旅中取得成功！如果你有任何问题或建议，欢迎参与项目贡献。

贡献指南：src/core/global-api/use.js