Vue 项目开发中，组件缓存能提升页面性能，项目初始化（ESLint、目录结构、路由）是工程化的基础，而Vant UI是移动端开发的常用组件库。
一、组件缓存：提升页面性能的关键
组件缓存通过<keep-alive>标签实现，能保留组件状态（避免重复渲染），适合列表页、表单页等需要保留状态的场景。
1. 基础使用
将需要缓存的组件包裹在<keep-alive>中，组件切换时会保留数据和 DOM 状态。
示例：
<template> <!-- 路由出口：缓存Goods组件 --> <keep-alive include="Goods"> <router-view></router-view> </keep-alive> </template>include：指定要缓存的组件名（需和组件的name属性一致）；exclude：指定不缓存的组件名；- 不写
include/exclude则缓存所有组件。
2. 生命周期钩子：缓存组件的特殊钩子
被<keep-alive>缓存的组件，会新增两个生命周期钩子：
activated：组件被激活（从缓存中显示）时触发；deactivated：组件被缓存（隐藏）时触发。
示例：
<script> export default { name: 'Goods', activated() { console.log('组件被激活，可刷新数据'); }, deactivated() { console.log('组件被缓存，可清理定时器'); } }; </script>二、项目初始化：规范工程化开发
项目初始化是搭建 Vue 项目的第一步，包括创建项目、配置 ESLint、调整目录结构等。
1. 创建项目（Vue CLI）
通过 Vue CLI 快速创建项目：
vue create my-vue-project选择 “Manually select features”，按需勾选Babel、ESLint等功能。
2. 认识 ESLint：代码规范检查工具
ESLint 是代码规范检查工具，能统一团队代码风格（如缩进、引号、分号），但初始化后可能出现大量 “格式错误”。
3. 解决 ESLint 错误
常见 ESLint 错误及解决方法：
- 缩进 / 空格问题：在package.json中添加脚本，自动修复格式：
"scripts":{"lint":"eslint --fix src/**/*.{js,vue}"}执行npm run lint自动修复格式错误。
- 代码规范不符：修改
.eslintrc.js中的规则（如允许单引号）：
module.exports={rules:{"quotes":["error","single"]// 允许单引号}};4. 调整目录结构（工程化规范）
推荐目录结构（清晰区分业务模块）：
src/ ├── api/ # 接口请求封装 ├── assets/ # 静态资源（图片、样式） ├── components/ # 公共组件 ├── router/ # 路由配置 ├── store/ # 状态管理（Vuex） ├── styles/ # 全局样式 ├── utils/ # 工具函数 ├── views/ # 页面组件 ├── App.vue # 根组件 └── main.js # 入口文件三、Vant UI 集成：快速搭建移动端界面
Vant 是有赞开源的移动端 Vue 组件库，支持按需引入，适合快速开发 H5 页面。
1. 全部导入（简单但体积大）
步骤 1：安装 Vant
npminstallvant@2步骤 2：在main.js全局注册
importVuefrom'vue';importVantfrom'vant';import'vant/lib/index.css';// 引入样式Vue.use(Vant);使用组件：
<template> <van-button type="primary">按钮</van-button> </template>2. 按需导入（推荐，减小体积）
步骤 1：安装按需导入插件
npminstallbabel-plugin-import -D步骤 2：配置babel.config.js
module.exports={plugins:[['import',{libraryName:'vant',libraryDirectory:'es',style:true},'vant']]};步骤 3：抽取vant-ui.js统一管理
在src/utils/vant-ui.js中注册需要的组件：
importVuefrom'vue';import{Button,Tabbar,TabbarItem}from'vant';Vue.use(Button);Vue.use(Tabbar);Vue.use(TabbarItem);在main.js中引入：
import'./utils/vant-ui.js';3. 配置 viewport 适配
Vant 基于 375px 设计稿，需配置 viewport 适配：
步骤 1：安装插件
npminstallpostcss-px-to-viewport -D步骤 2：创建postcss.config.js
module.exports={plugins:{'postcss-px-to-viewport':{viewportWidth:375,// 设计稿宽度unitPrecision:2,// 保留小数位数viewportUnit:'vw'// 转换后的单位}}};四、项目初始化收尾：路由与 TabBar 配置
1. 一级路由配置
在router/index.js中配置页面路由：
importVuefrom'vue';importVueRouterfrom'vue-router';importHomefrom'../views/Home.vue';importGoodsfrom'../views/Goods.vue';Vue.use(VueRouter);constroutes=[{path:'/',component:Home},{path:'/goods',component:Goods}];constrouter=newVueRouter({routes});exportdefaultrouter;2. TabBar 配置（底部导航）
使用 Vant 的Tabbar组件实现底部导航：
<template> <div> <router-view></router-view> <van-tabbar v-model="active" route> <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item> <van-tabbar-item icon="goods-o" to="/goods">商品</van-tabbar-item> </van-tabbar> </div> </template> <script> export default { data() { return { active: 0 }; } }; </script>3. 二级路由配置
若页面需要子路由（如/goods/detail），可配置二级路由：
// router/index.jsconstroutes=[{path:'/goods',component:Goods,children:[{path:'detail',component:GoodsDetail}// 二级路由：/goods/detail]}];在Goods.vue中添加二级路由出口：
<template> <div> <h2>商品页</h2> <router-view></router-view> <!-- 二级路由出口 --> </div> </template>
