本文主要介绍了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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。