13、开发过程中了解nuxi的使用

394 阅读3分钟

为了在开发中提高我们的开发效率,在本章节我们不得不了解 Nuxt3 中的一些 nuxi命令。具体如下:

1、nuxi add

//TEMPLATE  ----- 要生成的文件的模板。
//NAME       ----- 要创建的文件的名称。
//--cwd     ----- 在哪一个目录创建。
//--force   ----- 是否强制覆盖。
npx nuxi add [--cwd] [--force] <TEMPLATE> <NAME> 

//例如

//创建 component 组件 TheHeader
npx nuxi add component TheHeader

//创建 composable 封装 foo 业务
npx nuxi add composable foo

//创建 layout 布局组件  custom
npx nuxi add layout custom

//创建 plugin 插件 analytics
npx nuxi add plugin analytics

//创建 page 页面 about
npx nuxi add page about

//创建 middleware 中间键 auth
npx nuxi add middleware auth

//创建 api 接口 hello
npx nuxi add api hello

2、 nuxi analyze

//构建 Nuxt 并分析生产包 此命令设置`process.env.NODE_ENV`为`production`
npx nuxi analyze [rootDir]   //rootDir目标应用程序的目录

3、 nuxi build

//该`build`命令会创建一个`.output`目录,其中包含您的所有应用程序、服务器和依赖项,可用于生产。
//rootDir  默认`.`  应用程序的根目录;prerender 默认`false`,预渲染应用程序的每条路线。
npx nuxi build [rootDir]

4、 nuxi cleanup

/***删除常见的生成 Nuxt 文件和缓存,包括-  
*
*`.nuxt`  
*`.output`  
*`node_modules/.vite` 
*`node_modules/.cache`
*
***/

npx nuxi clean|cleanup [rootDir]  //rootDir项目的根目录

5、 nuxi dev

/***dev开发热模块替换 
*
* rootDir       程序的根目录
* --clipboard   将 URL 复制到剪贴板
* --open, -o    在浏览器中打开网址
* --no-clear    启动后不清除控制台
* --port, -p    端口监听
* --host, -h    服务器的主机名
* --https       `https`默认情况下使用带有自签名证书的协议进行侦听
* --ssl-cert    为 https 指定证书
* --ssl-key     指定 https 证书的密钥
*
***/
npx nuxi dev [rootDir] [--clipboard] [--open, -o] 
[--no-clear] [--port, -p] [--host, -h] [--https] [--ssl-cert] [--ssl-key]

6、 nuxi generate

//编译生成静态文件,可以将其部署在任何静态托管服务上
npx nuxi generate [rootDir]

7、 nuxi info

/*** 记录有关当前或指定 Nuxt 项目的信息
*
* --template, -t       指定模板名称或 git 存储库以用作模板
* --force              强制克隆到任何现有目录   
* --offline            不要尝试从 github 下载,只使用本地缓存
* --prefer-offline     先尝试本地缓存下载模板
* --shell              在克隆目录中打开 shell
*
***/
npx nuxi info [rootDir]

8、 nuxi init

//初始化一个新的 Nuxt 项目
npx nuxi init|create [--verbose|-v] [--template,-t] [dir]

9、 nuxi prepare

//创建一个目录并生成类型
npx nuxi prepare [rootDir]   //rootDir项目的根目录

10、 nuxi preview

//启动服务器以预览您的 Nuxt 应用程序`build`
npx nuxi preview [rootDir]   //rootDir项目的根目录

11、 nuxi typecheck

运行`vue-tsc` 以检查整个应用程序的类型
npx nuxi typecheck [rootDir]

12、 nuxi upgrade

//将 Nuxt 3 升级到最新版本

//--force, -f 升级前删除`node_modules`和锁定文件。默认 `false`
npx nuxi upgrade [--force|-f]

> 总结:到这里,关于 Nuxt3 的命令已经介绍完毕,其中有部分在开发中我们并不常用,大家根据自身需要适当选择,选择适合自己好用的,感觉麻烦我们就采用自己的方式,比如创建 文件文件夹 等,就按我们传统的手动 新建