三,组件中使用 <script setup lang=ts>import{ useHead }from'@unhead/vue'useHead({title:'网站标题',meta: [ {name:'description',content:'My page description', }, {name:'keywords',content:'My page keywords', }, ], }) </script>
<script setup lang=ts> import { useHead } from '@unhead/vue' useHead({ title: '网站标题', meta: [ { name: 'description', content: 'My page description', }, { name: 'keywords', content: 'My page keywords', }, ], }) </script> Unhead基本封装好了所有head相关的api,而且不止...
2、引入meta标签 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 1. 3、然后引入到项目 import ‘amfe-flexible’ 4、到这里适配基本解决,但是我们再写的时候量出来的尺寸都需要除以75rem,这样很烦,这时引入插件postcss-px2rem-...
<route> { name: "name-override", meta: { requiresAuth: false } } </route> 5、自动生成vue-router的路由遵循的规则 src/views/index.vue -> / src/views/index/a.vue -> /a // 这里的a.vue就是index.vue的子路由(children) src/views/father.vue -> /father src/views/father/son.vue -...
主要是借助import.meta.glob生成多组件数组，import函数中虽然不能写变量，但是生成的组件数组+变量，可以...
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 移动设备具有各种不同的屏幕尺寸和分辨率,例如智能手机和平板电脑。为了提供更好的用户体验,网页需要根据设备的屏幕宽度进行自适应布局。如果不设置width=device-width,移动设备会按照默认的视口宽度(通常是较宽的桌面屏幕)来渲染网页,导致网页...
其实我们可以在 template 中通过$route 获取路由的信息,所以我们可以在需要缓存的页面配置一下 meta 对象,比如 a 页面我们想缓存其状态,可以将 keepAlive 设置位 true //route/index.tsconst routes: RouteRecordRaw[] = [ { path:"/aa", name:"a", ...
默认情况vite的兼容目标是支持原生ES模块,原生ESM动态导入和import.meta的浏览器,官方预设的兼容目标如下: es2020 edge 88 firefox 78 chrome 87 safari 14 而我们的可选链正是es2020版本才有的,所以vite在打包后不会做任何兼容处理,这就导致了一些浏览器版本低一点的设备,打开网站就会出现白屏的情况。
{version:now})],resolve:{alias:{'@':fileURLToPath(newURL('./src',import.meta.url))}},/...
DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite + Vue + TS</title></head><body> <div id="app"></div>...