如何给自己的公司网站做优化北京网站seo推广

如何给自己的公司网站做优化,北京网站seo推广,房地产设计图与规划图,做一个微信小程序难吗借助 Vite 模拟出虚拟根组件(支持SFC的App.vue)#xff0c;解决 uniapp 无法使用公共组件问题自定义虚拟根组件文件命名(App.ku.vue文件命名支持更换)更高灵活度的获取虚拟根组件实例(获取KuRootView的Ref)自动提取PageMeta到页面顶层(自动提升小程序PageMeta[用于阻止滚动穿透…借助 Vite 模拟出虚拟根组件(支持SFC的App.vue)解决 uniapp 无法使用公共组件问题自定义虚拟根组件文件命名(App.ku.vue文件命名支持更换)更高灵活度的获取虚拟根组件实例(获取KuRootView的Ref)自动提取PageMeta到页面顶层(自动提升小程序PageMeta[用于阻止滚动穿透]组件) 安装pnpm add -D uni-ku/root yarn add -D uni-ku/root npm install -D uni-ku/root 使用1. 引入uni-ku/root// vite.config.(js|ts) import Uni from dcloudio/vite-plugin-uni import UniKuRoot from uni-ku/root import { defineConfig } from vite export default defineConfig({ plugins: [ // 若存在改变 pages.json 的插件请将 UniKuRoot 放置其后 UniKuRoot(), Uni() ] })NoteCLI直接编写根目录下的 vite.config.(js|ts)HBuilderX在根目录下创建vite.config.(js|ts) 并写入2. 创建App.ku.vue(可自定义此根组件名称请下拉至功能参考设置)通过标签KuRootView /或ku-root-view /指定视图存放位置并且可以将该标签放置到template内任意位置但仅可有一个!-- src/App.ku.vue | App.ku.vue -- script setup langts import { ref } from vue const helloKuRoot ref(Hello AppKuVue) /script template div{{ helloKuRoot }}/div !-- 顶级 KuRootView -- KuRootView / !-- 或内部 KuRootView无论放置哪一个层级都被允许但仅可有一个 -- div KuRootView / /div /templateNoteCLI: 需要在src目录下创建下 App.ku.vue (或自定义名称)HBuilderX: 直接在根目录下创建 App.ku.vue (或自定义名称)Important该标签与 VueRouter 中的 RouterView 功能类似但请注意由于Uniapp-Vue的局限性该功能并不完全等同于VueRouter的 RouterView功能功能一自定义虚拟根组件名称(默认App.ku.vue)1. 通过设置 vite.config.(js|ts) 下插件的参数rootFileName来自定义虚拟根组件名称// vite.config.(js|ts) import Uni from dcloudio/vite-plugin-uni import UniKuRoot from uni-ku/root import { defineConfig } from vite export default defineConfig({ plugins: [ UniKuRoot({ // 默认含后缀 .vue直接设置命名即可 rootFileName: KuRoot, }), // ...other plugins ] })2. 创建/修改虚拟根组件为KuRoot.vue即可实现自定义其余功能不变// App.ku.vue 文件重命名为 KuRoot.vue功能二使用虚拟根组件实例(即App.ku.vue)有两种启用方式局部或全部启用一、 局部启用1. 暴露出 App.ku.vue 里所要被使用的变量或方法!-- src/App.ku.vue | App.ku.vue -- script setup langts import { ref } from vue const helloKuRoot ref(Hello AppKuVue) const exposeRef ref(this is form app.Ku.vue) defineExpose({ exposeRef, }) /script template div div{{ helloKuRoot }}/div KuRootView / /div /template2. 在 template 内编写 rootuniKuRoot并通过 const uniKuRoot ref() 获取模板引用uniKuRoot 仅是一个变量你可以根据你习惯重新命名!-- src/pages/*.vue -- script setup langts import { ref } from vue const uniKuRoot ref() /script template rootuniKuRoot view Hello UniKuRoot /view /template二、全局启用1. 通过配置enabledGlobalRef开启全局自动注入 App.ku 实例// vite.config.(js|ts) import Uni from dcloudio/vite-plugin-uni import UniKuRoot from uni-ku/root import { defineConfig } from vite export default defineConfig({ plugins: [ UniKuRoot({ enabledGlobalRef: true }), Uni() ] })2. 暴露出 App.ku 里所要被使用的变量或方法!-- src/App.ku.vue | App.ku.vue -- script setup langts import { ref } from vue const helloKuRoot ref(Hello UniKuRoot) const exposeRef ref(this is from App.ku.vue) defineExpose({ exposeRef, }) /script template div div{{ helloKuRoot }}/div KuRootView / /div /template3. 通过特有内置方法 getCurrentPages() 获取暴露的数据!-- src/pages/*.vue -- script setup langts import { onMounted, ref } from vue const pagesStack getCurrentPages() const uniKuRoot ref() onMounted(() { uniKuRoot.value pagesStack[pagesStack.length - 1].$vm.$refs.uniKuRoot }) /script template view Hello UniKuRoot /view /template功能三过滤掉不需要根组件的页面如果遇到一些不需要根组件的页面可以设置excludePages选项来过滤excludePages选项支持采用 glob 模式进行编写// vite.config.(js|ts) import Uni from dcloudio/vite-plugin-uni import UniKuRoot from uni-ku/root import { defineConfig } from vite export default defineConfig({ plugins: [ UniKuRoot({ excludePages: [ pages/exclude.vue, pages/exclude/**/*.vue ], }), Uni() ] })✨ 例子以下例子均以CLI创建项目为例,HBuilderX项目设置同理, 只要注意是否需要包含src目录即可不仅是 Toast 组件还可以是 Message、LoginPopup 等等1. 编写 Toast 组件!-- src/components/GlobalToast.vue -- script setup langts import { useToast } from /composables/useToast const { globalToastState, hideToast } useToast() /script template div v-ifglobalToastState classtoast-wrapper clickhideToast div classtoast-box welcome to use uni-ku/root /div /div /template style scoped .toast-wrapper{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; } .toast-box{ background: white; color: black; } /style2. 实现 Toast 组合式API// src/composables/useToast import { ref } from vue const globalToastState ref(false) export function useToast() { function showToast() { globalToastState.value true } function hideToast() { globalToastState.value false } return { globalToastState, showToast, hideToast, } }3. 挂载至 App.ku.vue!-- src/App.ku.vue -- script setup langts import GlobalToast from /components/GlobalToast.vue /script template KuRootView / GlobalToast / /template4. 视图内部触发全局 Toast 组件!-- src/pages/*.vue -- script setup langts import { useToast } from /composables/useToast const { showToast } useToast() /script template view Hello UniKuRoot /view button clickshowToast 视图内触发展示Toast /button /template与uni-helper-layouts的区别root的核心理念就是尽可能的靠近Vue中的App.vuelayouts 则是类nuxt的布局系统root 是 layouts 之上提供更多的自由度能够实现layouts的效果更加容易控制布局组件root 能够使用PageMeta自动提取到页面顶层节点root 拥有不同的方式使用模板引用