創(chuàng)建
通過nuxt腳手架創(chuàng)建基礎(chǔ)項目
npx nuxi init nuxt3-template-by-leehan
通過vscode打開項目
code nuxt3-template-by-leehan
依賴包及啟動
npm install
npm run dev
啟動成功后打開：http://localhost:3000/
顯示nuxt定義的welcome頁面
項目創(chuàng)建成功
安裝tailwindcss
安裝方法
npm install --save-dev @nuxtjs/tailwindcss
使用依賴
在nuxt.config.js中添加代碼
modules: [
'@nuxtjs/tailwindcss'
]
初始化tailwindcss.config.js文件
npx tailwindcss init
安裝tailwindcss提示插件（vscode）
測試
修改app.vue文件代碼
<template>
<div class=" w-full h-screen bg-red-500">
HOMEPAGE
</div>
</template>
頁面全屏顯示紅色 說明樣式文件配置成功
配置布局
目錄結(jié)構(gòu)
根目錄創(chuàng)建文件夾-layoutslayouts文件夾下創(chuàng)建default.vue創(chuàng)建布局結(jié)構(gòu)
<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>
修改app.vue文件
<template>
<div class=" w-full h-screen bg-red-500">
<NuxtLayout name="default">
HOMEPAGE
</NuxtLayout>
</div>
</template>
重啟項目
重啟項目檢查布局是否應(yīng)用成功
路由
目錄結(jié)構(gòu)
- 根目錄創(chuàng)建文件夾-pages
- 修改app.vue
<template>
<div class=" w-full h-screen bg-red-500">
<NuxtLayout name="default">
<RouterView />
</NuxtLayout>
</div>
</template>
- 創(chuàng)建index.vue - 首頁
<template>
<div>
HOMOPAGE
</div>
</template>
- 創(chuàng)建user文件夾和index.vue - 用戶中心
<template>
<div>
USERINFO
</div>
</template>
- 創(chuàng)建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 - 文章詳情（動態(tài)路由）
```
<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
環(huán)境配置
創(chuàng)建env文件夾env文件夾中創(chuàng)建環(huán)境文件
.env.dev 開發(fā)環(huán)境變量
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/'
修改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] // 通過啟動命令區(qū)分環(huán)境
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文件夾下創(chuàng)建http.ts文件
@/utils/http.ts
import { hash } from 'ohash'
// 后端返回的數(shù)據(jù)類型
export interface ResOptions<T> {
data?: T
code?: number
msg?: string
}
/**
* api請求封裝
* @param { String } url 請求地址
* @param { Object } options useFtech第二個參數(shù)
* @param { Object } headers 自定義header頭, 單獨設(shè)置headers區(qū)分請求參數(shù)，也好設(shè)置類型
*/
const fetch = (url: string, options?: any, headers?: any): Promise<any> => {
const { public: { VITE_BASE_URL } } = useRuntimeConfig() // 3.0正式版環(huán)境變量要從useRuntimeConfig里的public拿
const reqUrl = VITE_BASE_URL + url // 你的接口地址
// console.log(NUXT_PUBLIC_API_MOCK)
// 不設(shè)置key，始終拿到的都是第一個請求的值制轰，參數(shù)一樣則不會進行第二次請求
const key = hash(JSON.stringify(options) + url)
// 可以設(shè)置默認(rèn)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文件夾中創(chuàng)建api.ts文件
@/composables/api.ts
import Http from "@/utils/http";
export const nav = (params?:any)=>{
return Http.post('后端api路徑',params)
}
在頁面使用
服務(wù)端
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
打包
測試環(huán)境
npm run build:test
生產(chǎn)環(huán)境
npm run build:prod
文件遷移
復(fù)制.output和ecosystem.config.js到服務(wù)器主頁
pm2啟動項目
測試環(huán)境
pm2 start ecosystem.config.js --env test
生產(chǎn)環(huán)境
pm2 start ecosystem.config.js --env prod
