一. npx nuxi init nuxt3-club
创建项目的时候会报错：
ERROR Failed to download template from registry: request to https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json failed, reason: getaddrinfo ENOENT raw.githubusercontent.com
git clone -b v3 https://github.com/nuxt/starter.git nuxt3-app
从以上链接下载项目代码到本地
二. npm i ; 安装依赖
三.安装 element-plus/nuxt
npm i @element-plus/nuxt -D
Copy to clipboard
Usage
export default defineNuxtConfig({
modules: [
'@element-plus/nuxt'
],
elementPlus: { /\*_ Options _/ }
四. 安装 sass
pnpm add sass sass-loader -D
五.安装 tailwind【官方 组件安装 https://nuxt.com/modules?category=Extensions】
1.
# Using yarn
yarn add --dev @nuxtjs/tailwindcss
# Using npm
npm install --save-dev @nuxtjs/tailwindcss 2. nuxt.config.js
modules: [
'@nuxtjs/tailwindcss'
]
六 nxut.config.ts 添加 头部属性 以及页面 布局之间跳转的渐变效果
app: {
head: {
title: "youmeitClub",
htmlAttrs: {
lang: "en",
},
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ hid: "description", name: "description", content: "" },
{ name: "format-detection", content: "telephone=no" },
{ name: "google", content: "notranslate" }, //关闭浏览器 google 的自带翻译
],
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
script: [
{ src: "js/flexible.js", type: "text/javascript" }, //rem 配置
{
src: "js/jquery-3.5.1.min.js",
type: "text/javascript",
}, //引入 jquery
],
},
pageTransition: { name: "page", mode: "out-in" },
layoutTransition: { name: "layout", mode: "out-in" },
},
页面 布局的渐变样式 并在 nuxt.config.ts 的 css 中引入 css: ["@/assets/css/index.scss"],
.page-enter-active,
.page-leave-active {
transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
opacity: 0;
filter: blur(1rem);
}
7 nuxt.config.ts 设置代理 runtimeConfig 的公共路径
runtimeConfig: {
public: {
apiBase: "your base url address",
},
},
nitro: {
devProxy: {
"/proxy": {
target: "your base url address",
changeOrigin: true,
prependPath: true,
},
},
},
以下是引用
const runtimeConfig = useRuntimeConfig();
const baseUrl = runtimeConfig.public.apiBase;
/_一大坑_/
usefetch 传参的时候不能直接传入响应式数据； 到时键入会一直响应请求
1. JSON.stringify(params) //传字符串
2.Objec.assign({},toRaw(params))//传对象