vue开发h5项目

项目初始化

• 使用 Vue CLI： 这是官方推荐的脚手架工具，能快速搭建项目结构并集成主流工具链 (Webpack/Babel/ESLint 等)。
• 创建项目：

  # 确保已安装 Node.js 和 npm/yarn
  npm install -g @vue/cli
  vue create my-h5-project # 选择你需要的特性 (Vue 3, Router, Vuex/Pinia, CSS 预处理器等)
  cd my-h5-project

• 选择预设： 根据项目需求选择默认预设或手动选择特性。对于 H5，通常需要：
  • Babel
  • Router (使用 history 模式，但需注意 H5 部署时可能需要服务器配置)
  • Vuex / Pinia (状态管理)
  • CSS Pre-processors (如 Sass/Less)
  • Linter / Formatter (代码规范检查)
  • Unit Testing (可选)
  • E2E Testing (可选)

H5 开发相关配置

• vue.config.js: 这是 Vue CLI 项目的核心配置文件，用于修改 Webpack 配置或添加插件。
  • 设置 publicPath: 如果你的应用不是部署在域名的根目录下，需要设置这个基础路径。对于 H5，通常部署在某个子路径下。

    module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/your-sub-path/' : '/'
    }

  • 移动端适配方案 (重要):
    • Viewport 方案 (推荐): 使用 postcss-px-to-viewport 或 postcss-pxtorem 插件自动将 px 单位转换为 vw 或 rem。
      • 安装依赖：npm install postcss-px-to-viewport -D 或 npm install postcss-pxtorem -D
      • 在 vue.config.js 中配置 css.loaderOptions.postcss 或在项目根目录创建 .postcssrc.js：

        // .postcssrc.js 示例 (vw方案)
        module.exports = {
        plugins: {
        'postcss-px-to-viewport': {
        viewportWidth: 375, // 设计稿宽度 (通常以 iPhone 6/7/8 的 375px 为准)
        unitPrecision: 5, // 转换后保留的小数位数
        viewportUnit: 'vw', // 转换成的单位
        selectorBlackList: ['.ignore'], // 不需要转换的类选择器
        minPixelValue: 1, // 小于等于此值的 px 不转换
        mediaQuery: false // 是否在媒体查询中转换
        }
        }
        }

    • Flexible + Rem 方案 (较老): 引入 lib-flexible 动态计算 rem 基准值，配合 postcss-pxtorem 转换 px。
  • 别名配置 (configureWebpack.alias): 设置路径别名方便引用。

    const path = require('path')
    module.exports = {
    configureWebpack: {
    resolve: {
    alias: {
    '@': path.resolve(__dirname, 'src'),
    'assets': path.resolve(__dirname, 'src/assets')
    }
    }
    }
    }

  • 代理配置 (devServer.proxy): 开发时解决跨域问题。

    module.exports = {
    devServer: {
    proxy: {
    '/api': {
    target: 'http://your-api-server.com',
    changeOrigin: true,
    pathRewrite: {
    '^/api': ''
    }
    }
    }
    }
    }

  • 打包优化：
    • 代码分割 (configureWebpack.optimization.splitChunks): 利用 Webpack 的 SplitChunksPlugin 拆分公共代码和第三方库。
    • 压缩： Vue CLI 生产构建默认启用压缩。
    • Gzip/Brotli 压缩： 可通过 Webpack 插件 (如 compression-webpack-plugin) 在构建时生成压缩文件，需服务器支持。
    • externals: 将大型库 (如 vue, vue-router) 通过 CDN 引入，不打包进 bundle。

开发注意事项 (H5 特性)

• 路由 (vue-router):
  • 使用 history 模式可以获得干净的 URL，但部署时需服务器配置 (如 Nginx try_files)，否则刷新会 404。如果服务器不可控，可使用 hash 模式。
  • 移动端手势滑动返回可能需要额外处理或使用库。
• 状态管理 (Vuex / Pinia): 管理跨组件状态。Pinia 是 Vue 官方推荐的新方案，API 更简洁。
• UI 组件库： 使用成熟的移动端 UI 库加速开发，如：
  • Vant (有赞出品，国内主流)
  • NutUI (京东出品)
  • Mint UI (饿了么出品)
  • 按需引入以减小体积。
• 移动端交互优化：
  • 点击延迟： 现代浏览器已基本解决 300ms 延迟问题。若需兼容旧浏览器或处理 touch 事件，可考虑 fastclick (但已不再维护) 或使用 @touchstart 等原生事件。
  • 软键盘弹出： 注意输入框被键盘遮挡问题。可监听 resize 或 scroll 事件调整布局，或使用库如 vue-input-enhancer。
  • 1px 边框问题： 在高清屏上可能显示过粗。可通过伪元素 + transform: scaleY(0.5) 等方式实现细边框。
• 性能优化：
  • 图片优化：
    • 使用合适的格式 (WebP 优先，兼容性要求高用 JPEG/PNG)。
    • 压缩图片 (工具如 imagemin, 在线服务)。
    • 使用 vue-lazyload 等库实现图片懒加载。
  • 组件懒加载： 使用 Vue 的异步组件结合 Webpack 动态导入 (import() 语法)。

    const Foo = () => import('./Foo.vue')

  • 虚拟滚动 (vue-virtual-scroller): 处理长列表。
  • 减少重排重绘： 优化 CSS，使用 transform 和 opacity 做动画。
  • Service Worker / PWA： Vue CLI 内置 PWA 支持 (@vue/cli-plugin-pwa)，可提升离线体验和加载速度。
• 调试：
  • 浏览器开发者工具 (Chrome DevTools)。
  • 使用 vConsole 或 eruda 等移动端控制台模拟工具。
  • 真机调试 (Chrome Remote Debugging, Safari Web Inspector)。

构建与部署

• 构建生产包：

  npm run build # 生成 dist 目录

• 部署： 将 dist 目录下的静态文件部署到 Web 服务器 (Nginx, Apache, Tomcat) 或静态文件托管服务 (Netlify, Vercel, GitHub Pages, OSS/CDN)。
• publicPath 再次确认： 确保构建时设置的 publicPath 与部署的实际路径匹配。