当前位置: 首页 > Web前端 > vue.js

一套代码搞定移动端PC-tailwind学习(一)

时间:2023-03-31 18:39:52 vue.js

前言:这两天搭建了自己的博客,然后一直在优化中。现在看来pc端勉强可以回本了,但是根本不在做移动端兼容,想分享给小伙伴们,但是又觉得丑,于是开始关注移动端兼容。目标:在一个项目中实现两端适配。网上有的解决方案是,PC一套,手机一套,两端来回跳转。项目比较复杂。还有一些其他的解决方案,大部分是pxtorem的解决方案,也在我的项目上运行。同一个项目写多套css,用mediaquery来做,不是很方便。想想nuxt创建的项目demo,它同时支持PC端和移动端。让我们看看它是如何适应的。直接去做,创建一个项目并运行它。PC页面和手机页面到底有多完美?太香了,赶紧查看了它的源码:看了一眼源码,发现了它的小秘密。嘿,它的风格就是关于这件事的。赶紧来看看这个东西https://tailwindcss.com/看看官网,哇!不错,赶紧查看文档:https://www.tailwindcss.cn/docs哇!文档太齐全了~~~之前css不是很好,感觉这足以帮我完成排版和适配。好了,开始吧~安装依赖本文的yarn安装:yarnadd-D@nuxtjs/tailwindcsstailwindcss@npm:@tailwindcss/postcss7-compat@tailwindcss/postcss7-compatpostcss@^7autoprefixer@^9nuxt.config.js在文件中添加模块//nuxt.config.jsexportdefault{buildModules:['@nuxtjs/tailwindcss']}在项目的根目录下创建一个配置文件。npxtailwindcssinit生成的默认文件。配置参数了解配置module.exports={purge:[],darkMode:false,//or'media'or'class'theme:{extend:{},},variants:{extend:{},},plugins:[],}tailwind由于写了很多样式,包很大,但是我们可能用不到,所以需要在正式发布的时候优化修改配置文件module.exports={purge:['./components/**/*.{vue,js}','./layouts/**/*.vue','./pages/**/*.vue','./plugins/**/*.{js,ts}','./nuxt.config.{js,ts}',],darkMode:false,//或'media'或'class'theme:{extend:{},},variants:{extend:{},},plugins:[],}在根目录下新建文件./assets/css/tailwind.css,内容如下/*./assets/css/tailwind.css*/@tailwindbase;@tailwindcomponents;@tailwindutilities;这时候运行yarndev,就可以使用tailwind了,tailwind也很贴心的准备了一个样式预览页面至此我们的安装就完成了,接下来就是学习如何使用一组代码获取移动端PC端-顺风学习(2)

猜你喜欢