轻松搞定Vue-cli4、VantUI和rem适配的H5项目模板

2023-10-28 01:37:44

为什么选择Vue-cli4、VantUI和rem适配？

首先，Vue-cli4是Vue.js官方推荐的脚手架，具有强大的代码生成和项目管理能力。

其次，VantUI是一款美观且易于使用的移动端组件库，提供了丰富的UI组件，能够快速构建出符合现代审美的移动端页面。

最后，rem适配方案能够让H5项目在不同屏幕尺寸下都能自适应地调整布局，确保页面在各种设备上都能呈现出良好的视觉效果。

快速上手Vue-cli4、VantUI和rem适配

安装Vue-cli4脚手架

npm install -g @vue/cli

创建新的Vue项目

vue create vant-h5-template

安装VantUI

npm install vant --save

配置rem适配

在config/index.js文件中添加如下代码：

module.exports = {
  // ...
  chainWebpack: (config) => {
    config.module
      .rule('less')
      .oneOf('normal')
      .use('px2rem-loader')
      .loader('px2rem-loader')
      .options({
        remUnit: 75
      })
  },
  // ...
}

启动项目

npm run serve

进阶应用

使用VantUI组件库

在项目中使用VantUI组件库非常简单，只需要在Vue文件中引用组件即可。例如，要使用Button组件，可以在Vue文件中这样写：

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

<script>
import { Button } from 'vant';

export default {
  components: {
    [Button.name]: Button
  }
}
</script>

配置多环境开发

在项目中配置多环境开发可以方便我们在不同环境（如开发环境、测试环境、生产环境）中运行项目。可以在config/index.js文件中配置多环境变量，例如：

module.exports = {
  // ...
  configureWebpack: {
    // ...
    devServer: {
      port: 8080,
      proxy: {
        '/api': {
          target: 'http://localhost:3000',
          changeOrigin: true,
          pathRewrite: {
            '^/api': ''
          }
        }
      }
    },
    // ...
  },
  // ...
}