nuxt add-template
在 Nuxt 应用中构建实体脚手架
Terminal
npx nuxt add-template <TEMPLATE> <NAME> [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--force] [--mode=<client|server>] [--method=<connect|delete|get|head|options|patch|post|put|trace>] [--global] [--api] [--pages] [--client] [--server] [--connect] [--delete] [--get] [--head] [--options] [--post] [--put] [--trace] [--patch]
add-template 命令会根据项目结构,在正确的目录中构建文件脚手架。它取代了 nuxt add <template> <name>,后者仍可运行,但已被弃用。
参数
| Argument | Description |
|---|---|
TEMPLATE=<api|app|app-config|component|composable|error|layer|layout|middleware|module|page|plugin|server-middleware|server-plugin|server-route|server-util> | 指定要生成的模板 |
NAME | 指定生成文件的名称 |
选项
| Option | Default | Description |
|---|---|---|
--cwd=<directory> | . | 指定 Nuxt 项目的根目录 |
--logLevel=<silent|info|verbose> | 指定构建时的日志级别 | |
--force | false | 如果文件已存在则覆盖 |
--mode=<client|server> | 为组件或插件添加客户端或服务器后缀 | |
--method=<connect|delete|get|head|options|patch|post|put|trace> | 为 API 路由添加 HTTP 方法后缀 | |
--global | 创建全局路由中间件 | |
--api | 在 API 目录中创建服务器路由 | |
--pages | 在 app 模板中包含 NuxtPage 和 NuxtLayout | |
--client | --mode client 的简写 | |
--server | --mode server 的简写 | |
--connect | --method connect 的简写 | |
--delete | --method delete 的简写 | |
--get | --method get 的简写 | |
--head | --method head 的简写 | |
--options | --method options 的简写 | |
--post | --method post 的简写 | |
--put | --method put 的简写 | |
--trace | --method trace 的简写 | |
--patch | --method patch 的简写 |
修饰符:
某些模板接受一个额外的标志,用于向生成文件名添加后缀(例如 .client 或 .get)。--mode 和 --method 接受的每个值也都有对应的独立标志,因此 --mode client 和 --client 的作用相同。
文件会相对于你的 srcDir 写入,该目录默认为 app/;服务器文件则会相对于你的 serverDir 写入。以下路径均假定使用这些默认值。
Terminal
# Generates `app/plugins/sockets.client.ts`
npx nuxt add-template plugin sockets --mode client
nuxt add-template component
- 修饰符标志:
--mode,或--client/--server
Terminal
# Generates `app/components/TheHeader.vue`
npx nuxt add-template component TheHeader
nuxt add-template composable
Terminal
# Generates `app/composables/foo.ts`
npx nuxt add-template composable foo
nuxt add-template layout
Terminal
# Generates `app/layouts/custom.vue`
npx nuxt add-template layout custom
nuxt add-template plugin
- 修饰符标志:
--mode,或--client/--server
Terminal
# Generates `app/plugins/analytics.ts`
npx nuxt add-template plugin analytics
nuxt add-template page
Terminal
# Generates `app/pages/about.vue`
npx nuxt add-template page about
Terminal
# Generates `app/pages/category/[id].vue`
npx nuxt add-template page "category/[id]"
nuxt add-template middleware
- 修饰符标志:
--global
Terminal
# Generates `app/middleware/auth.ts`
npx nuxt add-template middleware auth
nuxt add-template api
- 修饰符标志:
--method,或将方法作为独立标志(--get、--post等)
Terminal
# Generates `server/api/hello.ts`
npx nuxt add-template api hello
nuxt add-template server-route
- 修饰符标志:
--api,用于将路由写入server/api而不是server/routes
Terminal
# Generates `server/routes/webhook.ts`
npx nuxt add-template server-route webhook
nuxt add-template layer
Terminal
# Generates `layers/subscribe/nuxt.config.ts`
npx nuxt add-template layer subscribe
解析后会位于项目外部的名称将被拒绝,因此请传入相对于项目的路径,且开头不能有斜杠,也不能包含
.. 片段。