该模板项目更适用营销类网站,营销类网页偏向于前端效果的展示且很注重SEO,Vue技术栈的入手Nuxt3很轻松,nuxt写起来蛮舒服但不得不说槽点也蛮多。
预览地址:zuowendong.github.io/nuxt3templa…
模板中集成了:
- tailwindcss
- daisyui,基于tailwindcss的UI组件库
- aos,页面滚动动画
- postcss-px-to-viewport-tailwind,支持tailwindcss不同断点转vw
- vue-i18n,国际化
- font-split,字体分包
tailwind css
对于私活来说更多时候都是一个人,那不考虑协作方面顾虑,蛮推荐 tailwind css 快速开发,不用考虑class名称真的太爽,配合上vscode插件 Tailwind CSS IntelliSense 和 Tailwind CSS Highlight 上手门槛也不算高。而且使用 tailwind css 的断点做响应式适配也丝滑。
aos
AOS.js 是一款 JS 动画库,可以轻松地为网页元素添加各种滚动动画效果。它可以检测元素在视窗中的位置,并在元素出现时为其添加相应的动画类。
将 aos 添加 nuxt plugin 作为插件便于使用。
ts 代码解读复制代码// plugins/aos.client.ts
import AOS from "aos";
import { defineNuxtPlugin } from "#app";
export default defineNuxtPlugin(() => {
return {
provide: {
aos: () => AOS,
},
};
});
同时需要在 nuxt.config 中配置 plugins 和 css,这样 aos 才会生效。
ts 代码解读复制代码// nuxt.config.ts
export default defineNuxtConfig({
// ...
css: [
"~/assets/css/global.css",
"aos/dist/aos.css"
],
plugins: ["~/plugins/aos.client.ts"]
})
在你需要的页面上使用 aos 即可,例如在 app.vue 中全局使用。
ts 代码解读复制代码// app.vue
import { onMounted } from "vue";
import { useNuxtApp } from "#app";
const { $aos } = useNuxtApp();
onMounted(() => {
$aos().init({});
});
最后在任何一个页面的元素上都可以使用 aos,例如在首页的 box 上添加一个从下往上显示的动画。
ts 代码解读复制代码// pages/index.vue
ref="sectionRef"
class="w-[100px] h-[100px] md:w-[200px] md:h-[200px] xl:w-[300px] xl:h-[300px] text-[16px] md:text-[20px] xl:text-[24px] text-blue-500 md:text-red-500 xl:text-green-600 text-center leading-[100px] md:leading-[200px] xl:leading-[300px] border border-[#333]"
data-aos="fade-up"
data-aos-offset="0"
data-aos-duration="1500"
data-aos-delay="300"
data-aos-once="true"
>
{{ sectionWidth }}
postcss-px-to-viewport-tailwind
一般客户建站都会要求适配桌面端和移动端。
Tailwind css 的断点支持根据不同的屏幕尺寸应用不同的样式。默认情况下是使用 min-width
媒体查询来创建断点,这意味着样式会在指定的屏幕宽度及以上生效。
一般UI设计师给出的效果图尺寸中,移动端可能是 375 或者 750,桌面端的设计稿是 1920,平板的尺寸是介于 768 - 1280,当然具体数值由UI和项目团队内部决定。
针对这样不同的设计稿尺寸,想要同一份代码适配,tailwind css 的断点是能够实现的,但是会导致庞大的工作量,还需要针对不同的设备尺寸出具不同的设计稿。例如,tailwind css 默认的断点配置是:
ts 代码解读复制代码screens: {
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
"2xl": "1536px",
laptop: "1440px",
desktop: "1920px",
}
如果设计稿是基于 1920 的,在设备尺寸为 1280 时,此时样式就不合适了,按照纯 tailwind css 断点设置就需要不同断点设置不同样式,这样要求的设计稿需要很完善,我们需要写的代码量也激增。
postcss-px-to-viewport-tailwind 插件可以很完美的解决上述问题,通过匹配不同的tailwind css 断点对应不同的设计稿尺寸,将匹配上的设备尺寸区间内转换成 vw,可以很好的解决适配问题。比如,认定桌面端尺寸范围是 1280 - 1920,这个范围内的样式都是按照 1920 设计稿实现,通过 vw 适配方案就能很好实现。认定设备尺寸小于 768 的都是移动端,按照 375 设计稿实现,同样是vw 方案,通过 postcss-px-to-viewport-tailwind 设定 768 这个尺寸断点下都按照 375 设计稿宽度转换即可。
zuowendong.github.io/nuxt3templa… 首页给出不同设备尺寸下的展示效果对比。
使用
ts 代码解读复制代码// nuxt.config.ts
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {
overrideBrowserslist: ["last 5 version", ">1%", "ie >=8"],
},
"postcss-px-to-viewport-tailwind": {
unitToConvert: "px", // 要转化的单位
viewportWidth: 375, // 默认(移动端)设计稿尺寸
viewportWidthPaid: 750, // 平板设计稿尺寸
viewportWidthPc: 1920, // pc设计稿尺寸
width2Tailwind: {
viewportWidthPaid: "md", // 平板设计稿对应的 tailwind css 断点 md
viewportWidthPc: "xl", // 设备尺寸在 xl 以上都按照 pc 设计稿实现
},
unitPrecision: 6, // 转换后的精度,即小数点位数
propList: ["*"], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换
viewportUnit: "vw", // 指定需要转换成的视窗单位,默认vw
fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位,默认vw
selectorBlackList: [], // 指定不转换为视窗单位的类名,例如van-(vantUI组件),
minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false
replace: true, // 是否转换后直接更换属性值
exclude: [/node_modules/], // 设置忽略文件,用正则做目录名匹配,最好不要排除node_modules 文件,排除后在项目中会发现字体不能跟随页面放大
landscape: false, // 是否处理横屏情况
},
},
},
注意,其中 width2Tailwind 配置项中 key 需要和上面定义的不同 viewportWidth 的 key 一致。除了默认设计稿宽度 viewportWidth 这个 key 不可修改,像viewportWidthPaid 和 viewportWidthPc 都是自定义的。例如,你也可以如下这样设置:
yaml 代码解读复制代码{
viewportWidth: 320,
viewportWidthSM: 640,
viewportWidthMD: 750,
viewportWidthLG: 1024,
viewportWidthXL: 1280,
viewportWidth2xl: 1440,
width2Tailwind: {
viewportWidthSM: 'sm',
viewportWidthMD: 'md',
viewportWidthLG: 'lg',
viewportWidthXl: 'xl',
viewportWidth2xl: '2xl'
}
}
vue-i18n
vue-i18n 是一个 Vue.js 的国际化插件,可以轻松开发多语言应用切换语言环境。
在 plugins 中新建 i18n.ts
ts 代码解读复制代码// plugins/i18n.ts
import { createI18n } from "vue-i18n";
import { defineNuxtPlugin } from "#app";
import en from "~/locales/en.json";
import zh from "~/locales/zh.json";
export let t: (v: string) => string;
export default defineNuxtPlugin(({ vueApp }) => {
const i18n = createI18n({
legacy: false,
globalInjection: true,
locale: "zh",
messages: {
en,
zh,
},
});
t = i18n.global.t;
vueApp.use(i18n);
});
在 nuxt.config 中添加上
ts 代码解读复制代码plugins: ["~/plugins/i18n.ts"]
字体分包
网站资源中占比最大的就是图片和字体文件,其中自定义字体尤其中文字体在首屏加载中耗时最长,是必须要优化的一点。
查询字体优化方案那最常见的应该就是字蛛 font-spider。font-spider 会解析你指定的 html 并统计其中的文字,最后对字库进行类似 “tree shaking” 的操作,只保留项目中出现的文字。对于Nuxt 项目并没有找到很好的实现示例,首先 ssr 中并不会直接显示 html 文件,它的 README 中也说明了不支持 js 动态插入的元素与样式。
另一种方案就是字体分包 font-spilt,大体积的font文件会在网络传输中耗时很久,那就将大文件分割成诸多小文件,这样分片操作可以有效减少请求耗时。
字体分包操作我集成在下面这个项目中可以作为工具使用,只用将你需要的分包的字体文件放在 font 文件夹里,在入口文件 index.js 中 指定你的目标字体路径 FontPath,执行 yarn dev 会在根目录 dist 中输出分包结果。
使用
在 nuxt3 中使用分包字体,最终生成的分包字体文件里会有一个 result.css,只需要将所有的字体文件和这个css放入assets 中,再在nuxt.config的css 配置里引入这个 css 即可。
具体实现可以查看项目仓库:github.com/zuowendong/…
最后
欢迎关注本人原创微信公众号【前端一起学】,一起学习一起交流~
评论记录:
回复评论: