Vue 项目实战,从组件缓存到 Vant UI 集成：项目初始化全流程

Vue 项目开发中，组件缓存能提升页面性能，项目初始化（ESLint、目录结构、路由）是工程化的基础，而Vant UI是移动端开发的常用组件库。

一、组件缓存：提升页面性能的关键

组件缓存通过<keep-alive>标签实现，能保留组件状态（避免重复渲染），适合列表页、表单页等需要保留状态的场景。

1. 基础使用

将需要缓存的组件包裹在<keep-alive>中，组件切换时会保留数据和 DOM 状态。

示例：

vue 复制代码

<template>
  <!-- 路由出口：缓存Goods组件 -->
  <keep-alive include="Goods">
    <router-view></router-view>
  </keep-alive>
</template>

include：指定要缓存的组件名（需和组件的name属性一致）；
exclude：指定不缓存的组件名；
不写include/exclude则缓存所有组件。

2. 生命周期钩子：缓存组件的特殊钩子

被<keep-alive>缓存的组件，会新增两个生命周期钩子：

activated：组件被激活（从缓存中显示）时触发；
deactivated：组件被缓存（隐藏）时触发。
示例：

vue 复制代码

<script>
export default {
  name: 'Goods',
  activated() {
    console.log('组件被激活，可刷新数据');
  },
  deactivated() {
    console.log('组件被缓存，可清理定时器');
  }
};
</script>

二、项目初始化：规范工程化开发

项目初始化是搭建 Vue 项目的第一步，包括创建项目、配置 ESLint、调整目录结构等。

1. 创建项目（Vue CLI）

通过 Vue CLI 快速创建项目：

bash 复制代码

vue create my-vue-project

选择 "Manually select features"，按需勾选Babel、ESLint等功能。

2. 认识 ESLint：代码规范检查工具

ESLint 是代码规范检查工具，能统一团队代码风格（如缩进、引号、分号），但初始化后可能出现大量 "格式错误"。

3. 解决 ESLint 错误

常见 ESLint 错误及解决方法：

缩进 / 空格问题：在package.json中添加脚本，自动修复格式：

json 复制代码

"scripts": {
  "lint": "eslint --fix src/**/*.{js,vue}"
}

执行npm run lint自动修复格式错误。

代码规范不符：修改.eslintrc.js中的规则（如允许单引号）：

javascript 复制代码

module.exports = {
  rules: {
    "quotes": ["error", "single"] // 允许单引号
  }
};

4. 调整目录结构（工程化规范）

推荐目录结构（清晰区分业务模块）：

plaintext 复制代码

src/
├── api/          # 接口请求封装
├── assets/       # 静态资源（图片、样式）
├── components/   # 公共组件
├── router/       # 路由配置
├── store/        # 状态管理（Vuex）
├── styles/       # 全局样式
├── utils/        # 工具函数
├── views/        # 页面组件
├── App.vue       # 根组件
└── main.js       # 入口文件

三、Vant UI 集成：快速搭建移动端界面

Vant 是有赞开源的移动端 Vue 组件库，支持按需引入，适合快速开发 H5 页面。

1. 全部导入（简单但体积大）

步骤 1：安装 Vant

bash 复制代码

npm install vant@2

步骤 2：在main.js全局注册

javascript 复制代码

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css'; // 引入样式

Vue.use(Vant);

使用组件：

vue 复制代码

<template>
  <van-button type="primary">按钮</van-button>
</template>

2. 按需导入（推荐，减小体积）

步骤 1：安装按需导入插件

bash 复制代码

npm install babel-plugin-import -D

步骤 2：配置babel.config.js

javascript 复制代码

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

步骤 3：抽取vant-ui.js统一管理

在src/utils/vant-ui.js中注册需要的组件：

javascript 复制代码

import Vue from 'vue';
import { Button, Tabbar, TabbarItem } from 'vant';

Vue.use(Button);
Vue.use(Tabbar);
Vue.use(TabbarItem);

在main.js中引入：

javascript 复制代码

import './utils/vant-ui.js';

3. 配置 viewport 适配

Vant 基于 375px 设计稿，需配置 viewport 适配：

步骤 1：安装插件

bash 复制代码

npm install postcss-px-to-viewport -D

步骤 2：创建postcss.config.js

javascript 复制代码

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375, // 设计稿宽度
      unitPrecision: 2, // 保留小数位数
      viewportUnit: 'vw' // 转换后的单位
    }
  }
};

四、项目初始化收尾：路由与 TabBar 配置

1. 一级路由配置

在router/index.js中配置页面路由：

javascript 复制代码

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import Goods from '../views/Goods.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/goods', component: Goods }
];

const router = new VueRouter({ routes });
export default router;

2. TabBar 配置（底部导航）

使用 Vant 的Tabbar组件实现底部导航：

vue 复制代码

<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），可配置二级路由：

javascript 复制代码

// router/index.js
const routes = [
  {
    path: '/goods',
    component: Goods,
    children: [
      { path: 'detail', component: GoodsDetail } // 二级路由：/goods/detail
    ]
  }
];

在Goods.vue中添加二级路由出口：

vue 复制代码

<template>
  <div>
    <h2>商品页</h2>
    <router-view></router-view> <!-- 二级路由出口 -->
  </div>
</template>