vue3 用pug语法 怎么写 一个页面

在Vue 3中使用Pug (也称为Haml) 插件，你可以将HTML模板转换成更简洁的语法。首先，你需要安装`vue-template-compiler` 和 `pug-plain-loader` 或 `@vue/cli-plugin-pug`。假设你已经配置了Pug，下面是一个简单的例子：

// 使用Pug (Pug文件名通常以.pug结尾)
// pages/index.pug
doctype html
html
  head
    title "我的Vue3 Pug 页面"
  body
    div(class="container")
      h1 Hello, World! // 这里使用Pug的标签缩写形式
    script(src="@/assets/vendors.js") // 引入Vue及依赖
    script(src="@/main.pug") // 这里引入应用的入口点

然后，在`main.js`或`.js` 文件中，通过插件来编译Pug:

import Vue from 'vue'
import App from './App.vue'
import { createApp } from 'vue/create-app'

// 如果使用的是cli-plugin-pug
import PugPlugin from '@vue/cli-plugin-pug'

const app = createApp(App)

// 注册Pug插件
if(process.env.NODE_ENV === 'development') {
  PugPlugin(app)
}

app.mount('#app')