写在前面：个人认为目前nuxt3还是不适合做为公司生产，毕竟文档什么的都不齐全，问题全靠issue
一、官网地址
二、安装
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引入
（有个警告暂未解决）
"@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需要自己下载
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
