This starter template also includes:
-
We recommend to look at the nuxtjs-documentation.
-
Headless UI - unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS https://headlessui.com/
First-party plugins needed for Tailwind UI:
Best Nuxt with Plugins:
- 安装依赖
yarn install- 开发环境
yarn dev- 生产环境
# 构建
yarn build
# 运行
yarn start- 依赖更新
# 按空格键+enter键
yarn allupdate
# 实际执行 yarn upgrade-interactive --latest更轻量：以现代浏览器为基础的情况下，服务器部署和客户端产物最多减小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
- 一键换肤
配置文件nuxt.config.ts引进了模块 @nuxtjs/color-mode
- 国际化语言
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 "[email protected]" 创建 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