nuxtjs3常用功能和示例

lubingzy

已于 2023-03-10 14:32:39 修改

阅读量1.4k

点赞数

分类专栏：编程开发文章标签： javascript vue.js 前端

于 2023-03-10 13:34:23 首次发布

本文链接：https://blog.csdn.net/lubingzy/article/details/129440962

版权

编程开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Nuxt.js 3 是一个基于 Vue.js 的静态站点生成器和应用框架，它通过一系列约定来简化开发过程，提高开发效率。下面是 Nuxt.js 3 常用功能和示例：

静态生成和服务端渲染

Nuxt.js 3 支持静态生成和服务端渲染两种模式，可以根据项目需求选择不同的模式。静态生成可以提高页面加载速度，服务端渲染可以提高 SEO。

示例：

// 静态生成
export default {
  async generate() {
    return {
      '/': { 
        // 首页
        page: '/index',
        // 额外的参数
        query: {
          lang: 'en'
        }
      },
      '/about': { 
        // 关于页面
        page: '/about',
        // 额外的参数
        query: {
          lang: 'en'
        }
      }
    }
  }
}

// 服务端渲染
export default {
  async fetch() {
    const { data } = await this.$axios.get('/api/data')
    return { data }
  }
}

路由

Nuxt.js 3 的路由可以自动生成，也可以手动配置。路由支持动态路由和命名视图，方便开发者管理页面和路由。

示例：

// 自动生成路由
export default {
  components: true
}

// 手动配置路由
export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'custom',
        path: '/custom/:id',
        component: resolve(__dirname, 'pages/custom.vue')
      })
    }
  }
}

数据获取

Nuxt.js 3 可以在页面组件中获取数据，也可以在插件、中间件、布局组件等地方获取数据。Nuxt.js 3 还支持异步数据获取和数据缓存。

示例：

// 在页面组件中获取数据
export default {
  async fetch() {
    const { data } = await this.$axios.get('/api/data')
    return { data }
  }
}

// 在插件中获取数据
export default (context, inject) => {
  const { data } = await context.$axios.get('/api/data')
  inject('data', data)
}

// 在中间件中获取数据
export default function (context) {
  const { data } = await context.$axios.get('/api/data')
  context.data = data
}

// 在布局组件中获取数据
export default {
  async fetch() {
    const { data } = await this.$axios.get('/api/data')
    return { data }
  }
}

Vuex

Nuxt.js 3 集成了 Vuex 状态管理库，可以方便地管理应用状态。

示例：

// 定义 store
export const state = () => ({
  count: 0
})

export const mutations = {
  increment(state) {
    state.count++
  }
}

// 在页面组件中使用 store
export default {
  methods: {
    increment() {
      this.$store.commit('increment')
    }
  }
}

插件

Nuxt.js 3 的插件可以在应用程序启动前和运行时执行。插件可以用于添加第三方库、设置全局配置、添加自定义指令等。

示例：

// 注册插件
export default (context, inject) => {
  inject('myPlugin', () => {
    console.log('My plugin is working!')
  })
}

// 在页面组件中使用插件
export default {
  mounted() {
    this.$myPlugin()
  }
}

中间件

Nuxt.js 3 的中间件可以在页面组件渲染前或路由切换前执行一些逻辑，比如检查用户权限、获取数据等。

示例：

jsCopy code
// 定义中间件
export default function (context) {
  if (!context.store.state.user) {
    return context.redirect('/login')
  }
}

// 在路由配置中使用中间件
export default {
  middleware: 'auth'
}

布局

Nuxt.js 3 的布局可以用于定义应用程序的页面布局，包括头部、底部、侧边栏等。

示例：

vueCopy code
<!-- 定义布局 -->
<template>
  <div>
    <header>Header</header>
    <main><slot /></main>
    <footer>Footer</footer>
  </div>
</template>

<!-- 使用布局 -->
<template>
  <nuxt>
    <template v-slot:default="{ Component, props }">
      <my-layout>
        <Component v-bind="props" />
      </my-layout>
    </template>
  </nuxt>
</template>

静态站点生成

Nuxt.js 3 提供了静态站点生成的功能，可以将应用程序构建成静态 HTML 文件，以提高网站性能、SEO 和安全性。

示例：

jsCopy code
// nuxt.config.js

export default {
  target: 'static',
  generate: {
    routes: [
      '/blog/1',
      '/blog/2',
      '/blog/3'
    ]
  }
}

打包优化

Nuxt.js 3 提供了一些打包优化的配置选项，可以减少打包体积、提高性能和加快构建速度。

示例：

jsCopy code
// nuxt.config.js

export default {
  build: {
    extractCSS: true,
    minimize: true,
    terser: {
      extractComments: false
    },
    splitChunks: {
      layouts: true,
      pages: true,
      commons: true
    }
  }
}

服务器端渲染

Nuxt.js 3 支持服务器端渲染，可以在服务器端生成 HTML 内容，提高首屏渲染速度和 SEO。

示例：

jsCopy code
// server.js

const { createServer } = require('http')
const { Nuxt } = require('nuxt')

const config = require('./nuxt.config.js')
const nuxt = new Nuxt(config)

createServer(nuxt.render).listen(3000, () => {
  console.log(`Server listening on http://localhost:3000`)
})

动态路由

Nuxt.js 3 支持动态路由，可以根据不同的参数生成不同的页面，例如博客文章详情页、商品详情页等。

示例：

jsCopy code
// pages/blog/_id.vue

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <div v-html="post.content"></div>
  </div>
</template>

<script>
export default {
  asyncData({ params }) {
    return axios.get(`https://api.example.com/posts/${params.id}`)
      .then(res => ({ post: res.data }))
  }
}
</script>

// nuxt.config.js

export default {
  generate: {
    async routes() {
      const posts = await axios.get('https://api.example.com/posts')
      return posts.map(post => `/blog/${post.id}`)
    }
  }
}

状态管理

Nuxt.js 3 支持使用 Vuex 进行状态管理，可以在应用程序中存储和管理共享状态。

示例：

jsCopy code
// store/index.js

export const state = () => ({
  count: 0
})

export const mutations = {
  increment(state) {
    state.count++
  }
}

// pages/index.vue

<template>
  <div>
    <h1>{{ $store.state.count }}</h1>
    <button @click="$store.commit('increment')">Increment</button>
  </div>
</template>

CSS 预处理器

Nuxt.js 3 支持使用 Sass、Less 和 Stylus 等 CSS 预处理器，可以在应用程序中使用更加灵活的 CSS。

示例：

scssCopy code
/* assets/main.scss */

$primary-color: #0070f3;

button {
  background-color: $primary-color;
  color: white;
}

jsCopy code
// nuxt.config.js

export default {
  css: [
    '@/assets/main.scss'
  ]
}

构建钩子

Nuxt.js 3 提供了构建钩子，可以在构建过程中执行一些自定义逻辑，例如修改默认配置、添加插件等。

示例：

jsCopy code
// nuxt.config.js

export default {
  build: {
    extend(config, { isDev, isClient }) {
      // 修改默认配置
      config.module.rules.push({
        test: /.txt$/,
        use: 'raw-loader'
      })

      // 添加插件
      config.plugins.push(
        new MyPlugin()
      )
    }
  }
}

集成第三方库

Nuxt.js 3 支持集成第三方库，例如 Axios、Lodash 和 Moment 等常用库，可以在应用程序中方便地使用这些库。

示例：

jsCopy code
// plugins/axios.js

import axios from 'axios'

export default function({ $axios }) {
  $axios.defaults.baseURL = 'https://api.example.com'
  $axios.defaults.timeout = 5000
  $axios.interceptors.request.use(config => {
    console.log('Request:', config)
    return config
  })
  $axios.interceptors.response.use(response => {
    console.log('Response:', response)
    return response
  })
}

jsCopy code
// nuxt.config.js

export default {
  plugins: [
    '@/plugins/axios'
  ]
}

配置环境变量

Nuxt.js 3 支持配置环境变量，可以在不同的环境中使用不同的配置，例如开发环境、生产环境和测试环境等。

示例：

jsCopy code
// nuxt.config.js

export default {
  env: {
    apiUrl: process.env.API_URL || 'https://api.example.com',
    apiKey: process.env.API_KEY || '1234567890'
  }
}

jsCopy code
// pages/index.vue

<template>
  <div>
    <h1>{{ apiUrl }}</h1>
    <h2>{{ apiKey }}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      apiUrl: process.env.apiUrl,
      apiKey: process.env.apiKey
    }
  }
}
</script>

服务器端认证

Nuxt.js 3 支持服务器端认证，可以在服务器端进行用户身份验证，提高应用程序的安全性。

示例：

jsCopy code
// server.js

const { createServer } = require('http')
const { Nuxt } = require('nuxt')
const session = require('express-session')

const config = require('./nuxt.config.js')
const nuxt = new Nuxt(config)

createServer((req, res) => {
  req.session.user = { name: 'john' }
  nuxt.render(req, res)
}).listen(3000, () => {
  console.log(`Server listening on http://localhost:3000`)
})

jsCopy code
// pages/index.vue

<template>
  <div>
    <h1 v-if="$auth.user">{{ $auth.user.name }}</h1>
    <h2 v-else>Not authenticated</h2>
  </div>
</template>

<script>
export default {
  middleware: 'auth'
}
</script>

// middleware/auth.js

export default function({ app, redirect }) {
  if (!app.$auth.user) {
    return redirect('/login')
  }
}

静态文件服务

Nuxt.js 3 可以将应用程序打包为静态文件，然后使用任何静态文件服务器进行部署。

示例：

bashCopy code
# 生成静态文件
$ npx nuxt build
$ npx nuxt generate

# 部署静态文件
$ npx serve dist

自定义模板

Nuxt.js 3 支持自定义模板，可以使用自定义的 HTML 模板和 CSS 样式来生成应用程序。

示例：

htmlCopy code
<!-- templates/default.html -->

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head>
    {{ HEAD }}
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
    {{ STATE }}
    <script src="/js/script.js"></script>
  </body>
</html>

jsCopy code
// nuxt.config.js

export default {
  build: {
    templates: {
      app: './templates/default.html'
    }
  },
  css: [
    '@/assets/css/style.css'
  ]
}

模块

Nuxt.js 3 的模块系统使得开发者可以在应用程序中集成第三方功能或自定义功能。

示例：

jsCopy code
// modules/my-module.js

export default function(moduleOptions) {
  console.log('Module options:', moduleOptions)

  this.nuxt.hook('build:before', (builder) => {
    console.log('Building...')
  })

  this.nuxt.hook('generate:before', (generator) => {
    console.log('Generating...')
  })
}

// nuxt.config.js

export default {
  modules: [
    '~/modules/my-module'
  ],
  myModule: {
    option1: 'value1',
    option2: 'value2'
  }
}

TypeScript 支持

Nuxt.js 3 完全支持 TypeScript，可以使用 TypeScript 来编写应用程序和插件。

示例：

bashCopy code
# 安装 TypeScript 和相关依赖
$ yarn add --dev typescript @nuxt/typescript-build

# nuxt.config.js 配置
export default {
  buildModules: [
    '@nuxt/typescript-build'
  ]
}

# 创建一个 TypeScript 页面组件
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api'

export default defineComponent({
  data() {
    return {
      title: 'Hello',
      message: 'World'
    }
  }
})
</script>

Vue 组件自动导入

Nuxt.js 3 可以自动导入 Vue 组件，无需手动导入。

示例：

htmlCopy code
<template>
  <div>
    <h1>Components Demo</h1>
    <MyButton>Click Me</MyButton>
  </div>
</template>

<!-- 在 components 目录下创建 MyButton.vue 组件 -->
<template>
  <button>
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'MyButton'
}
</script>

Composition API

Nuxt.js 3 支持 Vue 3 的 Composition API，可以更方便地编写组件逻辑。

示例：

htmlCopy code
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { ref } from '@nuxtjs/composition-api'

export default {
  setup() {
    const title = ref('Hello')
    const message = ref('World')

    return {
      title,
      message
    }
  }
}
</script>

Vuex 4

Nuxt.js 3 默认集成了 Vuex 4，可以更方便地管理应用程序的状态。

示例：

jsCopy code
// 创建一个 store
export const state = () => ({
  count: 0
})

export const mutations = {
  increment(state) {
    state.count++
  }
}

// 在页面组件中使用 store
<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="$store.commit('increment')">Increment</button>
  </div>
</template>

Axios

Nuxt.js 3 默认集成了 Axios，可以更方便地进行 HTTP 请求。

示例：

jsCopy code
// 发送一个 GET 请求
export default {
  async fetch() {
    const { data } = await this.$axios.get('/api/posts')
    console.log(data)
  }
}

// 发送一个 POST 请求
export default {
  methods: {
    async createPost() {
      const { data } = await this.$axios.post('/api/posts', {
        title: 'New Post',
        content: 'Lorem ipsum...'
      })
      console.log(data)
    }
  }
}

静态站点生成模式

Nuxt.js 3 可以生成静态站点，生成的静态文件可以直接部署在服务器上，无需动态生成 HTML。

示例：

bashCopy code
# 生成静态站点
$ yarn generate

自动化测试

Nuxt.js 3 提供了多种测试工具，可以方便地进行自动化测试。

示例：

bashCopy code
# 安装测试工具
$ yarn add --dev jest @vue/test-utils

# 编写一个测试
import { mount } from '@vue/test-utils'
import MyButton from '~/components/MyButton.vue'

describe('MyButton', () => {
  test('renders correctly', () => {
    const wrapper = mount(MyButton, {
      slots: {
        default: 'Click Me'
      }
    })
    expect(wrapper.html()).toMatchSnapshot()
  })
})

SSR 支持

Nuxt.js 3 支持服务器端渲染 (SSR)，可以更好地优化 SEO 和页面性能。

示例：

jsCopy code
// 在页面组件中使用服务器端渲染
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  asyncData() {
    return {
      title: 'Hello',
      message: 'World'
    }
  }
}
</script>

PWA 支持

Nuxt.js 3 提供了 PWA 支持，可以更方便地创建 Progressive Web Apps。

示例：

bashCopy code
# 安装 @nuxtjs/pwa 模块
$ yarn add @nuxtjs/pwa

# nuxt.config.js 配置
export default {
  modules: [
    '@nuxtjs/pwa'
  ],
  pwa: {
    manifest: {
      name: 'My App',
      short_name: 'My App',
      description: 'My awesome app',
      lang: 'en'
    }
  }
}

数据库集成

Nuxt.js 3 支持多种数据库集成，可以方便地与数据库交互。

示例：

bashCopy code
# 安装 @nuxtjs/apollo 模块
$ yarn add @nuxtjs/apollo graphql apollo-client

# nuxt.config.js 配置
export default {
  modules: [
    '@nuxtjs/apollo'
  ],
  apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: 'http://localhost:4000/graphql'
      }
    }
  }
}

# 在页面组件中使用 apollo 查询
<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
  </div>
</template>

<script>
import gql from 'graphql-tag'

export default {
  apollo: {
    post: {
      query: gql`
        query($id: ID!) {
          post(id: $id) {
            title
            content
          }
        }
      `,
      variables() {
        return {
          id: this.$route.params.id
        }
      }
    }
  }
}
</script>

Nuxt.js 模块

Nuxt.js 3 支持使用模块来扩展功能，可以在 nuxt.config.js 文件中配置使用的模块。

示例：

jsCopy code
// 安装 @nuxtjs/axios 模块
$ yarn add @nuxtjs/axios

// nuxt.config.js 配置
export default {
  modules: [
    '@nuxtjs/axios'
  ],
  axios: {
    baseURL: 'http://api.example.com'
  }
}

自定义插件

Nuxt.js 3 支持自定义插件，可以在插件中实现一些通用的功能。

示例：

jsCopy code
// plugins/my-plugin.js
export default (context, inject) => {
  // 添加全局方法或属性
  inject('myMethod', () => {
    console.log('Hello from myMethod')
  })
}

// nuxt.config.js 配置
export default {
  plugins: [
    '~/plugins/my-plugin.js'
  ]
}

// 在页面组件中使用
<template>
  <div>
    <button @click="$myMethod()">Click me</button>
  </div>
</template>

Nuxt.js 中间件

Nuxt.js 3 支持使用中间件，可以在路由跳转前或后执行一些操作。

示例：

jsCopy code
// middleware/auth.js
export default function ({ store, redirect }) {
  // 判断用户是否登录，如果未登录则跳转到登录页面
  if (!store.state.auth.loggedIn) {
    return redirect('/login')
  }
}

// 在页面组件中使用
<script>
export default {
  middleware: 'auth'
}
</script>

Nuxt.js 插槽

Nuxt.js 3 支持使用插槽，可以在组件中传递内容。

示例：

jsCopy code
// components/MyComponent.vue
<template>
  <div>
    <h1>{{ title }}</h1>
    <slot></slot>
  </div>
</template>

// 在页面组件中使用
<template>
  <MyComponent :title="'Hello'">
    <p>World</p>
  </MyComponent>
</template>

Nuxt.js 动态导入

Nuxt.js 3 支持使用动态导入，可以按需加载组件或模块，提高页面性能。

示例：

jsCopy code
// 使用动态导入加载一个组件
<template>
  <div>
    <h1>{{ title }}</h1>
    <component :is="myComponent"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello',
      myComponent: () => import('./MyComponent.vue')
    }
  }
}
</script>

Nuxt.js 插件化应用

Nuxt.js 3 支持使用插件化应用，可以将一个 Nuxt.js 应用拆分成多个插件，并独立开发和维护。

示例：

jsCopy code
// plugins/my-plugin.js
export default {
  // 注册插件
  async register(nuxt, options) {
    // 在 nuxt 实例中添加属性或方法
    nuxt.$myMethod = () => {
      console.log('Hello from myMethod')
    }
  },
  // 取消插件注册
  async unregister(nuxt) {
    // 从 nuxt 实例中删除属性或方法
    delete nuxt.$myMethod
  }
}

// nuxt.config.js 配置
export default {
  plugins: [
    '~/plugins/my-plugin.js'
  ]
}

// 在页面组件中使用
<template>
  <div>
    <button @click="$myMethod()">Click me</button>
  </div>
</template>

Nuxt.js 静态生成

Nuxt.js 3 支持静态生成，可以在构建时预先生成所有页面的静态 HTML 文件，提高页面的加载速度和 SEO。

示例：

jsCopy code
// nuxt.config.js 配置
export default {
  target: 'static',
  generate: {
    routes: ['/page/1', '/page/2', '/page/3']
  }
}

Nuxt.js 服务器端渲染

Nuxt.js 3 支持服务器端渲染，可以在服务器上预先生成 HTML 文件，提高页面的加载速度和 SEO。

示例：

jsCopy code
// nuxt.config.js 配置
export default {
  target: 'server'
}

Nuxt.js 与 Vuex

Nuxt.js 3 内置了 Vuex 状态管理库，可以在 Vuex 中存储和管理应用的状态。

示例：

jsCopy code
// store/index.js
export const state = () => ({
  counter: 0
})

export const mutations = {
  increment(state) {
    state.counter++
  }
}

// 在页面组件中使用
<template>
  <div>
    <h1>{{ counter }}</h1>
    <button @click="increment()">Click me</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['counter'])
  },
  methods: {
    ...mapMutations(['increment'])
  }
}
</script>

Nuxt.js 与 Axios

Nuxt.js 3 内置了 Axios HTTP 客户端库，可以在应用中发送 HTTP 请求。

示例：

jsCopy code
// 在页面组件中使用
<template>
  <div>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const response = await $axios.get('https://jsonplaceholder.typicode.com/posts')
    return {
      posts: response.data
    }
  }
}
</script>

Nuxt.js 与 GraphQL

Nuxt.js 3 支持使用 GraphQL 查询数据，可以通过插件和模块来集成 GraphQL。

示例：

jsCopy code
// nuxt.config.js 配置
export default {
  apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: 'https://api.graphqlplaceholder.com'
      }
    }
  }
}

// 在页面组件中使用
<template>
  <div>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  apollo: {
    posts: {
      query: `
        query {
          posts {
            id
            title
          }
        }
      `
    }
  },
  computed: {
    posts() {
      return this.$apollo.queries.posts.data.posts
    }
  }
}
</script>

Nuxt.js 与 i18n

Nuxt.js 3 支持多语言应用，可以通过插件和模块来集成 i18n。

示例：

jsCopy code
// plugins/i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

export default async (context) => {
  const messages = {
    en: {
      greeting: 'Hello',
      goodbye: 'Goodbye'
    },
    fr: {
      greeting: 'Bonjour',
      goodbye: 'Au revoir'
    }
  }

  const i18n = new VueI18n({
    locale: context.app.i18n.locale || 'en',
    fallbackLocale: 'en',
    messages
  })

  context.app.i18n = i18n
}

// nuxt.config.js 配置
export default {
  plugins: [
    { src: '~/plugins/i18n.js', mode: 'client' }
  ],
  modules: [
    'nuxt-i18n'
  ],
  i18n: {
    locales: [
      { code: 'en', name: 'English', iso: 'en-US', file: 'en.js' },
      { code: 'fr', name: 'Français', iso: 'fr-FR', file: 'fr.js' }
    ],
    defaultLocale: 'en',
    vueI18n: {
      fallbackLocale: 'en',
      messages: {
        en: require('./locales/en.js'),
        fr: require('./locales/fr.js')
      }
    }
  }
}

// 在页面组件中使用
<template>
  <div>
    <p>{{ $t('greeting') }}</p>
    <p>{{ $t('goodbye') }}</p>
  </div>
</template>

Nuxt.js 与 Jest

Nuxt.js 3 支持使用 Jest 进行单元测试，可以通过插件和模块来集成 Jest。

示例：

// nuxt.config.js
export default {
  test: {
    // 配置 Jest
    jest: {
      projects: [
        {
          displayName: 'unit',
          testEnvironment: 'jsdom',
          testMatch: ['**/tests/unit/**/*.test.js'],
          moduleNameMapper: {
            '^@/(.*)$': '<rootDir>/src/$1',
          },
        },
        {
          displayName: 'e2e',
          testEnvironment: 'node',
          testMatch: ['**/tests/e2e/**/*.test.js'],
          moduleNameMapper: {
            '^@/(.*)$': '<rootDir>/src/$1',
          },
          setupFilesAfterEnv: ['<rootDir>/tests/e2e/setup.js'],
        },
      ],
    },
  },
}

// 在 package.json 中配置运行 Jest 的命令
{
  // ...
  "scripts": {
    "test": "nuxt test",
    "test:unit": "nuxt test --watch --testPathPattern=tests/unit",
    "test:e2e": "nuxt test --watch --testPathPattern=tests/e2e"
  },
  // ...
}

Nuxt.js 与 Cypress

Nuxt.js 3 支持使用 Cypress 进行端到端测试，可以通过插件和模块来集成 Cypress。

示例：

jsCopy code
// cypress.json 配置
{
  "baseUrl": "http://localhost:3000",
  "integrationFolder": "tests/e2e"
}

// 在 Nuxt.js 3 项目根目录下执行以下命令，安装 Cypress 相关依赖
npm install --save-dev cypress start-server-and-test

// 在 package.json 中添加以下命令
{
  "scripts": {
    "test:e2e": "start-server-and-test start http://localhost:3000 cy:run"
  }
}

// 创建 tests/e2e/specs/example.spec.js 文件，编写测试用例
describe('Example test', () => {
  it('Visits the app root url', () => {
    cy.visit('/')
    cy.contains('h1', 'Welcome to Nuxt.js!')
  })
})

// 执行端到端测试命令
npm run test:e2e

Nuxt.js 与 Storybook

Nuxt.js 3 支持使用 Storybook 进行组件开发和文档编写，可以通过插件和模块来集成 Storybook。

示例：

jsCopy code
// .storybook/main.js 配置
module.exports = {
  stories: ['../components/**/*.stories.@(js|mdx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials']
}

// 在 Nuxt.js 3 项目根目录下执行以下命令，安装 Storybook 相关依赖
npm install --save-dev @nuxtjs/storybook

// 在 package.json 中添加以下命令
{
  "scripts": {
    "storybook": "nuxt storybook"
  }
}

// 在 components/button/Button.stories.js 文件中编写 Storybook 组件
import Button from './Button.vue'

export default {
  title: 'Button',
  component: Button
}

const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Button },
  template: '<Button v-bind="$props" />'
})

export const Primary = Template.bind({})
Primary.args = {
  primary: true,
  label: 'Button'
}

// 执行 Storybook 命令
npm run storybook

Nuxt.js 与 Auth

Nuxt.js 3 支持通过插件和模块集成 Auth，可以实现用户身份认证和权限控制等功能。

示例：

jsCopy code
// plugins/auth.js
export default ({ app }) => {
  app.router.beforeEach((to, from, next) => {
    const isAuthenticated = app.$auth.isAuthenticated()
    if (to.meta.auth && !isAuthenticated) {
      return next('/login')
    }
    if (to.meta.guest && isAuthenticated) {
      return next('/')
    }
    next()
  })
}

// nuxt.config.js
export default {
  modules: [
    '@nuxtjs/auth-next',
  ],
  auth: {
    strategies: {
      local: {
        token: {
          property: 'token',
          required: true,
          type: 'Bearer',
        },
        user: {
          property: 'user',
          autoFetch: true,
        },
        endpoints: {
          login: { url: '/api/auth/login', method: 'post' },
          user: { url: '/api/auth/user', method: 'get' },
          logout: false,
        },
      },
    },
  },
}

// 在需要进行身份认证和权限控制的页面或组件中使用 meta 标签进行配置
export default {
  meta: {
    auth: true, // 需要认证
  },
  // ...
}

lubingzy

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
nuxtjs3常用功能和示例

Nuxt.js 3 支持静态生成，可以在构建时预先生成所有页面的静态 HTML 文件，提高页面的加载速度和 SEO。Nuxt.js 3 的路由可以自动生成，也可以手动配置。Nuxt.js 3 支持配置环境变量，可以在不同的环境中使用不同的配置，例如开发环境、生产环境和测试环境等。Nuxt.js 3 支持使用插件化应用，可以将一个 Nuxt.js 应用拆分成多个插件，并独立开发和维护。Nuxt.js 3 支持使用模块来扩展功能，可以在 nuxt.config.js 文件中配置使用的模块。
复制链接

扫一扫