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>