nuxt3 +element-plus +tailwind 笔记

一. 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,

},

},

},

安装 lodash

npm i nuxt-lodash -D

nuxt.config.ts 配置

export default defineNuxtConfig({

modules: ["nuxt-lodash"],

});

以下是引用

const runtimeConfig = useRuntimeConfig();

const baseUrl = runtimeConfig.public.apiBase;

/_一大坑_/

usefetch 传参的时候不能直接传入响应式数据； 到时键入会一直响应请求

1. JSON.stringify(params) //传字符串

   2.Objec.assign({},toRaw(params))//传对象