快捷導(dǎo)航

vue3+ts+vant移動端H5項目搭建的實現(xiàn)步驟

更新時間：2022年06月16日 09:08:50 作者：南風(fēng)number

本文主要介紹了vue3+ts+vant移動端H5項目搭建，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1.全局安裝vue-cli

npm install -g @vue/cli

安裝完成驗證

vue -V

在這里插入圖片描述

2.使用vue ui 可視化創(chuàng)建項目

2.1 vue ui

vue ui

在這里插入圖片描述

2.2 點擊創(chuàng)建

點擊創(chuàng)建

在learn目錄下創(chuàng)建項目

填寫創(chuàng)建的項目名，選擇包管理器npm

2.3 點擊下一步

選擇手動，點擊下一步

2.4 選擇功能

選好點擊下一步

2.5 選擇配置

選擇了scss預(yù)處理器，格式化及eslint校驗

選擇創(chuàng)建項目

是否把本次的這些選擇做預(yù)設(shè)，下次直接選擇這個預(yù)設(shè)就不用一步一步選了

看你自己

等待項目創(chuàng)建完成

3.打開項目

點擊左上角項目名，選擇在編輯器打開

4、安裝vant,并實現(xiàn)按需引入

打開終端

npm install vant

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

vantui.ts文件內(nèi)容

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設(shè)計稿尺寸走，自己的頁面是750的

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

效果：