本文主要介绍了vue3 ts vant移动终端H5项目的建设，通过实例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。有需要的朋友下面和边肖一起学习。
:
目录
1.全局安装vue-cli。2.使用vue ui可视化地创建项目。3.打开项目。4.安装vant，按需引入。5.rem，用Vue-CLI构建项目。
1.全局安装vue-cli
npm安装-g @vue/cli
完成安装验证。
vue -V
2.使用vue ui 可视化创建项目
2.1 vue用户界面
vue用户界面
2.2单击创建
单击创建。
在学习目录中创建一个项目
填写创建的项目名称，并选择包管理器npm。
2.3单击下一步。
选择手动，然后单击下一步。
2.4选择功能
单击下一步。
2.5选择配置
选择Scss预处理程序、格式和eslint检查。
选择一个项目。
这次要预设这些选项吗？下次就不用一步步选这个预置了。
看看你自己。
等待项目被创建。
3.打开项目
单击左上角的项目名称，然后选择在编辑器中打开。
4、安装vant,并实现按需引入
打开终端。
npm安装vant
在根目录src中创建一个新的公共文件夹，其中构建了文件vantui.ts。
vantui.ts文件的内容
从“vue”导入{ App }；
从“vant”导入{ Button }；
const Vant={
install: (app: App): void={
app.use(按钮)；
},
};
导出默认Vant
在main.ts中引入
安装按需引入的插件。
npm i拔插-真空-组件-D
在vue.config.js中，添加代码。
const { define config }=require(' @ vue/CLI-service ')；
const { vant resolver }=require(' unplug in-vue-components/resolvers ')；
const components plugin=require(' unplug in-vue-components/web pack ')；
module.exports=defineConfig({
transpileDependencies: true，
configureWebpack: {
插件：[
组件插件({
解析器：[VantResolver()]，
}),
],
},
});
在AboutView下测试。
模板
' btn-box '
Van-button块类型='主要'登录/van-button
van-button class=' register-BTN ' block color=' # fff '寄存器/van-button
/div
/模板
style lang='scss '范围。btn-box {
填充：0 20px
框大小：边框-框；注册-btn {
颜色：rgb(76，155，240)！重要；
}
}
/风格
效果：
5、移动端适配（rem）
5.1安装amfe-flexible和postcss-pxtorem - save
5.2在main.ts中引入
导入“amfe-flexible”；
5.3在项目根目录下新建一个postcss.config.js。
判断vant组件在375设计稿大小，自身页面750。
模块.导出={
插件：{
postcss-pxtorem ':
rootValue({ file }) {
返回file.indexOf('vant ')！==-1 ?37.5 : 75;
},
propList: ['* '，
},
},
};
效果：
会跟着设备的变化，项目完成了，我们开始工作吧。
以上就是本文关于vue3 ts vant移动终端H5项目的实施步骤。有关vue3 ts vant移动终端H5建设的更多信息，请搜索我们之前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。