项目地址(持续迭代中):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地址,可以看到这样一段有意思的话:
从我个人来说,我认为它主要有以下两个不足:
- 两个插件需要配套使用,而且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 的应用做详细的介绍,敬请大家期待!