vue3+ts+vant移动端H5项目搭建的实现步骤
使用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
在根目录class="lazy" data-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: ["*"],
},
},
};
效果：
会跟随设备变化，项目大功告成，开始干活吧
到此这篇关于vue3+ts+vant移动端H5项目搭建的实现步骤的文章就介绍到这了,更多相关vue3 ts vant移动端H5搭建内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
