2022-12-22-【工程化】nuxt3

https://blog.csdn.net/snowball_li/article/details/128013833

运行环境

nodejs > 16.x.x

nuxt3项目初始化

创建项目
```
pnpm dlx nuxi init nuxt-app
```

npx nuxi init nuxt3-app

别名设置

配置 nuxt.config.ts

alias: {
  "@": resolve(__dirname, "./"),
  "@pages": resolve(__dirname, "./pages"),
  "@server": resolve(__dirname, "./server"),
  'images': resolve(__dirname, './assets/images'),
  'style': resolve(__dirname, './assets/style'),
},

配置 tsconfig.json

{
// https://nuxt.com/docs/guide/concepts/typescript
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
  "baseUrl": ".", // 跟路劲
  "paths": {
 "@/*": ["./*"],
 "@pages/*": ["./pages/*"],
 "@server/*": ["./server/*"]
  }
}
}

代理设置

nuxt.config.ts 配置 ```js

export default defineNuxtConfig({ //vite代理方式，nitro 代理都可以成功；二选一即可 , vite: { server: { proxy: { ‘/api’: { target: ‘http://127.0.0.1:3000/’, // rewrite: (path) => path.replace(/^\/api/, ‘’), } }, } } , nitro: { devProxy: { “/api”: { target: ‘http://127.0.0.1:3000/’, prependPath: true, changeOrigin: true, } } } })

- element-plus 组件库安装
> 依赖安装

pnpm install element-plus pnpm add sass sass-loader -D pnpm add unplugin-auto-import unplugin-icons unplugin-vue-components -D

> assets/scss/index.scss

@use “element-plus/dist/index.css”;

> tsconfig.json
``` js
{
  // https://nuxt.com/docs/guide/concepts/typescript
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "types": ["element-plus/global"]
  }
}

nuxt.config.ts

import AutoImport from 'unplugin-auto-import/vite'
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import IconsResolver from "unplugin-icons/resolver";
const lifecycle = process.env.npm_lifecycle_event;
export default defineNuxtConfig({
    vite: {
        plugins: [
            AutoImport({
                resolvers: [
                    ElementPlusResolver(
                    ),
                    IconsResolver()]
            }),
            Components({
                dts: true,
                resolvers: [ElementPlusResolver(
                    {
                        importStyle: false
                    }
                )]
            }),
        ],
    },
    components: true,
    css: ["~/assets/scss/index.scss"],
    transpile: ["element-plus"],
    build: {
        transpile: lifecycle === "build" ? ["element-plus"] : [],
    },
})

plugins/element-plus.ts ```js import { ID_INJECTION_KEY } from ‘element-plus’;

export default defineNuxtPlugin(nuxtApp => { // Doing something with nuxtApp nuxtApp.vueApp.provide(ID_INJECTION_KEY,{ prefix: Math.floor(Math.random() * 10000), current: 0, }) })

> pages/index.vue
```js
<el-button> ElButton </el-button>

ecahrt 加入

export default defineNuxtConfig({
build: { transpile: ["echarts"] },
})

less、sass支持

直接安装 less 或 sass包即可支持。

npm install --save less less-loader

vite配置，nuxt.config.ts配置vite。

export default defineNuxtConfig({
    // css
    css: ['@/assets/css/index.css'],
    // vite
    vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: '@use "@/assets/css/index.scss" as *;'
                }
            }
        }
    }
})

normalize.css 消除默认样式

安装依赖
```
pnpm install normalize.css
```

app.vue 进入

<script setup>
import "normalize.css/normalize.css";
<script/>

常见用法

title设置，使用useHead()方法
```
useHead({
  title: 'snow-title-2'
})
```
加载静态资源 ``` vue

- 指定布局layout
``` nuxt
definePageMeta({
    layout: 'layout-snow'
})

middleware 中间件，鉴权

/middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from)=>{
  console.log("auth")
})
使用 /pages/plugin.vue ``` js

definePageMeta({ middleware: [“auth”, “snow”] })

</script>

- server 服务开发
> server/api/test.get.ts
```js
export default defineEventHandler((event) => {
    return `test get ts`
})

部署
1. ssr 服务端渲染部署
```
pnpm run build
```

node 启动

node ./.output/server/index.mjs

pm2 启动 pm2.js 安装pm2 pnpm add -g pm2（如果提示setup，则执行pnpm setup，并更新配置 source ~/.zshrc

module.exports = {
  apps: [
    {
      name: "NuxtAppName",
      exec_mode: "cluster",
      instances: "max",
      script: "./.output/server/index.mjs",
    },
  ],
};

pm2 常用指令

pm2 start xxx.js
pm2 stop id
pm2 stop all
pm2 list
pm2 logs // 运行情况
pm2 reload all //重启所有进程
pm2 delete all //删除所有进程

静态页面部署
```
pnpm run generate
```