我正在参加「掘金·启航计划」
项目地址(持续迭代中):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 的应用做详细的介绍,敬请大家期待!
\