vue3+ts+vant移动端H5项目搭建的实现步骤

Agnes ·

更新时间:2024-11-14

· 488 次阅读

1.全局安装vue-cli

2.使用vue ui 可视化创建项目

3.打开项目

4、安装vant,并实现按需引入

5、移动端适配（rem）

使用vue-cli搭建项目

1.全局安装vue-cli npm install -g @vue/cli

安装完成验证

vue -V

2.使用vue ui 可视化创建项目

2.1 vue ui

vue ui

2.2 点击创建

点击创建

在learn目录下创建项目

填写创建的项目名，选择包管理器npm

2.3 点击下一步

选择手动，点击下一步

2.4 选择功能

选好点击下一步

2.5 选择配置

选择了scss预处理器，格式化及eslint校验

选择创建项目

是否把本次的这些选择做预设，下次直接选择这个预设就不用一步一步选了

看你自己

等待项目创建完成

3.打开项目

点击左上角项目名，选择在编辑器打开

4、安装vant,并实现按需引入

打开终端

npm install vant

在根目录src下新建common文件夹，里面建立vantui.ts文件

vantui.ts文件内容

import { App } from "vue";
import { Button } from "vant";
const Vant = {
  install: (app: App): void => {
    app.use(Button);
  },
};
export default Vant;

在main.ts中引入

安装按需引入的插件

npm i unplugin-vue-components -D

在vue.config.js中，增加代码

const { defineConfig } = require("@vue/cli-service");
const { VantResolver } = require("unplugin-vue-components/resolvers");
const ComponentsPlugin = require("unplugin-vue-components/webpack");
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      ComponentsPlugin({
        resolvers: [VantResolver()],
      }),
    ],
  },
});

测试在AboutView下测试

<template>
  <div class="btn-box">
    <van-button block type="primary">登录</van-button>
    <van-button class="register-btn" block color="#fff">注册</van-button>
  </div>
</template>
<style lang="scss" scoped>
.btn-box {
  padding: 0 20px;
  box-sizing: border-box;
  .register-btn {
    color: rgb(76, 155, 240) !important;
  }
}
</style>

效果：

5、移动端适配（rem）

5.1 安装 amfe-flexible 和 postcss-pxtorem --save

5.2 在main.ts引入

import "amfe-flexible";

5.3 在项目根目录下新建postcss.config.js

判断下vant组件按375设计稿尺寸走，自己的页面是750的

module.exports = {
  plugins: {
    "postcss-pxtorem": {
      rootValue({ file }) {
        return file.indexOf("vant") !== -1 ? 37.5 : 75;
      },
      propList: ["*"],
    },
  },
};

效果：