第三方数据未拉取取不了现 Nuxt3项目从零开始开发
APP宣发
文章浏览阅读3.5k次。Nuxt3自定义错误页面，只需要在项目根目录新建一个error.vue页面即可。页面里通过定义useError来获取返回的错误信息，展示到页面上。
之前讲过Nuxt3项目新建和配置：《Nuxt3从零开始配置与打包发布_nuxt打包发布_范特西_jay的博客-CSDN博客》 本篇文章主要讲解一些nuxt3的基本功能。
Nuxt3官网：
Nuxt3的官方库：
常用的库有： Plus、Vant、color-mode、axios，其他库可以根据需求查找使用。（注意安装时候要按照nuxt3方式安装和引用）
Nuxt3官方提供的案例：
一、先看一下第三方库的安装方法
1、Nuxt3安装 Plus nuxt3版本：
npm install -D @element-plus/nuxt配置：
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@element-plus/nuxt'],
})库的组件使用时候直接在页面写即可，无需导入，会自动导入。
2、color-mode安装（）：
color-mode用于实现网页的浅色模式和暗黑模式，支持自定义颜色模式和跟随系统模式。
npm install --save-dev @nuxtjs/color-mode配置：
export default defineNuxtConfig({
modules: ['@nuxtjs/color-mode'],
colorMode: {
preference: 'system', // 默认模式（system/light/dark/sepia）
fallback: 'light', // 失败后使用的颜色模式
hid: 'nuxt-color-mode-script',
globalName: '__NUXT_COLOR_MODE__',
componentName: 'ColorScheme',
classPrefix: '',//类名前缀
classSuffix: '-mode',//类名后缀
storageKey: 'nuxt-color-mode'//localStorage存储的key
}
})官方示例：
Color mode: {{ $colorMode.value }}
System
Light
Dark
Sepia
const colorMode = useColorMode()
console.log(colorMode.preference)
body {
background-color: #fff;
color: rgba(0,0,0,0.8);
}
.dark-mode body {
background-color: #091a28;
color: #ebf4f1;
}
.sepia-mode body {
background-color: #f1e7d0;
color: #433422;
}
这里推荐color-mode结合 Plus来实现浅色和暗黑模式切换，这样就不用自己写浅色和暗黑模式的css样式了(暗黑模式 | Plus)。
引入配置 Plus暗黑模式样式类：
//只需要如下在项目入口文件修改一行代码：
import 'element-plus/theme-chalk/dark/css-vars.css'实际上实现的是可以创建一个开关来控制暗黑模式的class 类名。
项目里，创建变量：
const colorMode = useColorMode()
console.log(colorMode.preference)
... ...
由于是SSR模式，所以当我们调试或者部署时候，会出现获取到的. 不准确问题，所以我这里又单独弄了个来时时存储哪种主题颜色模式。
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
const colorMode = useColorMode();
const darkMode = ref("");
const isDark = ref('light');
//读取当前主题颜色模式（仅供参考）
onMounted(() => {
isDark.value = localStorage.getItem('darkMode') == null ? 'light' :
localStorage.getItem('darkMode');
colorMode.preference = isDark.value;
if (isDark.value == 'light') {
darkMode.value = "浅 色";
} else if (isDark.value == 'dark') {
darkMode.value = "暗 黑";
} else if (isDark.value == 'system') {
darkMode.value = "系 统";
}
});
//点击切换主题模式（仅供参考）
function toggleDarkMode() {
if (isDark.value == 'light') {
darkMode.value = "暗 黑";
colorMode.preference = 'dark';
localStorage.setItem('darkMode', 'dark');
isDark.value = 'dark';
} else if (isDark.value == 'dark') {
darkMode.value = "系 统";
colorMode.preference = 'system';
isDark.value = 'system';
localStorage.setItem('darkMode', 'system');
} else if (isDark.value == 'system') {
darkMode.value = "浅 色";
colorMode.preference = 'light';
isDark.value = 'light';
localStorage.setItem('darkMode', 'light');
}
}
3、axios安装：
npm install axiosaxios在Nuxt3中安装方法和使用方法和在Vue3项目中是一样的。
function getData(url: string) {
const api = axios.create({
baseURL: "https://api.github.com/search/repositories?q=v&sort=stars",
timeout: 60000,
withCredentials: false,
method: "get",
headers: {
"Content-Type": "application/json",
},
});
api.get(url).then((res) => {
console.log(res);
});
}4、Nuxt3安装和引入使用库
安装：
npm i -D @vueuse/nuxt @vueuse/core配置：
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@vueuse/nuxt',
],
})二、设置全局默认的title、meta、、、等信息
在nuxt..ts中提供app.head属性。允许你为整个应用程序定制head。示例如下：
export default defineNuxtConfig({
app: {
head: {
charset: 'utf-16',
viewport: 'width=500, initial-scale=1',
title: 'My App',
meta: [
//
{ name: 'description', content: 'My amazing site.' }
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
}
}
})如果你想单独在某个页面设置title，可以使用。示例代码：
useHead({
title: 'My App',
meta: [
{ name: 'description', content: 'My amazing site.' }
],
bodyAttrs: {
class: 'test'
},
script: [ { children: 'console.log('Hello world')' } ]
})
可配置属性如下：
interface MetaObject {
title?: string
titleTemplate?: string | ((title?: string) => string)
base?: Base
link?: Link[]
meta?: Meta[]
style?: Style[]
script?: Script[]
noscript?: Noscript[];
htmlAttrs?: HtmlAttributes;
bodyAttrs?: BodyAttributes;
}你可以在link和 元标签上使用body: true 选项将它们附加到标签的末尾。
useHead({
script: [
{
src: 'https://third-party-script.com',
body: true
}
]
})
添加动态标题。被设置为一个带有 %s占位符的字符串或，这允许更大的灵活性来动态设置 Nuxt app的每个路由的页面标题：
useHead({
// as a string,
// where `%s` is replaced with the title
titleTemplate: '%s - Site Title',
// ... or as a function
titleTemplate: (productCategory) => {
return productCategory
? `${productCategory} - Site Title`
: 'Site Title'
}
})
添加外部CSS：
useHead({
link: [
{
rel: 'preconnect',
href: 'https://fonts.googleapis.com'
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap',
crossorigin: ''
}
]
})
三、使用Nuxt3自带的拉取数据
Nuxt提供了, , 和来处理应用程序中的数据获取，这里我们只介绍用法。（注意请求只能放在根目录或者生命周期回调里或者自己自定义个async异步方法）
基本示例：
async function getFetchListData() {
const { data, pending, error, refresh } = await useFetch("https://api.nuxtjs.dev/mountains", { method: 'get' })
console.log(data.value[0].title);
}
//如果提示data这里有错误，可以按照如下的改写
async function getFetchListData() {
const { data, pending, error, refresh }:any = await useFetch("https://api.nuxtjs.dev/mountains", { method: 'get' })
console.log(data.value[0].title);
}类型：
function useFetch(
url: string | Request | Ref | () => string | Request,
options?: UseFetchOptions
): Promise<AsyncData>
type UseFetchOptions = {
key?: string
method?: string
query?: SearchParams
params?: SearchParams
body?: RequestInit['body'] | Record
headers?: Record | [key: string, value: string][] | Headers
baseURL?: string
server?: boolean
lazy?: boolean
immediate?: boolean
default?: () => DataT
transform?: (input: DataT) => DataT
pick?: string[]
watch?: WatchSource[]
}
type AsyncData = {
data: Ref
pending: Ref
refresh: (opts?: { dedupe?: boolean }) => Promise
execute: () => Promise
error: Ref
}参数：
返回值：
默认情况下，Nuxt要等到完成后才能再次执行。
使用拦截器：
const { data, pending, error, refresh } = await useFetch('/api/auth/login', {
onRequest({ request, options }) {
// Set the request headers
options.headers = options.headers || {}
options.headers.authorization = '...'
},
onRequestError({ request, options, error }) {
// Handle the request errors
},
onResponse({ request, response, options }) {
// Process the response data
return response._data
},
onResponseError({ request, response, options }) {
// Handle the response errors
}
})四、主动路由跳转
Nuxt3自带和route，直接定义使用即可。
const router = useRouter();示例如下：
import isMobile from './utils/isMobile';
const router = useRouter();
onMounted(() => {
if (isMobile.Any()) {
router.push("/wap/");
} else {
router.push("/");
}
});
五、Nuxt3自定义错误页面
Nuxt3自定义错误页面，只需要在项目根目录新建一个error.vue页面即可。
页面里通过定义来获取返回的错误信息，展示到页面上。
const error = useError()示例代码：
{{error.statusCode}}-自定义错误页面
const error = useError();
onMounted(() => {
console.log(error.value.statusCode);
});
六、增加路由后缀，如.html
可以直接在pages里的页面命名时加入后缀即可，例如abc.html.vue。访问时候就可以通过后缀访问了：abc.html
七、和资源的访问路径
资源访问直接写下的资源路径即可（如果项目有，路径可以加上）。示例如下：
//public目录资源文件引入使用
const config = useRuntimeConfig();
const baseURL = config.app.baseURL;
@import "/resource/css/resource.css";
目录资源引入，路径前加入~//即可。
//assets目录资源引入
@import '~/assets/css/resource.scss';
八、客户端渲染设置
客户端渲染设置，使用……标签包裹即可。
数据
//或者
数据
九、打包部署，并自定义运行的端口号
推荐使用pm2进行运行，并自定义端口号。
pm2常用命令：
pm2 start app.js # 启动app.js应用程序
pm2 start app.js -i 4 # cluster mode 模式启动4个app.js的应用实例
# 4个应用程序会自动进行负载均衡
pm2 start app.js --name="api" # 启动应用程序并命名为 "api"
pm2 start app.js --watch # 当文件变化时自动重启应用
pm2 start script.sh # 启动 bash 脚本
pm2 list # 列表 PM2 启动的所有的应用程序
pm2 monit # 显示每个应用程序的CPU和内存占用情况
pm2 show [app-name] # 显示应用程序的所有信息
pm2 logs # 显示所有应用程序的日志
pm2 logs [app-name] # 显示指定应用程序的日志
pm2 flush # 清空所有日志文件
pm2 stop all # 停止所有的应用程序
pm2 stop 0 # 停止 id为 0的指定应用程序
pm2 restart all # 重启所有应用
pm2 reload all # 重启 cluster mode下的所有应用
pm2 gracefulReload all # Graceful reload all apps in cluster mode
pm2 delete all # 关闭并删除所有应用
pm2 delete 0 # 删除指定应用 id 0
pm2 scale api 10 # 把名字叫api的应用扩展到10个实例
pm2 reset [app-name] # 重置重启数量
pm2 startup # 创建开机自启动命令
pm2 save # 保存当前应用列表
pm2 resurrect # 重新加载保存的应用列表
pm2 update # Save processes, kill PM2 and restore processes
pm2 generate # Generate a sample json configuration file
