快捷導(dǎo)航

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

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

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

1.全局安裝vue-cli

npm install -g @vue/cli

安裝完成驗(yàn)證

vue -V

在這里插入圖片描述

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

2.1 vue ui

vue ui

在這里插入圖片描述

2.2 點(diǎn)擊創(chuàng)建

點(diǎn)擊創(chuàng)建

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

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

2.3 點(diǎn)擊下一步

選擇手動(dòng)，點(diǎn)擊下一步

2.4 選擇功能

選好點(diǎn)擊下一步

2.5 選擇配置

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

選擇創(chuàng)建項(xiàng)目

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

看你自己

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

3.打開項(xiàng)目

點(diǎn)擊左上角項(xiàng)目名，選擇在編輯器打開

4、安裝vant,并實(shí)現(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()],
      }),
    ],
  },
});

測(cè)試在AboutView下測(cè)試

<template>
  <div class="btn-box">
    <van-button block type="primary">登錄</van-button>
    <van-button class="register-btn" block color="#fff">注冊(cè)</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、移動(dòng)端適配（rem）

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

5.2 在main.ts引入

import "amfe-flexible";

5.3 在項(xiàng)目根目錄下新建postcss.config.js

判斷下vant組件按375設(shè)計(jì)稿尺寸走，自己的頁面是750的

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

效果：

會(huì)跟隨設(shè)備變化，項(xiàng)目大功告成，開始干活吧

到此這篇關(guān)于vue3+ts+vant移動(dòng)端H5項(xiàng)目搭建的實(shí)現(xiàn)步驟的文章就介紹到這了,更多相關(guān)vue3 ts vant移動(dòng)端H5搭建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: