Vue应用构建基石：createApp()深度解析与SEO最佳实践

import { createApp } from 'vue'

const app = createApp({
  data() {
    return { 
      siteName: '网址大全导航平台'
    }
  }
})

app.mount('#app')

const app = createApp({
  setup() {
    const pageTitle = ref('权威网址大全')
    const metaDescription = computed(() => 
      `${pageTitle.value} - 收录全球优质站点`
    )
    
    return { pageTitle, metaDescription }
  }
})

import NavigationMenu from './components/Navigation.vue'

const app = createApp(App)
app.component('WebsiteNavigation', NavigationMenu)
  .component('FooterLinks', {
    template: `<div class="link-group">
      <a href="/sitemap">网站地图</a>
      <a href="/directory">网址大全</a>
    </div>`
  })

import router from './router'
import axiosPlugin from './plugins/axios'

const app = createApp(App)
app.use(router)
  .use(axiosPlugin, {
    baseURL: 'https://api.website-directory.com',
    timeout: 5000
  })

const app = createApp(App)

if (process.env.NODE_ENV === 'production') {
  app.config.performance = true
  app.config.devtools = false
  app.config.errorHandler = (err, vm, info) => {
    logErrorToService(err, info)
  }
}

import { createSSRApp } from 'vue'

export function createApp() {
  const app = createSSRApp({
    data: () => ({
      pageData: window.__INITIAL_STATE__
    })
  })
  
  app.mixin({
    beforeMount() {
      if (this.$options.asyncData) {
        this.$options.asyncData()
      }
    }
  })
  
  return app
}

const app = createApp({
  mounted() {
    this.$nextTick(() => {
      const ldJson = document.createElement('script')
      ldJson.type = 'application/ld+json'
      ldJson.text = JSON.stringify({
        "@context": "https://schema.org",
        "@type": "ItemList",
        "itemListElement": this.navItems.map((item, index) => ({
          "@type": "ListItem",
          "position": index + 1,
          "name": item.title,
          "url": item.link
        }))
      })
      document.head.appendChild(ldJson)
    })
  }
})

app.directive('title', {
  mounted(el, binding) {
    document.title = `${binding.value} - 全球网址大全`
    const ogTitle = document.querySelector('meta[property="og:title"]')
    if (ogTitle) ogTitle.content = document.title
  }
})

// 在组件中使用
<h1 v-title="currentCategory"></h1>

const app = createApp(App)

// 注册子应用通信系统
app.provide('mainApp', {
  sharedState: reactive({
    userInfo: null,
    navData: []
  }),
  eventBus: mitt()
})

// 子应用接入
const subApp = createApp(SubModule)
subApp.mixin({
  inject: ['mainApp'],
  created() {
    this.mainApp.eventBus.on('nav-update', this.handleUpdate)
  }
})

app.config.performance = true

const metrics = {
  FCP: null,
  LCP: null
}

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries()
  entries.forEach(entry => {
    if (entry.name === 'first-contentful-paint') {
      metrics.FCP = entry.startTime
    }
  })
})

observer.observe({ entryTypes: ['paint'] })