Nuxt+Tailwind快速上手

<h1><div class="image-package"><img src="https://img.haomeiwen.com/i12827060/55ee9a04993c60bb.jpeg" contenteditable="false" img-data="{"format":"jpeg","size":161070,"width":2736,"height":1476,"space":"srgb","channels":3,"depth":"uchar","density":72,"chromaSubsampling":"4:2:0","isProgressive":false,"hasProfile":false,"hasAlpha":false}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div></h1><h1><span style="font-size: 24px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";">Tailwind</span>
</h1><p>💡 Tips：Tailwind css 只是一套页面样式，可以和多个前端框架配合使用,但是如果只有css，要手工去写UI，还是比较耗时间。最好要找到一套基于Tailwind css的UI。这样前端界面的开发速度会快一点。 可以到TailwindUI 下载相应的组件和模版，如果要看全量代码的话，要买会员。</p><p>
</p><h2>安装Nuxt</h2><h4>先决条件</h4><blockquote><ol><li>Node.js - v18.0.0 或更新版本</li></ol><ol><li>文本编辑器 - 我们推荐使用 Visual Studio Code 以及 Volar 扩展</li></ol><ol><li>终端 - 用于运行 Nuxt 命令</li></ol></blockquote><p>安装 · 快速入门 Nuxt：</p><p>#检查node版本是否满足要求
<b>node --version
</b>#如果node版本需要升级
<b>curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
source ~/.bashrc
nvm install node</b>
#安装Nuxt
<b>yarn global add nuxt
</b>#创建Nuxt项目
<b>npx nuxi@latest init <project-name>
cd <project-name>
yarn install</b>
#启动项目
<b>yarn dev --open
</b></p><p>
</p><h2>安装Tailwind CSS</h2><p>💡 Tips：Tailwind css 只是一种样式，可以用在多种前端框架下，可以将Tailwind css作为Nuxt的模块进行安装。</p><p>Nuxt 安装Tailwind CSS：</p><p>#如果未创建Nuxt项目先创建项目，如果项目已经创建，直接进入项目
<b>npx nuxi init <project-name>
</b>#键入项目
<b>cd <project-name>
</b>#安装Tailwind css
<b>yarn install
npx nuxi module add @nuxtjs/tailwindcss
npx tailwindcss init</b>
#启动
<b>yarn dev --open
</b>
</p><p>使用Tailwind css (tailwind.config.js中引用css,在pages目录下的vue文件可以直接使用Tailwind css)：</p><p><b>/** @type {import('tailwindcss').Config} */
export default {
content: [],
theme: {
extend: {},
},
plugins: [
require('@tailwindcss/forms'),
],
}
</b></p><p><b><template>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</template></b>
</p><p><b>
</b></p><h2>安装Tailwind UI</h2><p>如果只有Tailwind css，要快速的开发出漂亮的前端界面，需要花很多时间。目前市面上有很多基于Tailwind css进行二次封装的组件和模版，需要再安装这些组件，以加速前端的开发。其中TailwindUI 是官方开发的组件和模版。<span style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";">由于我是采用Vue(Nuxt)开发，如果要使用TailwindUI，还有一些三方组件也需要安装：</span></p><p><b>yarn add @headlessui/vue
yarn add @heroicons/vue</b>
</p><p><b>
</b></p><p>添加好看的开源字体</p><p><b>// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: true },
modules: ["@nuxtjs/tailwindcss"],
app: {
head: { // 在每个页面的head 添加inter.css引用
link: [
{ rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' }
]

}
}

})</b>
</p><p>
</p><p>tailwind.config.js中添加引用：</p><p><b>const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
theme: {
extend: {
fontFamily: { // 添加字体
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
},
},
// ...
}</b>
</p><p><b>
</b></p><h3>TailwindUI的资源来源</h3><p>
https://heroicons.com/
</p><p>
https://unsplash.com/
</p><p>
https://www.pixsellz.io/
</p><p>
</p><h3>TailwindUI的组件使用</h3><p>Tailwind UI - 完整的组件和模版</p><p>使用组件，以结账表单为例，只要从官网拷贝对应的代码，放入app.vue(也可以是其他vue文件)。</p><p>
</p><h2>Nuxt3添加Sitemap</h2><p>1、安装依赖包</p><p><b>pnpm add -D @nuxtjs/sitemap
#
yarn add -D @nuxtjs/sitemap
#
npm install -D @nuxtjs/sitemap</b>

</p><p>2、在nuxt.config中添加对包的引用</p><p><b>export default defineNuxtConfig({
modules: ['@nuxtjs/sitemap']
})</b>
</p><p>3、访问 https://xxxxx/<strong>sitemap.xml ，Sitemap 文件后续将自动生成</strong></p><p><strong>
</strong></p><h2>Nuxt3 国际化</h2><h4>安装</h4><p><b>yarn add -D @nuxtjs/i18n
</b></p><h4>添加模块</h4><p><b>export default defineNuxtConfig({
modules: ['@nuxtjs/i18n']
})</b>

</p><h4>添加国际化配置</h4><p><b> i18n: {
baseUrl: 'https://www.taskease.info/', // 设定域名前缀，这样在生成link 的href 会是绝对路径
strategy: 'prefix', //url中自动增加语言前缀
langDir: 'locales', //语言文件所在的目录
locales: [
{
"code": "ja",
"iso": "ja-JP", //为了便于seo，要带上iso
"name": "日本語",
"file": "ja-JP.js"
},
{
"code": "en",
"iso": "en-US",
"name": "English",
"file": "en-US.js"
},
{
"code": "ar",
"iso": "ar-AR",
"name": "العربية",
"file": "ar-AR.js"
},
{
"code": "cs",
"iso": "cs-CZ",
"name": "Čeština",
"file": "cs-CZ.js"
},
{
"code": "da",
"iso": "da-DK",
"name": "Dansk",
"file": "da-DK.js"
},
{
"code": "de",
"iso": "de-DE",
"name": "Deutsch",
"file": "de-DE.js"
},
{
"code": "el",
"iso": "el-GR",
"name": "Ελληνικά",
"file": "el-GR.js"
},
{
"code": "es",
"iso": "es-ES",
"name": "Español",
"file": "es-ES.js"
},
{
"code": "fi",
"iso": "fi-FI",
"name": "Suomi",
"file": "fi-FI.js"
},
{
"code": "fil",
"iso": "fil-PH",
"name": "Filipino",
"file": "fil-PH.js"
},
{
"code": "zh_CN",
"iso": "zh-CN",
"name": "中文",
"file": "zh-CN.js",
},
{
"code": "fr",
"iso": "fr-FR",
"name": "Français",
"file": "fr-FR.js"
},
{
"code": "id",
"iso": "id-ID",
"name": "Bahasa Indonesia",
"file": "id-ID.js"
},
{
"code": "ms",
"iso": "ms-MY",
"name": "Bahasa Melayu",
"file": "ms-MY.js"
},
{
"code": "pt_BR",
"iso": "pt-BR",
"name": "Português (Brasil)",
"file": "pt-BR.js"
},
{
"code": "ru",
"iso": "ru-RU",
"name": "Русский",
"file": "ru-RU.js"
},
{
"code": "sv",
"iso": "sv-SE",
"name": "Svenska",
"file": "sv-SE.js"
},
{
"code": "tr",
"iso": "tr-TR",
"name": "Türkçe",
"file": "tr-TR.js"
}
]
,
defaultLocale: 'en', //默认使用英文
lazy: true, //语言文件懒加载
detectBrowserLanguage: { // 开启浏览器默认使用语言检测，如果浏览器使用zh，则进入浏览器会自动跳转中文
useCookie: false, // 不使用cookie
alwaysRedirect: true // 每次重新进入网页，都是自动跳转对应的语言页面
}
},</b>
</p><p><b>
</b></p><p><b>
</b></p><h4>添加每个语言对应的js文件</h4><div class="image-package"><img src="https://img.haomeiwen.com/i12827060/f7fdd3a557309138.jpeg" img-data="{"format":"png","size":31447,"width":386,"height":434,"space":"srgb","channels":4,"depth":"uchar","density":72,"isProgressive":false,"hasProfile":false,"hasAlpha":true}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div><p>
</p><h4>语言文件内容：</h4><p>export default {
welcome: 'hello',
backHome: 'gobackhome',
about: {
title: 'about us',
description: 'about us page'
}
};
</p><p><span style="color: rgba(0, 0, 0, 0.85); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";">vue文件中使用国际化及语言切换</span>
</p><p>
</p><h3>多语言SEO</h3><p>目前为了国际化，需要引入nuxtjs/i18n 组件。目前i18n有四种模式，为了便于Google的抓取，我使用了URL带语言前缀的方式。</p><p>
</p><p>
</p><div class="image-package"><img src="https://img.haomeiwen.com/i12827060/1b16a9fb75d87f58.jpeg" img-data="{"format":"png","size":224388,"width":748,"height":401,"space":"srgb","channels":4,"depth":"uchar","density":72,"isProgressive":false,"hasProfile":false,"hasAlpha":true}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div><h3>Robots.txt</h3><h3>如果没有添加Robots.txt 爬虫会根据自己的设定，选择性的爬取或者不爬取该网站。所以最好的方式是，新建一个Robots.txt文件，并明确告知爬虫允许爬取网站</h3><p>
</p><h2>落地页会用到的资源</h2><p>Unsplash --获取图片</p><p>SVG Repo - 大量免费的svg和尺量图下载</p><p>Google Fonts --google 用来设计文字、图标的网站</p><p>vecteezy -- 艺术设计的svg、图片、模版(很棒)</p><p>Figma: 导入下载的文件，直接设计</p><p>Tailwind UI - 获取模版和组件</p><p>Create Amazing Mockups -- 截图美化</p><p>Adobe Express Unavailable --图片转svg</p><p>Icon Maker by Raycast -icon美化工具</p>