创建Vue3 TSX移动端项目及环境配置
2024-02-08 16:46:38
各位前端老司机们，欢迎来到前端跨端开发系列第一篇。
现在移动端开发，无外乎三大框架：ReactNative，Flutter，Vue开发，而Vue则提供了三大解决方案：
- Vue Native：纯Vue解决方案，技术栈基本都是用Vue来写，包括底层 Native 相关代码；
- Weex：阿里开源框架，支持Vue的语法，但实际上整个实现逻辑跟Vue本身没半毛钱关系；
- Capacitor：Vue通过调用Ionic/Cordova 的 API 来进行跨端开发；
当然，如果我们期望开发支持iOS、Android双平台的项目，那么这个项目必须满足：
- 项目源码必须能同时运行在iOS/Android平台上，而非iOS和Android分别编译不同的代码；
- 跨端开发所用到的第三方库必须同时支持iOS、Android平台，如vue3、axios、echarts等；
- 必须能通过某些工具或框架统一管理、分发打包后的APP。
而如上几个条件正是Capcitor最适合我们的原因，之所以选Vue3，主要是因为项目的某些组件必须和pc端逻辑统一，而且组件有些需要跨端开发，那么Vue3就成了不二之选。
项目创建
下面进入正题，下面咱们来详细说明一下如何用 Vue Cli4 搭建 Vue3 TSX 移动端项目。
首先，打开命令行终端（Windows 系统为 cmd 或 PowerShell，Mac 系统为 Terminal），输入如下命令：
npm install -g @vue/cli@next
安装 Vue Cli4。安装完成后，我们就可以使用 Vue Cli4 来创建一个新的 Vue 项目了。
vue create vue3-mobile-project
项目创建完成后，我们就得到了一个基本的 Vue3 TSX 移动端项目。
区分多环境配置
如果我们直接运行项目，可能会出现一些问题。这是因为，我们目前还没有配置多环境配置。为了解决这个问题，我们需要在 vue.config.js 文件中添加以下代码：
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/production-path/'
: '/'
}
现在，我们可以使用 --mode 参数来指定构建环境。例如，要构建生产环境，我们可以使用以下命令：
vue-cli-service build --mode production
集成eruda移动端调试工具
为了方便调试，我们还可以集成 Eruda 移动端调试工具。首先，我们需要在项目中安装 Eruda：
npm install --save-dev eruda
然后，我们在 main.ts 文件中引入 Eruda：
import eruda from 'eruda'
eruda.init()
现在，我们就可以在移动端浏览器中使用 Eruda 来调试我们的项目了。
运行项目
最后，我们可以使用以下命令来运行项目：
vue-cli-service serve
这样，项目就会在本地运行起来了。我们可以在手机上扫描二维码，就可以在手机上看到项目了。
项目运行成功后，你应该能看到一个简单的 Vue3 移动端应用。这个应用只包含一个简单的文本框和一个按钮，用来展示 Vue3 的基本用法。
以上就是基于 Vue Cli4 搭建 Vue3 TSX 移动端项目的基本步骤。希望这篇文章能帮助你快速入门 Vue3 移动端开发。
