Nuxt3 configuration and packaging release from scratch

Nuxt3 is a development framework based on Vue3, based on server-side rendering SSR, which can be more conveniently used for Vue SEO optimization.

Nuxt 3.0 new features include:

Lighter: Up to 75x smaller server deployments and client artifacts targeting modern browsers

Faster: Provide dynamic code splitting capability based on nitro to optimize cold start performance

Hybrid: Incremental static generation and other advanced features are now possible

Suspense: Get data before and after any component and navigation

Composition API: Real code reuse with Composition API and Nuxt 3 composables

Nuxt CLI: Without any dependencies, it helps you easily build projects and integrate modules

Nuxt Devtools: Work faster with info and quick fixes right in the browser

Nuxt Kit: Fresh Module Development with Typescript and Cross-Version Compatibility

Webpack 5: Faster build times and smaller bundle sizes without configuration

Vite: Use Vite as a packaging tool to experience lightning-fast HMR

Vue 3: Vue 3 is a solid foundation for your next web application

TypeScript: built with native TypeScript and ESM, no extra steps required

Since the official Nuxt3 has just been released, there are not many articles and documentation resources. At present, it is not possible to build a Nuxt3 template project based on the official document ( Nuxt: The Intuitive Web Framework ), and it may need to go over the wall.

Share the steps directly here.

1. Download the official template.

Official template library address: https://github.com/nuxt/starter

The content address actually pulled by Nuxt3 is: starter/v3.json at templates · nuxt/starter · GitHub

The content of this v3.json file is as shown above, we can get the download address: https://codeload.github.com/nuxt/starter/tar.gz/refs/heads/v3

Use this address to download the official Nuxt3 template.

2. Install the library.

Run the command to install dependent libraries:

npm install

3. Online debugging and packaging commands.

//测试运行
npm run dev

//打包（SSR混合渲染模式）
npm run build

//打包（SPA静态化生成模式）
npm run generate

4. Customize the debugging and running port.

The default port used by Nuxt3 is 3000. We can configure and modify the port number of the development and debugging environment in the package.json file.

5. Customize the running port number after packaging.

At present, after trying various methods, only through the pm2 startup method can the port number customization of the packaged project start and run be customized.

pm2 installation command:

npm install -g pm2

Create a new pm2 packaging configuration file: ecosystem.config.js

module.exports = {
    apps: [
      {
        name: 'nuxt-app',
        port: '3060',
        exec_mode: 'fork',//cluster
        instances: '1',//max
        script: './.output/server/index.mjs'
      }
    ]
  }

Start command:

pm2 start ecosystem.config.js

Stop command:

pm2 stop ecosystem.config.js

Dark mode, use: useDark | VueUse

Install VueUse

npm i @vueuse/core

<script setup>
import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark()
const toggleDark = useToggle(isDark)

</script>

<template>
  <span @click.stop="toggleDark()">暗黑模式</span>
  <el-switch size="small" v-model="isDark"/>
</template>

Alibaba Cloud ECS Linux server or Linux server installation Nodejs steps

//下载Linux版本nodejs
wget https://npm.taobao.org/mirrors/node/v16.14.0/node-v16.14.0-linux-x64.tar.xz
//或者
wget https://nodejs.org/dist/v16.14.0/node-v16.14.0-linux-x64.tar.xz

//解压
tar -xvf node-v16.14.0-linux-x64.tar.xz

//移动文件夹
mv node-v16.14.0-linux-x64/ /usr/local/node

//设置环境变量
echo "export PATH=$PATH:/usr/local/node/bin" >> /etc/profile

//让配置生效
source /etc/profile

//测试输出node版本号
node -v

//测试输出node版本号
npm -v

Nuxt3 configuration and packaging release from scratch

Guess you like