Nuxt3稳定版+naive-ui项目开发

nuxt3在2022-11-16发布了稳定版本，网上很多资料的nuxt版本和其他插件或者ui框架的使用都不匹配，踩坑中，欢迎指正，不胜感激，让我们开始把。

nuxt3安装

按照官网，已安装node,vscode情况下
1.终端里cd进你想要的文件夹，执行npx nuxi init ；（输入项目名称）
2. 再执行code ,就会在vscode里打开项目
3. 执行npm install安装依赖；
4. npm run dev就启动好项目了；

创建目录结构

1.pages放vue文件，列如index.vue,aboutUs.vue等等 app.vue改为NuxtPage，就能看到你index里的内容了

<template><div><NuxtPage /></div>
</template>

2.assets
3.components公共组件
4.composables做数据的共享和一些公共的方法，在vue文件里不用引入，nuxt会自动引入；我这里做了api的管理，在该文件夹下新建index.ts文件，如下

import Http from '@/utils/request'// 首页
export const getIndexInfo = (params: any) => {return Http.get('/xxx/xxx', params) //接口路径
}

在页面使用

<template><div><h1>Welcome to the homepage</h1></div>
</template><script lang="ts" setup>
const info = await getIndexInfo ({})
console.log('info', info)
</script>

5.layouts 布局，增加default.vue，app.vue里用NuxtLayout ,就会给整个网站加上同样的布局了

// default.vue
<template><div><Header/><div class="main"><slot /></div><Footer/></div></template>//app.vue
<template><div class="text-base"><NuxtLayout><NuxtPage /></NuxtLayout></div>
</template><script lang="ts" setup>
</script>

某个页面不需要公共布局，或者想要指定其他布局方式，在页面通过definePageMeta设置

<script setup lang="ts">
// This will work in both `<script setup>` and `<script>`
definePageMeta({layout: false
})
// 或者
definePageMeta({layout: "custom",
});
</script>

6.middleware中间件，可以做页面的登录校验。在下面新建auth.ts.通过cookie里的信息判断用户是否登录，没有登录则把to的fullpath保存下来，并且跳到登录页面，登录完成后跳转到刚刚保存的fullPath

export default defineNuxtRouteMiddleware((to, from) => {console.log('to', to)const origin_path = useCookie('origin_path', {})const userInfo = useCookie('userInfo')
})

7.pugins插件，需要客户端渲染的插件命名为xxx.client.ts。跟纯vue项目使用插件有点类似，安装插件之后，在plugins建相关插件名的ts文件，import进去，vue是直接挂载到vue实例上，nuxt是通过nuxtApp.vueApp。以vue3-video-play为例：

import vue3videoPlay from "vue3-video-play"; // 引入组件
import "vue3-video-play/dist/style.css"; // 引入cssexport default defineNuxtPlugin((nuxtApp) => {nuxtApp.vueApp.use(vue3videoPlay)
})

8.public 我目前用来放了favicon.icon。在nuxt.config.ts文件下，通过app.head.link配置。
4.utils放了封装的数据请求,新建request.ts。。。。key值要有，不然接口只会返回请求的第一个接口的数据。在用户操作调接口的地方，可以传入时间戳作为key值，比如登录，发送验证码等

import { hash } from 'ohash'export interface ResOptions<T> {data?: Tsuccess?: booleanmessage?: string
}const fetch = (url: string, options?: any): Promise<any> => {const { public: { apiBase } } = useRuntimeConfig()const reqUrl = apiBase + url // 你的接口地址const key = options?.key ? options?.key : hash(JSON.stringify(options) + url)const cookie = useCookie('userInfo')return new Promise(async (resolve, reject) => {useFetch(reqUrl, {...options,lazy: true,headers: {Authorization: 'Bearer' + ' ' + cookie['_rawValue']['token']},key,}).then(({ data, error }) => {console.log('then', data)if (error.value) {reject(error.value)return}const value: any = data.valueif (value['success'] !== true) {//这里根据自己项目后端返回的数据做处理if (value.data?.status === 401) {cookie.value = ''navigateTo('/login')}// 这里处理错误回调// $message.error(value.message)// 或者页面接口请求处catchreject(value)} else {resolve(value['data'])}}).catch((err: any) => {reject(err)})})
}export default new class Http {get(url: string, params?: any): Promise<any> {return fetch(url, { method: 'get', params })}post(url: string, body?: any): Promise<any> {return fetch(url, { method: 'post', body })}put(url: string, body?: any): Promise<any> {return fetch(url, { method: 'put', body })}delete(url: string, body?: any): Promise<any> {return fetch(url, { method: 'delete', body })}
}

5.env环境变量

加了环境变量后，需要在package.json里加入命令行启动的对应的环境

"scripts": {"build": "nuxt build --mode production","dev": "nuxt dev --mode development","generate": "nuxt generate --mode production","preview": "nuxt preview --mode production","postinstall": "nuxt prepare --mode production"},

每个文件下都跟其他博主的差不多，就不一一赘述了. 环境加好了，还需要在nuxt.config.ts里配置

nuxt.config.ts配置

// https://nuxt.com/docs/api/configuration/nuxt-config
import { loadEnv } from 'vite'
interface VITE_ENV_CONFIG {VITE_APP_BASE_API: string,
}
const envScript = process.env.npm_lifecycle_script.split(' ')
const envName = envScript[envScript.length - 1] // 通过启动命令区分环境
const envData = loadEnv(envName, 'env') as unknown as VITE_ENV_CONFIG
console.log('当前环境：', envData)export default defineNuxtConfig({app: {head: {title: 'jjjjj',meta: [{ charset: 'utf-8' },{ name: 'keywords', content: "xxx" },{ name: 'description', content: "xxx" },],script: [{ src: 'http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js' }],}},runtimeConfig: {// The private keys which are only available server-side// apiSecret: '123',// Keys within public are also exposed client-sidepublic: {apiBase: envData.VITE_APP_BASE_API //把当前的环境变量设置到apiBase，这里和rc版本有点不一样}},build: {transpile:process.env.NODE_ENV === 'production'? ['naive-ui','vueuc','@css-render/vue3-ssr','@juggle/resize-observer']: ['@juggle/resize-observer']},vite: {envDir: '~/env', // 指定env文件夹optimizeDeps: {include:process.env.NODE_ENV === 'development'? ['naive-ui', 'vueuc', 'date-fns-tz/esm/formatInTimeZone']: []}}
})

naive-ui安装

看到这个ui框架觉得很是喜欢，有我想要的效果。安装按照官方的说明，安装，配置即可。在plugins下加入插件的时候有ts报错，最后修改如下（第一次接触ts，欢迎指正）

import { setup } from '@css-render/vue3-ssr'export default defineNuxtPlugin((nuxtApp) => {if (process.server) {const { collect } = setup(nuxtApp.vueApp)const originalRenderMeta = nuxtApp.ssrContext?.renderMetanuxtApp.ssrContext = nuxtApp.ssrContext // 这两行不一样，我没有把空对象赋值上去if (nuxtApp.ssrContext) { // 加了一个nuxtApp.ssrContext有值的判断nuxtApp.ssrContext.renderMeta = () => {if (!originalRenderMeta) {return {headTags: collect()}}const originalMeta = originalRenderMeta()if ('then' in originalMeta) {return originalMeta.then((resolvedOriginalMeta) => {return {...resolvedOriginalMeta,headTags: resolvedOriginalMeta['headTags'] + collect()}})} else {return {...originalMeta,headTags: originalMeta['headTags'] + collect()}}}}}
})

naive-ui的使用

像message组件，dialog等组件，要在app.vue用相应的provider组件包裹起来

<template><NMessageProvider><NDialogProvider><div><NuxtPage /></div></NDialogProvider></NMessageProvider>
</template><script lang="ts" setup>
import {NMessageProvider,NDialogProvider
} from 'naive-ui'
</script>

在pages下使用

<template><div><h1>Welcome to the homepage</h1><NButton @click="cb1">useMessage</NButton><NButton @click="cb2">useDialog</NButton><NNumberAnimation ref="numberAnimationInstRef" :from="0" :to="12039" /></div>
</template><script lang="ts" setup>
import {useMessage,useDialog
} from 'naive-ui'
const message = useMessage()
const dialog = useDialog()
const cb1 = () => {message.info('message')
}
const cb2 = () => {dialog.info({title: 'dialog',content: '消息消息',positiveText: '确定',onPositiveClick: () => {message.success('我就知道')}})
}
</script>

都看到这里了，点个赞把【笔芯】！一直在踩坑中，如有错误，感谢您指正，或者您可以给一些建议。
快要新的一年了，希望大家都身体健康，早日升职加薪！！！！