MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Vue CLI 跨平台支持与移动端适配的最佳实践

2022-12-316.7k 阅读

Vue CLI 跨平台支持概述

Vue CLI 是 Vue.js 开发的标准工具链，它为开发者提供了一个快速搭建 Vue 项目的方式，并且在跨平台支持方面有着出色的表现。跨平台意味着我们的应用程序能够在不同的操作系统和设备上运行，如桌面端（Windows、MacOS、Linux）以及移动端（iOS、Android）。

1. 跨平台原理基础

Vue CLI 基于 Web 技术，利用 HTML、CSS 和 JavaScript 构建应用。在跨平台场景下，通过不同的技术框架将 Web 应用包装成不同平台原生应用的形式。例如，在移动端可以使用 Cordova 或 Capacitor 将 Vue 应用打包成 iOS 和 Android 应用，在桌面端可以使用 Electron 将 Vue 应用变成桌面应用。这些框架在不同平台上提供了原生的运行环境，并通过 WebView 来加载和渲染我们的 Vue 应用。

2. 为什么选择 Vue CLI 进行跨平台开发

Vue CLI 提供了高度的可定制性。它通过插件系统，可以方便地集成各种跨平台工具。例如，安装 @vue - cli - plugin - cordova 插件就可以轻松将 Vue 项目转化为 Cordova 项目，进而打包成移动端应用。而且，Vue 的组件化架构使得代码的复用性极高，无论是在 Web 端、移动端还是桌面端，很多组件可以共享，大大提高了开发效率。

使用 Vue CLI 实现跨平台开发的具体步骤

1. 创建基础 Vue 项目

首先，确保你已经安装了 Vue CLI。如果没有安装，可以通过 npm 进行全局安装：

npm install -g @vue/cli

然后创建一个新的 Vue 项目：

vue create my - cross - platform - app

在创建项目过程中，Vue CLI 会提示你选择一些配置，如是否使用 Babel、ESLint 等。根据项目需求进行选择。

2. 配置移动端跨平台支持（以 Cordova 为例）

安装 Cordova 插件：

vue add cordova

这个命令会自动安装 @vue - cli - plugin - cordova 以及 Cordova 的相关依赖。安装完成后，项目目录下会新增 cordova 文件夹，里面包含了 Cordova 项目的配置文件。

接下来，添加移动端平台。假设要添加 Android 平台：

cd cordova
cordova platform add android

添加 iOS 平台则执行：

cordova platform add ios

注意，添加 iOS 平台需要在 macOS 系统上进行，并且需要安装 Xcode 以及相关的 iOS 开发环境。

3. 配置桌面端跨平台支持（以 Electron 为例）

安装 Electron 插件：

vue add electron - builder

该插件会自动配置 Electron 相关的依赖和构建脚本。安装完成后，项目中会新增 electron - builder 相关的配置文件。

Electron 允许你使用前端技术栈构建桌面应用。通过 main.js 文件来控制应用的主进程，通过 renderer.js 文件来控制渲染进程（即显示页面的进程）。例如，在 main.js 中可以设置窗口的大小、位置、是否可最大化等属性：

const { app, BrowserWindow } = require('electron')

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    })

    win.loadURL('http://localhost:8080')
}

app.whenReady().then(() => {
    createWindow()

    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow()
        }
    })
})

app.on('window - all - closed', () => {
    if (process.platform!== 'darwin') {
        app.quit()
    }
})

上述代码创建了一个 800x600 大小的窗口，并加载了本地运行的 Vue 应用（假设 Vue 应用运行在 http://localhost:8080）。

移动端适配基础概念

1. 视口（Viewport）

在移动端开发中，视口是一个非常重要的概念。视口分为布局视口（layout viewport）、视觉视口（visual viewport）和理想视口（ideal viewport）。

  • 布局视口：是浏览器用来进行 CSS 布局的参考，通常比设备屏幕宽，目的是为了让桌面网站在移动端也能有较好的布局展示。例如，早期移动浏览器的布局视口宽度可能是 980px，即使设备屏幕宽度只有 320px。
  • 视觉视口：用户在屏幕上实际看到的区域，用户可以通过缩放来改变视觉视口的大小。
  • 理想视口：为了让网站在移动端有最佳的显示效果，设备厂商提出了理想视口的概念。理想视口的宽度等于设备屏幕的宽度，不需要用户手动缩放就可以完整显示网页内容。

在 HTML 中，可以通过设置 <meta> 标签来控制视口：

<meta name="viewport" content="width=device - width, initial - scale = 1.0, maximum - scale = 1.0, user - scalable = no">

上述代码设置了视口宽度等于设备宽度，初始缩放比例为 1，最大缩放比例为 1，并且禁止用户缩放。

2. 像素概念

在移动端适配中，还需要清楚物理像素、设备独立像素和 CSS 像素的概念。

  • 物理像素：也叫设备像素，是显示设备中一个最微小的物理部件，每个物理像素可以显示不同的颜色。
  • 设备独立像素：也叫逻辑像素，是操作系统用来衡量屏幕大小的单位。不同设备的物理像素和设备独立像素的比例是不同的，这个比例被称为像素比（devicePixelRatio）。
  • CSS 像素：是浏览器用来渲染网页的单位，在 CSS 中设置的尺寸通常就是 CSS 像素。在标准情况下，1 个 CSS 像素等于 1 个设备独立像素。但在高像素比的设备上，1 个 CSS 像素可能对应多个物理像素。

例如，在 iPhone 6 上，设备宽度是 375 设备独立像素，像素比是 2，那么屏幕的物理像素宽度就是 750 像素。

基于 Vue CLI 的移动端适配最佳实践

1. 使用 Flexbox 布局

Flexbox（弹性盒子布局）是 CSS3 引入的一种灵活的布局模式，非常适合移动端适配。它可以方便地实现水平和垂直居中、自适应布局等。

例如，假设我们有一个简单的 Vue 组件，需要实现一个水平居中且等分布局的列表：

<template>
    <div class="container">
        <div v - for="(item, index) in list" :key="index" class="item">{{ item }}</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: ['Item 1', 'Item 2', 'Item 3']
        }
    }
}
</script>

<style scoped>
.container {
    display: flex;
    justify - content: space - around;
    flex - wrap: wrap;
}

.item {
    width: 30%;
    background - color: lightblue;
    margin: 10px;
    padding: 10px;
}
</style>

在上述代码中，通过 display: flex 将容器设置为弹性布局，justify - content: space - around 使得子元素在水平方向上等间距分布，flex - wrap: wrap 允许子元素在容器宽度不够时换行显示。

2. 媒体查询（Media Queries）

媒体查询是 CSS 中一种根据设备特性来应用不同样式的技术。在移动端适配中，可以通过媒体查询来针对不同屏幕宽度设置不同的样式。

例如，我们可以为不同屏幕宽度的设备设置不同的字体大小：

body {
    font - size: 16px;
}

@media (max - width: 480px) {
    body {
        font - size: 14px;
    }
}

@media (max - width: 320px) {
    body {
        font - size: 12px;
    }
}

上述代码表示当屏幕宽度小于等于 480px 时，字体大小设置为 14px；当屏幕宽度小于等于 320px 时，字体大小设置为 12px。

在 Vue 项目中，可以将媒体查询样式写在组件的 <style> 标签内，也可以写在全局的 CSS 文件中。

3. 使用 rem 单位

rem（root em）是一种相对单位，它相对于根元素（即 <html> 元素）的字体大小。在移动端适配中，通过动态设置根元素的字体大小，可以实现等比例缩放的效果。

首先，在项目入口文件（如 main.js）中添加如下代码来动态设置根元素字体大小：

function setRemUnit() {
    const designWidth = 750 // 设计稿宽度
    const html = document.documentElement
    const clientWidth = html.clientWidth
    html.style.fontSize = clientWidth / designWidth * 100 + 'px'
}

setRemUnit()
window.addEventListener('resize', setRemUnit)

上述代码根据设备屏幕宽度动态计算根元素的字体大小，假设设计稿宽度是 750px。

然后在 CSS 中使用 rem 单位：

.container {
    width: 3.75rem; /* 对应 375px，假设根元素字体大小为 100px */
    height: 2rem;
    background - color: lightgreen;
}

这样，当设备屏幕宽度变化时，元素的尺寸会等比例缩放。

4. 图片适配

在移动端，不同设备的屏幕像素比不同，为了保证图片在高清屏幕上也能清晰显示，需要提供不同分辨率的图片。

可以使用 <img> 标签的 srcset 属性来实现：

<img src="small.jpg"
     srcset="small.jpg 1x, medium.jpg 2x, large.jpg 3x"
     alt="Responsive Image">

上述代码中，浏览器会根据设备的像素比自动选择合适的图片。如果设备像素比是 1，会加载 small.jpg；如果是 2，会加载 medium.jpg；如果是 3，会加载 large.jpg。

在 Vue 项目中，可以将图片路径放在数据中，通过 v - bind 指令来动态设置 src 和 srcset 属性：

<template>
    <img :src="image.src" :srcset="image.srcset" alt="Responsive Image">
</template>

<script>
export default {
    data() {
        return {
            image: {
                src: 'small.jpg',
                srcset:'small.jpg 1x, medium.jpg 2x, large.jpg 3x'
            }
        }
    }
}
</script>

5. 引入第三方适配库

除了上述方法，还可以引入一些第三方适配库来简化移动端适配工作。例如，lib-flexible 库可以帮助我们更方便地实现基于 rem 的适配布局。

首先安装 lib-flexible：

npm install lib - flexible --save

然后在项目入口文件（如 main.js）中引入：

import 'lib - flexible'

lib-flexible 会自动根据设备屏幕宽度设置根元素的字体大小，并提供一些适配相关的 CSS 类。例如，它会根据不同的屏幕宽度设置 html 元素的 data - dpr 属性，我们可以利用这个属性来设置不同像素比下的样式：

[data - dpr="1"] body {
    font - size: 12px;
}

[data - dpr="2"] body {
    font - size: 24px;
}

[data - dpr="3"] body {
    font - size: 36px;
}

跨平台项目的优化与部署

1. 性能优化

  • 代码拆分：在跨平台项目中，代码体积可能会比较大。可以使用 Vue CLI 提供的代码拆分功能，将代码按需加载。例如，在路由组件中使用动态导入：
const router = new VueRouter({
    routes: [
        {
            path: '/home',
            component: () => import('./views/Home.vue')
        }
    ]
})

这样只有在访问 /home 路由时，才会加载 Home.vue 组件的代码，减少了初始加载的代码体积。

  • 图片压缩：对于移动端应用，图片是占用流量的大户。可以使用工具如 image - webpack - loader 对图片进行压缩。首先安装：
npm install image - webpack - loader --save - dev

然后在 webpack 配置文件（通常在 vue.config.js 中）添加如下配置：

module.exports = {
    chainWebpack: config => {
        config.module
          .rule('images')
          .use('image - webpack - loader')
          .loader('image - webpack - loader')
          .options({
                mozjpeg: {
                    progressive: true,
                    quality: 65
                },
                // optipng.enabled: false will disable optipng
                optipng: {
                    enabled: false
                },
                pngquant: {
                    quality: [0.65, 0.90],
                    speed: 4
                },
                gifsicle: {
                    interlaced: false
                },
                // the webp option will enable WEBP
                webp: {
                    quality: 75
                }
            })
          .end()
    }
}

上述配置对不同格式的图片进行了压缩设置，减少图片文件大小。

2. 部署

  • 移动端部署：对于使用 Cordova 构建的移动端应用，在构建完成后，可以将生成的 apk 文件（Android 平台）或 ipa 文件（iOS 平台）发布到相应的应用商店。例如，在 Android 平台上，可以通过 Android Studio 对 apk 文件进行签名，然后上传到 Google Play 商店。
  • 桌面端部署：使用 Electron - builder 构建的桌面应用，可以通过 electron - builder 提供的命令将应用打包成不同平台的安装包。例如，要生成 Windows 平台的安装包，可以执行：
npm run electron:build -- --win

生成的安装包可以在项目的 dist_electron 目录下找到，然后可以将其发布到相关的软件下载平台。

通过上述方法，我们可以利用 Vue CLI 实现跨平台支持，并进行移动端适配，打造出在不同平台上都能良好运行的应用程序。在实际开发过程中，需要根据项目的具体需求和目标用户群体，灵活选择和组合这些技术和方法，以达到最佳的开发效果。同时，要不断关注技术的发展和新的适配方案，以适应不断变化的移动设备和用户需求。