详解搭建一个vue-cli的移动端H5开发模板

下面我将详细讲解如何搭建一个vue-cli的移动端H5开发模板。

准备工作

首先，需要安装node.js和npm。

然后，使用npm安装vue-cli：npm install -g vue-cli

创建项目

在命令行中执行以下命令创建一个基于webpack模板的vue项目：

vue init webpack my-project
cd my-project
npm install
npm run dev

这里创建的项目名为my-project，可以根据自己的需要修改。

执行完这些命令后，会创建一个基于webpack的vue项目，并安装了所需的依赖。然后运行npm run dev，启动webpack dev server，可以在浏览器中通过http://localhost:8080访问项目。

添加移动端适配

为了让项目能够适配不同的移动端设备，我们需要添加移动端适配方案。

这里以使用postcss-px-to-viewport插件为例，具体步骤如下：

1. 安装插件：npm install postcss-px-to-viewport --save-dev

2. 添加.postcssrc.js文件并配置：

{
  "plugins": {
    "postcss-px-to-viewport": {
      "viewportWidth": 750,
      "viewportHeight": 1334,
      "unitPrecision": 3,
      "viewportUnit": "vw",
      "selectorBlackList": [
        ".ignore",
        ".hairlines"
      ],
      "minPixelValue": 1,
      "mediaQuery": false
    }
  }
}

这里的配置中，viewportWidth和viewportHeight表示设计稿的宽度和高度，unitPrecision表示转换后保留的小数位数，viewportUnit表示转换后使用的单位，selectorBlackList表示不需要转换的类名，minPixelValue表示小于1px的值不转换，mediaQuery表示是否允许在媒体查询中转换。

1. 修改webpack配置文件，在postcss-loader后添加postcss-px-to-viewport插件：

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                require('postcss-px-to-viewport')({
                  viewportWidth: 750,
                  viewportHeight: 1334,
                  unitPrecision: 3,
                  viewportUnit: 'vw',
                  selectorBlackList: [
                    '.ignore',
                    '.hairlines'
                  ],
                  minPixelValue: 1,
                  mediaQuery: false
                })
              ]
            }
          }
        ]
      }
    ]
  },
  // ...
}

这里的配置与.postcssrc.js文件中的配置一致。

添加完移动端适配后，在样式中使用px单位时，插件会自动将其转换为vw单位。

添加fastclick

移动端点击事件有延迟，需要添加fastclick插件来解决这个问题。

1. 安装插件：npm install fastclick --save

2. 在main.js文件中添加以下代码：

import FastClick from 'fastclick'
FastClick.attach(document.body)

这样就可以使用fastclick插件了。

示例说明

假设我们需要在首页显示一个头部标题和一个列表，每一个列表项都有一个图片和一个文字描述。

第一个示例

针对第一个示例，我们可以先使用vue-cli生成的项目模板在src/components目录下创建一个Header.vue组件和一个List.vue组件，分别用来显示头部和列表。

Header.vue内容示例：

<template>
  <div class="header">
    <h1>{{title}}</h1>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    }
  }
}
</script>
<style scoped>
.header {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 36px;
}
</style>

List.vue内容示例：

<template>
  <div class="list">
    <div v-for="item in items" :key="item.id" class="item">
      <img :src="item.imgUrl" alt="">
      <div>{{item.desc}}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  }
}
</script>
<style scoped>
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.item {
  width: 48%;
  margin-bottom: 20px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease;
}
.item:hover {
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
}
.item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.item div {
  padding: 10px;
  font-size: 14px;
  color: #666;
}
</style>

然后在src/App.vue中使用这两个组件：

<template>
  <div>
    <Header title="头部标题" />
    <List :items="items" />
  </div>
</template>
<script>
import Header from './components/Header.vue'
import List from './components/List.vue'
export default {
  components: {
    Header,
    List
  },
  data() {
    return {
      items: [
        {
          id: 1,
          imgUrl: 'http://placehold.it/300x200',
          desc: '列表项1'
        },
        {
          id: 2,
          imgUrl: 'http://placehold.it/300x200',
          desc: '列表项2'
        },
        {
          id: 3,
          imgUrl: 'http://placehold.it/300x200',
          desc: '列表项3'
        },
        {
          id: 4,
          imgUrl: 'http://placehold.it/300x200',
          desc: '列表项4'
        }
      ]
    }
  }
}
</script>
<style scoped>
/* 根据需要添加样式 */
</style>

这样就完成了一个简单示例的搭建。

第二个示例

针对第二个示例，我们可以先创建一个Index.vue组件，然后在其中使用vanp-perfect-scrollbar组件来实现一个可滑动列表。

<template>
  <div class="index">
    <van-perfect-scrollbar>
      <div class="list">
        <div v-for="item in items" :key="item.id" class="item">
          <img :src="item.imgUrl" alt="" />
          <div>{{item.desc}}</div>
        </div>
      </div>
    </van-perfect-scrollbar>
  </div>
</template>

<script>
import VanPerfectScrollbar from 'van-perfect-scrollbar'
import 'van-perfect-scrollbar/dist/van-perfect-scrollbar.css'

export default {
  components: {
    VanPerfectScrollbar
  },
  data() {
    return {
      items: [
        {
          id: 1,
          imgUrl: 'http://placehold.it/300x200',
          desc: '列表项1'
        },
        {
          id: 2,
          imgUrl: 'http://placehold.it/300x200',
          desc: '列表项2'
        },
        {
          id: 3,
          imgUrl: 'http://placehold.it/300x200',
          desc: '列表项3'
        },
        {
          id: 4,
          imgUrl: 'http://placehold.it/300x200',
          desc: '列表项4'
        }
      ]
    }
  }
}
</script>
<style scoped>
.index {
  padding: 20px;
}
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.item {
  width: 48%;
  margin-bottom: 20px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease;
}
.item:hover {
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
}
.item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.item div {
  padding: 10px;
  font-size: 14px;
  color: #666;
}
</style>

这里使用了van-perfect-scrollbar组件，需要先安装组件：npm install van-perfect-scrollbar --save。然后在组件中引入并注册即可使用。

这样就完成了第二个示例的搭建。

至此，我们已经完成了搭建一个vue-cli的移动端H5开发模板需要的全部步骤，希望能对你有所帮助。