手拉手带你用 Vue3 + VantUI 写一个移动端脚手架 系列一 (概述)

1,795 阅读7分钟

我正在参加「掘金·启航计划」

项目地址(持续迭代中):github.com/jyliyue/vit…

前言

Vue3 已经发布有一段时间了,相关的教程也很丰富,但大多都是针对开发后台管理系统展开的,鲜有对如何构建一个移动端项目做一个系统介绍的教程,本次开坑,会专门针对移动端脚手架的搭建做一个系列的教程,教程会涉及基于 vite 的项目构建配置,移动端项目如何使用 vw 适配,底部安全区兼容性处理问题,使用 keep-alive 结合列表实现页面缓存,以及 vue3 如何优雅的使用 composition Api 的一点个人实践心得等等,希望对大家的日常工作有所帮助。

目录结构

├── .vscode           // 项目 vscode 插件配置
├── build             // 构建相关
├── library           // 公共依赖/公共组件 可打包独立组件
├── public            // 静态资源 该目录下静态资源应该避免被项目 js 引用
├── src               // 源代码
│   ├── apis          // 接口请求
│   ├── assets        // 图片,字体等静态资源
│   ├── class         // 业务类
│   ├── components    // 业务组件
│   ├── router        // 路由
│   ├── store         // 状态管理
│   ├── utils         // 项目公共方法
│   └── views         // 页面
│   ├── main.js       // 入口 加载组件 初始化
│   ├── App.vue       // 入口页面
├── .env              // 环境变量
├── .eslintrc.cjs     // eslint 配置项
├── .prettierrc.cjs   // prettier 配置项
├── jsconfig.json     // 项目编译器配置选项
├── package.json      // 依赖文件
└── vite.config.js    // 构建脚本

IDE 配置

.vscode

这里的项目配置主要是为了统一项目团队的插件配置,便于成员快速进入开发状态。

这里仅做了简单的保存自动格式化代码样式,其他的配置请自己根据需要添加。

{
    "editor.codeActionsOnSave": {
        "source.fixAll.stylelint": true,
        "source.fixAll.eslint": true
    },
    "editor.formatOnType": true
}

项目构建配置 build

该目录主要是对 vite.config.js 文件按功能模块进行分割,方便维护和方案定制

├── alias.js    // 路径别名配置
├── resolve.js  // 导入配置
├── css.js      // 配置公共 css, px 自动转 vw
├── plugins.js  // 各种插件,自动引入依赖,环境变量注入 html 模板等
└── server.js   // 开发服务配置

1. 配置路径别名

在 alias.js 文件配置你想要访问的路径别名

const alias = {
    '~': pathResolve('../library'),
    '@': pathResolve('../src')
}

记得在 jsconfig 中也把别名维护

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": ["src/*"],
            "~/*": ["library/*"]
        },
        "jsx": "preserve"
    },
    "include": ["**/*.js", "**/*.vue"],
    "exclude": ["node_modeules", "dist"]
}

这样就可以正常在项目中使用别名路径了

2. CSS 样式相关配置

全局加载 scss 样式变量

// 我们把公司公共可复用的样式都维护到了 library/styles 目录下
preprocessorOptions: {
    scss: {
        additionalData: `@import "library/styles/variables/variables.module.scss";`
    }
}

使用 postcss-px-to-viewport 对单位预处理

这里就涉及到了移动端适配的一些问题,展开简单讲一下,大家看完也可单独应用到自己项目中

首先 lib-flexible + postcss-pxtorem 是解决移动端布局的主流,但是我们可以好好想一想,它是否有什么不足?

github.com/amfe/lib-fl…

翻阅其github地址,可以看到这样一段有意思的话:

20210812153419

从我个人来说,我认为它主要有以下两个不足:

  • 两个插件需要配套使用,而且rootValue设置的值不好理解
  • rem是相对于html元素字体单位的一个相对单位,从本质上来说,它属于一个字体单位,用字体单位来布局,并不是太合适

viewport 方案实践

  • 安装 postcss-px-to-viewport 插件
npm i postcss-px-to-viewport -D
  • 在 postcss 属性下添加插件配置
postcss: {
    plugins: [
        postcsspxtoviewport({
            unitToConvert: 'px', // 要转化的单位
            viewportWidth: 750, // UI设计稿的宽度
            unitPrecision: 6, // 转换后的精度,即小数点位数
            propList: ['*'], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换
            viewportUnit: 'vw', // 指定需要转换成的视窗单位,默认vw
            fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位,默认vw
            selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名,
            minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
            mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false
            replace: true, // 是否转换后直接更换属性值
            exclude: [/node_modules/], // 设置忽略文件,用正则做目录名匹配
            landscape: false // 是否处理横屏情况
        })
    ]
}

设置完运行项目,就会自动把项目里的 px 单位转化为 vw 了

3. 常用 Plugins 插件配置

vite-plugin-html

该插件主要用于对 html 模板文件进行环境变量的替换

  • 安装 vite-plugin-html
npm i vite-plugin-html -D
  • 使用 loadEnv 获取环境变量
import { loadEnv } from 'vite'// mode 变量可在 vite.config.js 暴露的方法中获取
const env = loadEnv(mode, process.cwd())
  • 在 plugins 属性中添加插件配置
const plugins = (mode) => {
    const env = loadEnv(mode, process.cwd())
    return [
        vue(),
        createHtmlPlugin({
            inject: {
                data: env // 这里可以根据你的项目需要添加更多数据
            }
        })
    ]
}
  • 配置完后即可在 html 中获取 env 的配置了,这里以应用名称为例
<title><%- VITE_APP_TITLE %></title>

unplugin-auto-import

自动导入常用 vue 及 vue 相关插件的 API

相信大家在写 vue3 项目时对经常要手动引入 reactive,useRouter,onMounted 等方法感到厌烦,有了他,大家就可以愉快的调用勾子,不用每次都自己手动引入了

  • 安装 unplugin-auto-import
npm i unplugin-auto-import -D
  • 在 plugins 属性中添加插件配置
import AutoImport from 'unplugin-auto-import/vite'const plugins = (mode) => {
    return [
        vue(),
        AutoImport({
            imports: ['vue', 'vue-router', 'pinia'], // 自动导入vue和vue-router相关函数
            eslintrc: {
                enabled: true, // Default `false`
                filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
                globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
            }
        }),
    ]
}
  • 配置完后运行项目,就可以愉快的使用常用的 vue 方法了
  • 此时会在根目录自动生成 .eslintrc-auto-import.json 文件,将它配置在 eslintrc.cjs 中
module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true
    },
    extends: [
        'plugin:vue/vue3-essential',
        'standard',
        'plugin:prettier/recommended',
        '.eslintrc-auto-import.json' // 添加配置
    ],
    parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module'
    },
    plugins: ['vue'],
    rules: {
        'vue/multi-word-component-names': 'off' 
    }
}

这样 eslint 就不会在报错啦~

unplugin-vue-components

跟 unplugin-auto-import 相似,该插件能自动导入你常用的公共组件,避免每次都手动添加

  • 安装 unplugin-vue-components
npm i unplugin-vue-components -D
  • 在 plugins 属性中添加插件配置

我这里配置了自动引入 vantui 组件和 library 目录下自己封装的常用组件

import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'const plugins = (mode) => {
    return [
        vue(),
        Components({
            resolvers: [VantResolver()],    // 自动加载 vant 组件
            dirs: ['./library/components']  // 自动加载 library/components 目录下的组件
        })
    ]
}

配置完后,就可以在项目中方便的写这些常用的组件标签了~

4. server 开发服务相关配置

开发服务配置主要的用处就是配置接口代理,相关文章有很多,这里就不赘述了

const server = {
    host: '0.0.0.0',
    port: 3000,
    open: true,
    proxy: {
        '/proxyApi/': {
            target: 'https://target',
            changeOrigin: true,
            rewrite: (path) => path
        }
    }
}

代码风格规范

eslint + prettier

该项目使用了 eslint 的 standard 配合 prettier 来做代码风格规范

如果是在自己的项目中配置,需要注意 eslint 和 prettier 有些配置是有冲突的,可以通过引用 plugin:prettier/recommended 来解决

贴上 eslintrc.cjs 和 prettierrc.cjs 配置供参考

  • eslintrc.cjs
module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true
    },
    extends: [
        'plugin:vue/vue3-essential',
        'standard',
        'plugin:prettier/recommended',
        '.eslintrc-auto-import.json'
    ],
    parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module'
    },
    plugins: ['vue'],
    rules: {
        'vue/multi-word-component-names': 'off' // 关闭名称校验
    }
}
  • prettierrc.cjs
module.exports = {
    // 根据自己项目需要
    tabWidth: 4, //缩进长度
    semi: false, //句末使用分号
    singleQuote: true, //使用单引号
    trailingComma: 'none', // 句末逗号
    bracketSameLine: false, // 标签换行
}

包管理工具

关于包管理工具目前主流的有 npm , yarn , pnpm 等,大家应该都是很熟悉的,就不做过多介绍了,这里推荐没有用过 pnpm 的同学可以搞一搞,真的很香,可以大幅减少项目 node_modules 的体积,基于依赖包的软连接,也能极大提高依赖的安装速度。

好了,本篇对项目的运行配置介绍告一段落,下篇开始会对该项目的通用功能例如一些常见的移动端样式兼容, vue3 中 keep-alive 的应用做详细的介绍,敬请大家期待!

\