NUXT3+tailwindcss+pinia项目搭建

创建

通过nuxt脚手架创建基础项目

npx nuxi init nuxt3-template-by-leehan

通过vscode打开项目

code nuxt3-template-by-leehan

依赖包及启动

npm install

npm run dev

启动成功后打开：http://localhost:3000/
显示nuxt定义的welcome页面
项目创建成功

安装tailwindcss

安装方法

npm install --save-dev @nuxtjs/tailwindcss

使用依赖

在nuxt.config.js中添加代码

modules: [
    '@nuxtjs/tailwindcss'
]

初始化tailwindcss.config.js文件

npx tailwindcss init

安装tailwindcss提示插件（vscode）

Tailwind CSS IntelliSense

测试

修改app.vue文件代码

<template>
  <div class=" w-full h-screen bg-red-500">
    HOMEPAGE
  </div>
</template>

页面全屏显示红色 说明样式文件配置成功

配置布局

目录结构

1.  根目录创建文件夹-layouts
   

2.  layouts文件夹下创建default.vue
   

3.  创建布局结构
   

<template>
    <div class=" layout default">
        <header class=" py-6 px-4 bg-blue-200 text-white font-bold">NUXT3 TEMPLATE</header>
        <div class="content flex">
            <div class="slidebar w-1/4 h-screen bg-green-200">
                SLIDRBAR
            </div>
            <main class="content w-3/4 h-screen bg-slate-100">
                <slot></slot>
            </main>
        </div>
    </div>
</template>

4.  修改app.vue文件
   

<template>
  <div class=" w-full h-screen bg-red-500">
    <NuxtLayout name="default">
      HOMEPAGE
    </NuxtLayout> 
  </div>
</template>

重启项目

重启项目检查布局是否应用成功

路由

目录结构

1. 根目录创建文件夹-pages
2. 修改app.vue

<template>
  <div class=" w-full h-screen bg-red-500">
    <NuxtLayout name="default">
      <RouterView />
    </NuxtLayout> 
  </div>
</template>

3. 创建index.vue - 首页

<template>
    <div>
        HOMOPAGE
    </div>
</template>

4. 创建user文件夹和index.vue - 用户中心

<template>
    <div>
        USERINFO
    </div>
</template>

5. 创建article文件夹、
   index.vue - 文章列表

```
<template>
    <div>
        ARTICLE LIST

        <ul>
            <li>
                <NuxtLink to="article/123">文章123</NuxtLink>
            </li>
            <li>
                <NuxtLink to="article/111">文章111</NuxtLink>
            </li>
        </ul>
    </div>
</template>
```
[id].vue - 文章详情（动态路由）
```
    <template>
        <div>
            ARTICLE DETAIL - {{ $route.params.id }}
        </div>
    </template>
```

使用pinia

安装

==注：在安装pinia的时候报了冲突 所以我选择加了--legacy-peer-deps 不报错的情况下可以不加==

npm install pinia @pinia/nuxt @nuxtjs/composition-api --legacy-peer-deps

环境配置

1. 创建env文件夹
   

2. env文件夹中创建环境文件
   

.env.dev 开发环境变量

VITE_API_ENV="dev"
VITE_BASE_URL='http://10.86.11.99:8099/'

.env.test

VITE_API_ENV="test"
VITE_BASE_URL='http://www.test******.com/'

.env.prod

VITE_API_ENV="dev"
VITE_BASE_URL='http://www.prod*****.com/'

3.  修改package.json文件
   

"scripts": {
    "build:test": "nuxt build --mode test",
    "build:prod": "nuxt build --mode prod",
    "dev": "nuxt dev --mode dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },

4、 修改nuxt.config.ts文件

// https://nuxt.com/docs/api/configuration/nuxt-config
import { loadEnv } from 'vite';
const envScript = process.env.npm_lifecycle_script?.split(" ") as Array<any>

interface VITE_ENV_CONFIG{
    VITE_API_ENV:string,
    VITE_BASE_URL:string

}
const envName = envScript[envScript?.length - 1] // 通过启动命令区分环境
const evnData = loadEnv(envName,"env") as unknown as VITE_ENV_CONFIG

export default defineNuxtConfig({
    modules: [
        '@nuxtjs/tailwindcss',
        '@pinia/nuxt'
    ],
    css: [
        'animate.css/animate.css',
    ],
    runtimeConfig:{
        public:evnData
    }
})

封装请求

utils文件夹下创建http.ts文件

@/utils/http.ts

import { hash } from 'ohash'
 
// 后端返回的数据类型
export interface ResOptions<T> {
  data?: T
  code?: number
  msg?: string
}
 
/**
 * api请求封装
 * @param { String } url 请求地址
 * @param { Object } options useFtech第二个参数
 * @param { Object } headers 自定义header头, 单独设置headers区分请求参数，也好设置类型
 */
const fetch = (url: string, options?: any, headers?: any): Promise<any> => {
 
  const { public: { VITE_BASE_URL } } = useRuntimeConfig() // 3.0正式版环境变量要从useRuntimeConfig里的public拿
 
  const reqUrl = VITE_BASE_URL + url // 你的接口地址
  // console.log(NUXT_PUBLIC_API_MOCK)
  // 不设置key，始终拿到的都是第一个请求的值，参数一样则不会进行第二次请求
  const key = hash(JSON.stringify(options) + url)
 
  // 可以设置默认headers例如
  const customHeaders = { token: useCookie('token').value, ...headers }
 
  return new Promise((resolve, reject) => {
    useFetch(reqUrl, { ...options, key, headers: customHeaders }).then(({ data, error }) => {
      if (error.value) {
        reject(error.value)
        return
      }
      const value = data.value
      // console.log('useFetchResData: ', value)
      if (!value) {
        // 这里处理错你自定义的错误，例如code !== 1
        throw createError({
          statusCode: 500,
          statusMessage: reqUrl,
          message: '自己后端接口的报错信息',
        })
      } else {
        resolve(value)
      }
    }).catch((err: any) => {
      console.log(err)
      reject(err)
    })
  })
}
 
export default new class Http {
 
  get(url: string, params?: any, headers?: any): Promise<any> {
    return fetch(url, { method: 'get', params }, headers)
  }
 
  post (url: string, params?: any, headers?: any): Promise<any> {
    return fetch(url, { method: 'post', params }, headers)
  }
 
  put (url: string, params?: any, headers?: any): Promise<any> {
    return fetch(url, { method: 'put', params }, headers)
  }
 
  delete (url: string, params?: any, headers?: any): Promise<any> {
    return fetch(url, { method: 'delete', params }, headers)
  }
}

composables文件夹中创建api.ts文件

@/composables/api.ts

import Http from "@/utils/http";
export const nav = (params?:any)=>{
    return Http.post('后端api路径',params)
}

在页面使用

服务端

const navData = await nav()
const {data} = navData

客户端

const navValue = ref([]) as any
const getNav = async ()=>{
    const res = await nav()
    navValue.value = res.data
}
onMounted(()=>{
    getNav()
})

PM2部署

全局安装

    npm i -g pm2

初始化ecosystem.config.js文件

pm2 init

打包

测试环境

npm run build:test

生产环境

npm run build:prod

文件迁移

复制.output和ecosystem.config.js到服务器主页

pm2启动项目

测试环境

pm2 start ecosystem.config.js --env test

生产环境

pm2 start ecosystem.config.js --env prod

依赖文档

1. • NUXT3官网
2. • tailwindcss
3. • pinia

特别鸣谢

1. • Nuxt3请求封装数据封装
2. • Nuxt3请求封装数据获取详解
3. • nuxt3多环境开发配置
4. • 前端框架 Nuxt3 集成 Pinia