Nuxt 3 搭建

大聪明了

已于 2025-04-18 22:37:44 修改

阅读量587

点赞数 1

分类专栏： # Vue3 文章标签：前端

于 2024-12-23 15:57:46 首次发布

本文链接：https://blog.youkuaiyun.com/LQS000/article/details/144666034

版权

Vue3 专栏收录该内容

3 篇文章

订阅专栏

官网：https://nuxt.zhcndoc.com/docs/getting-started/installation

一、安装 npx nuxi@latest init <project-name>
在这里插入图片描述

window 解决下载问题：修改host文件

C:\Windows\System32\drivers\etc

185.199.108.133 raw.githubusercontent.com

在这里插入图片描述
二、开启 SSR ，让SEO抓取数据

三、创建页面路由
在这里插入图片描述

四、使用 bootstrap 5.3.2

npm install bootstrap@5.3.2

css: [“bootstrap/dist/css/bootstrap.min.css”]
在这里插入图片描述
新建文件
assets 存放静态文件
plugins/bootstrap.client.js 轮播类组件的 javascript 才能生效

import * as bootstrap from 'bootstrap'

export default defineNuxtPlugin(() => {
  return {
    provide: {
      bootstrap: bootstrap
    }
  }
})

五、创建公共组件
在这里插入图片描述
页面直接使用组件

六、创建公共CSS

七、使用字体图标 iconfont

八、主题色

九、使用 TypeScript
https://nuxt.zhcndoc.com/docs/guide/concepts/typescript

npm install --save-dev vue-tsc typescript

再运行

npx nuxi typecheck

在这里插入图片描述

typescript: {
	typeCheck: true,
	strict: true
},

再重新运行项目

npm run dev

方式一：页面直接写 types 规范
使用示例：forEach 循环：
注意：
1：先设置数据类型
2、reactive([]) 必须填默认数据，否则 v-for 和 forEach 都会报错
在这里插入图片描述

方式二：推荐
新建 types 文件

使用

十、局域网访问

devServer: {
	host: '192.168.0.118',
	port: 3000
}

关闭防火墙
在这里插入图片描述
十一、封装 useFetch 请求
参考： https://yezipi.net/article/detail/10095
1、创建 http.ts

import { hash } from 'ohash'

// 后端返回的数据类型
export interface ResOptions<T> {
	data : T
	code ?: number
	message ?: string
	status : number
}

/**
 * api请求封装
 * @param { String } url 请求地址
 * @param { Object } options useFtech第二个参数
 * @param { Object } headers 自定义header头, 单独设置headers区分请求参数，也好设置类型
 */
const fetch = async (url : string, options ?: any, headers ?: any) => {

	try {
		// 3.0正式版环境变量要从useRuntimeConfig里的public拿
		const { public: { baseUrl } } = useRuntimeConfig()
		console.log('baseUrl', baseUrl)
		const reqUrl = baseUrl + url // 你的接口地址
		// 设置key
		const key = hash(JSON.stringify(options) + url)

		// 可以设置默认headers例如，token的获取最好用useState返回一个useCookie
		// const customHeaders = { token: useToken().value, ...headers }
		const customHeaders = { token: 'abcsdhjasdhsjahtoken', ...headers }
		const { data, error } = await useFetch(reqUrl, { ...options, key, headers: customHeaders })
		const result = data.value as ResOptions<any>
		if (error.value || !result || (result && result.status !== 200)) {
			// 处理token失效的情况
			if (result.status === 401) {
				// token.value = ''
				await navigateTo('/login')
			}
		}
		return result // 这里直接返回data或者其他的
	} catch (err) {
		console.log(err)
		return Promise.reject(err)
	}

}

export default class Http {

	get(url : string, params ?: any, headers ?: any) {
		return fetch(url, { method: 'get', params }, headers)
	}

	post(url : string, body ?: any, headers ?: any) {
		return fetch(url, { method: 'post', body }, headers)
	}

	put(url : string, body ?: any, headers ?: any) {
		return fetch(url, { method: 'put', body }, headers)
	}

	delete(url : string, body ?: any, headers ?: any) {
		return fetch(url, { method: 'delete', body }, headers)
	}
}

2、创建 api
在这里插入图片描述

export default new class article extends Http {
	//接口一
	public getDetail(id : number) {
		return this.get('/tpl-list.html?isajax=' + id)
	}
	//接口二
	//body方式 - 自定义传参类型
	public getHot() : Promise<{ items : Array<{ id : number, name : string }> }> {
		return this.get('/app/v1/article/hotView')
	}
	
	//body方式 -（推荐）
	public getTplList(params:any) {
		return this.get('/get-tpl-list.html', params)
	}
	//页面调用
	// let params = {
	// 	page: 1,
	// 	industry: 20
	// }
	// await productApi.getTplList(params);
}

在这里插入图片描述

import articleApi from '@/api/article'

export default {
	articleApi,
}

3、创建 composables
在这里插入图片描述

import api from '@/api/index'
export const useApi = () => api

4、配置请求域名
在这里插入图片描述
20250105 补充：使用 process.env.NODE_ENV 也能读取

runtimeConfig: {
	public: {
		baseUrl: process.env.NODE_ENV
	}
},

5、页面使用接口
在这里插入图片描述

6、创建 .env文件
在这里插入图片描述
7、修改运行

npx nuxi dev --dotenv .env.local

在这里插入图片描述
8、配置代理，解决跨域

十二、hooks
和 vue3 一样

十三、使用pinia

npx nuxi@latest module add pinia

在这里插入图片描述

export const product = defineStore("product", {
    state: () => {
        return {
            list: "Dragon Wu",
        }
    }
})

在这里插入图片描述

import {product} from "./product/index"
 
//模块
const stores = {
    product
}
 
export default stores

在这里插入图片描述

import stores from "./stores/index"
 
export const useStore = stores

页面使用
在这里插入图片描述

import { storeToRefs } from "pinia";
const product = useStore.product()

//可动态渲染的解构如下：
const { list } = storeToRefs(product)

十四、设置SEO

注意：动态赋值，建议当前界面使用接口请求。

<script lang="ts" setup>
	const { productApi } = useApi();
	const homeData = await productApi.homeList(1);
	const { seo_data } = toRaw(homeData);

	useSeoMeta({
		title: seo_data.seo_title,
		description: seo_data.seo_description,
		keywords: seo_data.seo_keywords
	})
</script>

在这里插入图片描述

useSeoMeta({
	title:'我是seo标题',
	description:'我是seo描述',
	keywords:'我是 keywords 关键字'
})

十五、打包（两种方式）
注意：项目路径，不要有中文。
在这里插入图片描述

十六、部署上线 - 宝塔面板
（1）以下是阿里云服务器，安装 debian12系统，宝塔面板也是 debian 版本（为了支持 node 20以上的版本）
补充：CentOS 8 也可以，操作一样
在这里插入图片描述

（2）宝塔面板必须使用在线安装方式，才跟以下图文介绍一致

安装 Node管理器：node 版本:20以上。
安装 PM2 管理器
方式1：服务端渲染：SSR (推荐)

npm run build

重要提醒： 如果需要添加微信公众号的业务域名，要先把txt校验文件放在此处，再运行打包指令，否则无效！
在这里插入图片描述

（1）将以下文件上传到服务器
在这里插入图片描述
（2）创建 Node 项目

（3）设置域名，默认端口号 3000，没有域名就用公网 ip 代替

如果要修改运行的端口号：比如想要 80端口，就另将下面 location 端口改为其他（只要不占用80就行）

重点注意：如果要分别部署多个项目，那么域名端口 和 服务运行端口也要改
服务端口号在这 2 个地方都要改！
在这里插入图片描述