zuxian的个人简介

项目预览

项目用的技术栈

This starter template also includes:

• We recommend to look at the nuxtjs-documentation.

• Tailwind CSS v3

• Eslint

• Headless UI - unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS https://headlessui.com/

• Icones - beautiful hand-crafted SVG icons with Unocss used.

First-party plugins needed for Tailwind UI:

• tailwindcss/forms
• tailwindcss/typography
• tailwindcss/line-clamp
• tailwindcss/aspect-ratio

Best Nuxt with Plugins:

• Pinia

项目运行

• 安装依赖

yarn install

• 开发环境

http://localhost:3000

yarn dev

• 生产环境

# 构建
yarn build

# 运行
yarn start

• 依赖更新

# 按空格键+enter键
yarn allupdate

# 实际执行 yarn upgrade-interactive --latest

项目详细介绍

Nuxt3 新特性

更轻量：以现代浏览器为基础的情况下，服务器部署和客户端产物最多减小75倍。 更快：用动态服务端代码来优化冷启动。 Hybird：增量动态生成和其他高级模式现在都成为可能。 Suspense: 导航前后可在任何组件中获取数据。 Composition API : 使用Composition API 和 Nuxt3的composables 实现真正的可复用性。 Nuxt CLI ： 权限的零依赖体验，助你轻松搭建项目和集成模块。 Nuxt Devtools ：专属调试工具，更多的信息和快速修复，在浏览器中高效工作。 Nuxt Kit ：全新的基于 TypeScript 和跨版本兼容的模块开发。 Webpack5 ： 更快的构建速度和更小的构建包，并且零配置。 Vite：用Vite作为你的打包器，体验轻量级的快速HMR。 Vue3 ： 完全支持Vue3语法，这一点特别关键。 TypeScript：由原生TypeScript和ESM构成，没有额外配置步骤。

• 组件库：headlessui

https://headlessui.com/

• 一键换肤

配置文件nuxt.config.ts引进了模块 @nuxtjs/color-mode

参考文档：color-mode.nuxtjs.org

• 国际化语言

vue-i18n

• 图标库

unocss icons 使用图标预设

https://juejin.cn/post/7028892490803445767

https://github.com/unocss/unocss/tree/main/packages/nuxt

配置文件nuxt.config.ts

unocss: {
   uno: false,
   preflight: false,
   icons: true,
   presets: [
      presetIcons({
         scale: 1.2,
         extraProperties: {
            display: 'inline-block',
         },
      }),
   ],
   safelist: ['i-twemoji-flag-us-outlying-islands', 'i-twemoji-flag-turkey'],
},

图标库查找： https://iconify.design/

unocss/preset-icons ---> 组件名字使用 unoicon

<UnoIcon class="i-ph-github-logo-duotone" />

// 或者
<div class="i-carbon-3d-cursor"  text-3xl text-white />
<button text-white text-3xl class="i-carbon-sun" />

部署

Git 全局设置:

git config --global user.name "zuxian" git config --global user.email "zuxian_fu@163.com" 创建 git 仓库:

mkdir profile-nuxtjs cd profile-nuxtjs git init touch README.md git add README.md git commit -m "first commit" git remote add origin https://gitee.com/zuxian/profile-nuxtjs.git git push -u origin "master" 已有仓库?

cd existing_git_repo git remote add origin https://gitee.com/zuxian/profile-nuxtjs.git git push -u origin "master"

与我联系

fuzuxian