项目地址（持续迭代中）：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地址，可以看到这样一段有意思的话：

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

两个插件需要配套使用，而且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 的应用做详细的介绍，敬请大家期待！

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

前言

目录结构

IDE 配置

.vscode

项目构建配置 build

1. 配置路径别名

2. CSS 样式相关配置

全局加载 scss 样式变量

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

viewport 方案实践

3. 常用 Plugins 插件配置

vite-plugin-html

unplugin-auto-import

unplugin-vue-components

4. server 开发服务相关配置

代码风格规范

eslint + prettier

包管理工具

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

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

前言

目录结构

IDE 配置

.vscode

项目构建配置 build

1. 配置路径别名

2. CSS 样式相关配置

全局加载 scss 样式变量

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

viewport 方案实践

3. 常用 Plugins 插件配置

vite-plugin-html

unplugin-auto-import

unplugin-vue-components

4. server 开发服务相关配置

代码风格规范

eslint + prettier

包管理工具

热门文章

最新文章

相关课程

相关电子书

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