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

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

运行环境

nodejs > 16.x.x

nuxt3项目初始化

  • 创建项目
1
pnpm dlx nuxi init nuxt-app
1
npx nuxi init nuxt3-app
  • 别名设置
    1. 配置 nuxt.config.ts
1
2
3
4
5
6
7
alias: {
  "@": resolve(__dirname, "./"),
  "@pages": resolve(__dirname, "./pages"),
  "@server": resolve(__dirname, "./server"),
  'images': resolve(__dirname, './assets/images'),
  'style': resolve(__dirname, './assets/style'),
},
  1. 配置 tsconfig.json
1
2
3
4
5
6
7
8
9
10
11
12
{
  // https://nuxt.com/docs/guide/concepts/typescript
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".", // 跟路劲
    "paths": {
      "@/*": ["./*"],
      "@pages/*": ["./pages/*"],
      "@server/*": ["./server/*"]
    }
  }
}
  • 代理设置

    nuxt.config.ts 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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 组件库安装

    依赖安装

1
2
3
4
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

1
@use "element-plus/dist/index.css";

tsconfig.json

1
2
3
4
5
6
7
{
  // https://nuxt.com/docs/guide/concepts/typescript
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "types": ["element-plus/global"]
  }
}

nuxt.config.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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

1
2
3
4
5
6
7
8
9
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

1
<el-button> ElButton </el-button>
  • ecahrt 加入
1
2
3
export default defineNuxtConfig({
  build: { transpile: ["echarts"] },
})
  • less、sass支持

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

1
npm install --save less less-loader

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
export default defineNuxtConfig({
    // css
    css: ['@/assets/css/index.css'],
    // vite
    vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: '@use "@/assets/css/index.scss" as *;'
                }
            }
        }
    }
})
  • normalize.css 消除默认样式
  1. 安装依赖
1
pnpm install normalize.css
  1. app.vue 进入
1
2
3
<script setup>
import "normalize.css/normalize.css";
<script/>

常见用法

  • title设置，使用useHead()方法
1
2
3
useHead({
    title: 'snow-title-2'
})
  • 加载静态资源
1
2
3
4
<div>
  <img src="~/assets/nginx.jpg" alt="nginx">
  <img src="~/public/nginx.jpg" alt="nginx">
</div>
  • 指定布局layout
1
2
3
definePageMeta({
    layout: 'layout-snow'
})
  • middleware 中间件，鉴权

    /middleware/auth.ts

1
2
3
export default defineNuxtRouteMiddleware((to, from)=>{
    console.log("auth")
})

使用 /pages/plugin.vue

1
2
3
4
5
6
7
<script setup lang="ts">
 
definePageMeta({
    middleware: ["auth", "snow"]
})
 
</script>
  • server 服务开发

    server/api/test.get.ts

1
2
3
export default defineEventHandler((event) => {
    return `test get ts`
})
  • 部署
  1. ssr 服务端渲染部署
1
pnpm run build

node 启动

1
node ./.output/server/index.mjs

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

1
2
3
4
5
6
7
8
9
10
module.exports = {
  apps: [
    {
      name: "NuxtAppName",
      exec_mode: "cluster",
      instances: "max",
      script: "./.output/server/index.mjs",
    },
  ],
};

pm2 常用指令

1
2
3
4
5
6
7
pm2 start xxx.js
pm2 stop id
pm2 stop all
pm2 list
pm2 logs // 运行情况
pm2 reload all //重启所有进程
pm2 delete all //删除所有进程
  1. 静态页面部署
1
pnpm run generate
工程化
#nuxt3
2022-12-22-【工程化】nuxt3
https://zhangyingxuan.github.io/2023-02-22-【工程化】nuxt3/
作者
blowsysun
许可协议