,,vue3+ts+vant移动端H5项目搭建的实现步骤

,,vue3+ts+vant移动端H5项目搭建的实现步骤

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

留言与评论(共有 条评论)
   
验证码: