nuxt3简单实战

881 阅读4分钟

写在前面:个人认为目前nuxt3还是不适合做为公司生产,毕竟文档什么的都不齐全,问题全靠issue

一、官网地址

v3.nuxtjs.org/guide/conce…

二、安装

node版本最好在16以上

npx nuxi init nuxt-app
code nuxt-app
yarn install 

三、功能点

1.开个头,页面搞到pages文件夹下

// app.vue改为
<template>
  <div>
    <NuxtPage></NuxtPage>
  </div>
</template>

新建pages文件夹。
新建index.vue作为主页

2.组件自动引入

根目录下建立component 目录,里面写的组件会自动引入到全局

components
│  ├─ DownloadCheck
│  │  └─ index.vue
│  ├─ Modules
│  │  ├─ Banner
│  │  │  └─ index.vue

如上面这个目录分别可以使用的组件直接在页面使用的是

<DownloadCheck />
<ModulesBanner />

3.hook自动引入

根目录下创建composables 里面写的东西可以直接在页面中使用如(hook玩法,看vue3)

 composables
│  ├─ useClickOutSide.ts

// 无需引入直接使用
<script lang="ts" setup>
useClickOutSide(loginRef, () => {
  useLoginDialog(false)
})
</script>

4.plugins和middleware自动引入

nuxt中之前plugins和middleware写入后需要到nuxt.config.js中使用。现在自动使用了。

可以参考nuxt2写法,具体如下

plugins
│  ├─ antd.ts

import Antd  from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css';

// 全局引入
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Antd)
})


middleware
│  └─ type-check.ts
// 做一些路由判断
export default defineNuxtRouteMiddleware((to, form) => {
  const resourceTypeList = ['recent', 'application']
  const { params } = to
  if (!resourceTypeList.includes(params.resourceType as string)) {
    return navigateTo('/404');
  }
});

5.layouts用法

举例layouts目录如下

layouts

│ └─ default.vue

│ └─ empty.vue

// 不写,命中default
export default {

}
// 写的话写具体, 命中empty
export default {
 layout: 'empty'
}

6.nuxt3写法,把layouts当作外层组件了

 // 不写,命中default
 <NuxtLayout>
     <div></div>
 </NuxtLayout>
// 写的话写具体, 命中empty
 <NuxtLayout name="empty">
       <div></div>
 </NuxtLayout>

7.i18n引入

github.com/nuxt-commun…

(有个警告暂未解决)

"@nuxtjs/i18n": "^8.0.0-alpha.1"

nuxt.config.ts
i18n: {    baseUrl: 'xxx.com', // 你的网址    strategy: 'prefix_except_default', // url语言    locales: [    {      code: 'cn',      iso: 'zh-CN'    },    {      code: 'en',      iso: 'en-US'    }], // used in URL path prefix    defaultLocale: 'cn',   // default locale of your project for Nuxt pages and routings    detectBrowserLanguage: { // cookies记录,这样下次用户进来可以知道之前的语言      useCookie: true,      fallbackLocale: 'cn',      alwaysRedirect: true    },    vueI18n: {      legacy: false,      locale: 'cn',      globalInjection: true, // 这个应该挺关键的,让全局可以有i18n      messages: message    }  },// ts文件中使用i18n,无需引入
   const { $i18n } = useNuxtApp()    
// vue文件中使用i18n,无需引入
   const { t } = useI18n()  // 切换语言
export default function useSwitchLocale(value) {  const { $i18n, $switchLocalePath } = useNuxtApp()  $i18n.setLocale(value)  $i18n.setLocaleCookie(value) // 修改cookie  window.location.href = $switchLocalePath(value) // 不想刷新页面就不用window.location.href}
// 其他操作:两个文档配合着看
https://v8.i18n.nuxtjs.org/guide/lang-switcher
https://i18n.nuxtjs.org/

据悉^8.0.0-alpha.2已经不会有警告了

8.ui库选择

使用了antdv,自动引入

  // 安装
  "unplugin-vue-components": "^0.22.7"nuxt.config.ts
import Components from 'unplugin-vue-components/vite';import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
export default defineNuxtConfig({css: [    'ant-design-vue/es/message/style/css', // antv非组件模块需手动引入    'ant-design-vue/es/form/style/css' // antv非组件模块需手动引入  ],vite: {    ssr: {      noExternal: ['moment', 'compute-scroll-into-view', 'ant-design-vue','dayjs'],    },    plugins: [      Components({        resolvers: [AntDesignVueResolver()]      })    ],    optimizeDeps: {      include: ['@babel/runtime/regenerator'],    }},build: {    transpile: [      "lodash-es",      "@babel/runtime"    ]  },)}

关于上面的css。自动引入的话 message,notice那些会没有样式 ,需要手动引入这几个样式。

9.sass, eslint, prettier引入

这些都是装了就能用,无需写啥。具体怎么装就直接百度就行了,跟nuxt本身无关(当然eslint和prettier对应的文件还是一样要的)

10.全局css和全局sass

对应目录自己看看吧,我是的css文件夹下

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  css: ['~/css/theme.css', '~/css/fonts/iconfont.css'],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "@/css/main.scss";'
        }
      }
    }
  }
})

11.全局的head,meta,script那些,nuxt2也有的

其中favico.icon文件是在

public文件夹下nuxt2是static

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  app: {
    head: {
      titleTemplate: '网站标题',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: '描述' },
        { hid: 'keywords', name: 'keywords', content: '关键词'}
      ],
      link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.png' }],
      script: [
        { src: 'https://' }
      ],
    }
  }
})

12.static改为public

静态文件夹改名了,静态文件全部放在这下面

13.页面服务端渲染

直接用useAsyncData .这个可以直接看看文档。然后官方推荐你用$fetch去请求,你可以用,也可以用熟悉的axios。axios需要自己下载

v3.nuxtjs.org/api/composa…

14.proxy代理

如下:

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  vite: {
    server: {
      proxy: {
        '/api/': {
          target: 'https://www.baidu.cn',
          changeOrigin: true
        }
      }
    }
  }
})

15.动态路由

├─ pages
│  ├─ 404.vue
│  ├─ [resourceType]
│  │  └─ [id].vue
│  └─ search
│     ├─ index.vue
│     └─ page
│        └─ [page].vue

像这里就有以下下页面
/404
/动态resourceType/动态id
/search
/search/page/动态编号

这里可以看出我没有在同一级写两个动态,因为他们会有所冲突,我还不知道这怎么处理优先级,不像vue- router你可以通过顺序调整。。。不过,当你确实需要的时候。

你可以通过middleware 写插件去调整。如上面第3点

16.vue3相关写法

像很多vue3的东西如ref(),onMounted 等等自带的勾子都可以直接使用,无需引入

17.获取路由参数

获取路由啥的useRoute(),useRouter也是直接使用

18.状态管理器store

你可以无需引入vuex 或者 pinia

直接使用nuxt的useState()

useState<T>(init?: () => T | Ref<T>): Ref<T>
useState<T>(key: string, init?: () => T | Ref<T>): Ref<T>

// 可以定义在store文件夹下
export const useUserStore = () => useState<IUserState>('userInfo', () => {
  return {
  token: '',
  user: undefined,
}})

// 外部使用
import { useUserStore } from '@/store/user'
const userInfo = useUserStore()

// 修改也是直接修改(ref,所以需要value)
userInfo.value.token = 'xxx'

效果在那,想怎么安排他,大伙自便。咱也还在摸索

19.判断是否服务端

和nuxt2一样还是可以process.client

20.上线端口修改

比如改为3173, 可以把在package.json把preview改为下面的:

PORT=3173 node .output/server/index.mjs

四、遇到问题处理

1.查看nuxt3文档

2.查看nuxt2文档

3.去nuxt3看看issue吧

4.google