Nuxt3 初始化项目

创建项目

npx nuxi init <项目名称>
//创建时可能会出现报错
/*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
原因: 可能为dns污染
解决：
先ping raw.githubusercontent.com是否连通
如果不通，访问https://ipaddress.com/website/raw.githubusercontent.com
找到githubusercontent.com的IPV4的地址复制
访问C:\Windows\System32\drivers\etc·目录下的hosts文件
添加hosts地址 IPV4 + raw.githubusercontent.com
打开控制台(win+R)，输入ipconfig /flushdns 刷新DNS 重新下载
*/

yarn //安装依赖
yarn dev //运行项目

安装tailwindcss

yarn add -D @nuxtjs/tailwindcss tailwindcss@latest postcss@latest autoprefixer@latest
//nuxt.config.js
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss']
})
//创建配置文件
npx tailwindcss init

4.目录结构

admin
├── .nuxt -- Nuxt 使用.nuxt/目录在开发中生成Vue应用程序,整个目录将在运行nuxt dev时重新创建
├── .output -- Nuxt在为生产构建应用程序时创建.output目录,整个目录将在运行nuxt build时重新创建。
├── assets -- 静态资源
├── components -- 全局组件
├── composables -- hooks //自动导入,使用时无需引入
--├── useGetDataSource.ts -- hook //自定义hook文件
├── layouts -- 布局组件
├── pages -- 页面文件 //根据目录自动生成路由
--├── index.tsx -- 基础页面 //对应的路由为 '/'
--├── home 
----├── index.tsx -- home页面 //对应的路由为 '/home' 
--├── article -- 动态路由
----├── [id].tsx -- article页面 //对应的路由为 '/article/id' 
├── plugins -- 插件 //自动注册
├── public -- 公共文件
├── server -- 服务器处理程序
├── utils -- 辅助函数和其他实用程序 //自动导入,使用时无需引入
├── app.vue -- Nuxt 3应用程序中的主要组件
└── nuxt.config.ts -- nuxt全局配置

Nuxt3 初始化项目 ​

Nuxt3 初始化项目