最近接到一个新需求，需要在平板上展示几个页面供公司内部使用，要求桌面上要有APP入口，第一时间就确定了用 Vue3+Vite+Vant+PWA，这里记录一下新项目的搭建过程。

一、搭建Vue3环境

要求 Node.js >= 16.0
在项目目录下执行：

npm create vue@latest

1

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。安装完成后你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

1
2
3
4
5
6
7
8
9
10
11
12

然后进入项目文件夹安装一下依赖：

cd <your-project-name>
npm install

1
2

这样Vue3环境就搭建好了

二、安装vant

安装最新版 Vant

npm i vant

1

安装插件

Vant 提供的常规引入组件的方法通过 Tree Shaking 移除不需要的 JS 代码，但 CSS 样式无法通过这种方式优化，所以这里使用的是按需引入组件样式的方法。

npm i @vant/auto-import-resolver unplugin-vue-components -D

1

配置插件

在 vite.config.js 文件中配置插件：

import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';

export default {
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12

使用组件

完成以上两步，就可以直接在模板中使用 Vant 组件了，unplugin-vue-components 会解析模板并自动注册对应的组件, @vant/auto-import-resolver 会自动引入对应的组件样式。

<template>
  <van-button type="primary" />
</template>

1
2
3

引入函数组件的样式

Vant 中有个别组件是以函数的形式提供的，包括 Toast，Dialog，Notify 和 ImagePreview 组件。在使用函数组件时，unplugin-vue-components 无法解析自动注册组件，导致 @vant/auto-import-resolver 无法解析样式，因此需要在 main.js 中手动引入样式。

import 'vant/es/toast/style'
import 'vant/es/dialog/style'
import 'vant/es/notify/style'
import 'vant/es/image-preview/style'

1
2
3
4

更多信息请查看Vant官方文档

三、安装vite-plugin-pwa

vite-plugin-pwa官方文档

npm install -D vite-plugin-pwa

1

在 vite.config.js 文件中配置插件：

import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['favicon.ico'],
      manifest: {
        name: 'APP name',
        short_name: 'MyApp',
        description: 'My Awesome App description',
        theme_color: '#ffffff',
        icons: [
          {
            src: 'logo-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: 'logo-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      },
      workbox: {
        globPatterns: ['**/*.{js,css,html,ico,png,jpg,svg}']
      },
      devOptions: {
        enabled: true
      }
    }),
  ],
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

警告

必须提供 192x192 和 512x512 两种尺寸的图标，另外如果icon设置大小与实际大小不匹配，都将导致应用无法下载。
如果是局域网192.168.0.xx下也会导致应用无法下载，所以测试时只能在 http://localhost:8000/ 这种本地域名测试，手机要测试只能放到带 https 的测试域名才行。

更多信息可以通过开发者工具查看：
markdown图片

安装完 vite-plugin-pwa 并且配置正确后，该项目就变成一个可下载的应用了(如下图)，安装后将在桌面添加APP图标。
markdown图片

四、安装postcss-px-to-viewport

移动端项目大都需要自适应，这里使用 Vant 推荐的 postcss-px-to-viewport 将 px 转化为 vw 以达到自适应的效果。
由于 postcss-px-to-viewport 停留在 1.1.1 版本已多年未更新，使用后会出现异常报错：postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide:https://evilmartians.com/chronicles/postcss-8-plugin-migration
所以我们需要使用 postcss-px-to-viewport-8-plugin 来替换。

npm i postcss-px-to-viewport-8-plugin -D

1

在最外层新建一个 postcss.config.js 的配置文件，然后写入配置：

module.exports = {
  plugins: {
    'postcss-px-to-viewport-8-plugin': {
      viewportWidth: 375
    }
  }
}

1
2
3
4
5
6
7

具体配置项请查看postcss-px-to-viewport-8-plugin 文档

五、其他

在使用 Vue3 的过程中经常都需要引入 ref onMounted computed 等函数，非常繁琐。我们可以使用 unplugin-auto-import 插件来帮我们完成这些工作，同时前面提到的 Vant 中的 showToast 等以函数形式提供的组件也可以自动引入，这样就不需要在每个使用到的页面都引入一次了。

npm i -D unplugin-auto-import

1

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        'vue',
        'vue-router',
        {
          'vant': ['showToast', 'showDialog', 'showNotify', 'ImagePreview' ]
        }
      ]
    })
  ]
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

还有其他一些必备的：

npm i axios
npm i sass -D

1
2

至此一个支持 PWA 的移动端项目就搭建好了。

Vue3+Vite+Vant+PWA 启动一个新项目

发表评论

共0条评论