腳本之家服務器常用軟件

快捷導航

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

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

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

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預處理器，格式化及eslint校驗

選擇創(chuàng)建項目

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

看你自己

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

3.打開項目

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

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

打開終端

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: ["*"],
    },
  },
};

效果：