Nuxt3+Typescript+Unocss开源官网项目

最新推荐文章于 2024-05-16 09:42:07 发布
最新推荐文章于 2024-05-16 09:42:07 发布
阅读量1.3k 收藏 5
点赞数 1
文章标签： typescript javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42424283/article/details/129168074
版权

文章目录

💥前言

这是一个开源的SSR服务端渲染响应式项目，可自己稍微改造成官网或者个人网站

nuxt3+ts开源项目

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

提示：项目中的公司、文案描述都是胡编乱造的，纯属虚构

一、📒 技术栈

  • 💚 Nuxt 3 - SSR, ESR, File-based routing, components auto importing, modules, etc.

  • ⚡️ Vite - Instant HMR

  • 🎨 UnoCSS - The instant on-demand atomic CSS engine.

  • 😃 Use icons from any icon sets in Pure CSS, powered by UnoCSS

  • 🔥 The <script setup> syntax

  • 🍍 animejs,Powerful animation library see ./composables/user.ts

  • 📑 Layout system

  • 📥 APIs auto importing - for Composition API, VueUse and custom composables.

  • 🏎 Zero-config cloud functions and deploy

  • 🦾 TypeScript, of course

  • ☎️ mitt Event bus

二、🎁在线预览

在线预览地址

三、🌞 项目运行

npm i
npm run dev

四、🍎项目部署

建议使用PM2管理工具进行部署

nuxt3官网对pm2的章节

也可以参照这下面的博文

宝塔部署nuxt

五、🚴项目地址

如果项目对你有帮助，麻烦到github项目地址给个 💛Star

蹦哒
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css 背景色动画
仲广绪的博客
05-18 1431
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.
基于Nuxt实现移动端的企业官网
08-13
项目中整合 vue nuxt axios vuex vue-router (nuxt 自带 vuex 和 vue-router)，一个基于 Nuxt 的服务器端渲染 Demo
关于Vue+webpack使用unocss编写CSS，打包后CSS没加前缀
Hhjian524的博客
10-13 1263
关于Vue+webpack使用unocss编写CSS，打包后CSS没加前缀
推荐开源项目： Nuxt-Auth —— 安全便捷的Nuxt 3认证解决方案
最新发布
gitblog_00094的博客
05-16 923
推荐开源项目：???? Nuxt-Auth —— 安全便捷的Nuxt 3认证解决方案 项目地址:https://gitcode.com/sidebase/nuxt-auth 在Web开发中，认证是不可或缺的一部分，对于采用Nuxt.js构建的应用尤其如此。今天，我们向您推荐一款名为Nuxt-Auth的开源库，它是一个功能完备的Nuxt 3应用程序认证模块，不仅支持动态模式，还特别针对静态Nuxt应用提供...
推荐开源项目：Nuxt UI
gitblog_00006的博客
03-23 808
推荐开源项目：Nuxt UI 项目地址:https://gitcode.com/nuxt/ui Nuxt UI 是一个由 Nuxt.js 社区开发的全面、现代且响应式的组件库，专为 Vue.js 和 Nuxt.js 应用程序设计。如果你正在寻找一款简洁、高效并且易定制的前端框架，那么 Nuxt UI 可能正是你需要的。 项目简介 Nuxt UI 提供了一系列高质量的 UI 组件，包括按钮、表单元素...
一个开源vue网站博客，nuxt开源网站，前后端分离项目
她的猿的博客
12-11 2399
unNue.com 开媛笔记，基于nuxt ssr首屏服务器端渲染 。用于分享、记录、交流和学习，希望可以帮助到小伙伴们。同时网站在不断更新，创造属于猿（媛）的世界 -$Bao Yalong … Let’s Go! https://unnue.com 简述 前端 Github地址 语言：Javascript 主框架：Nuxt 状态管理：Vuex 路由：vue-router 网络请求：...
nuxt3安装 解决报错
qq_42771875的博客
04-10 532
✓ Win 电脑 host 配置路由：c:/Windows/System32/drivers/etc/hosts。 第一步：ping raw.githubusercontent.com 检查是否通。✓ Mac电脑 host 配置路径： /etc/hosts。 第五步：重新ping域名，如果通了就可以用了。 第二步：如果访问不通，代表是网络不通。 第三步：配置 host，本地解析域名。 第六部：重新开一个终端创建项目即可。
推荐!基于 NestJS/NuxtJS 的完整开源项目
程序员成长指北
10-26 2742
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群今天分享一款轻量级的基于 Node.js 的开源 CMS，采用前后端分离开发模式，集成...
Nuxt项目支持eslint+pritter+typescript的实现
10-16
主要介绍了Nuxt项目支持eslint+pritter+typescript的实现,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
基于Nuxt3 + Vue3 + NaiveUI+ Vite实战开发在线教育SSR服务端渲染网站应用.zip
03-03
基于Nuxt3 + Vue3 + NaiveUI+ Vite实战开发在线教育SSR服务端渲染网站应用.zip 二、项目内容 项目包括：图文、音频、视频、电子书、用户、直播、问答社区、考试、拼团秒杀、优惠券模块及微信扫码支付以及（部分）...
基于 Node.js 的开源个人博客系统，采用 Nuxt + Vue + TypeScript 技术栈。.zip
08-01
基于node js、vue、mongodb等技术构建的web系统，界面美观，功能齐全，适合用作毕业设计、课程设计作业等，项目均经过测试，可快速部署运行！ 基于node js、vue、mongodb等技术构建的web系统，界面美观，功能齐全，...
Vue3+Nuxt3实战在线教育SSR网站
03-24
Vue3+Nuxt3实战在线教育SSR网站基于Nuxt3搭建的页面
一文搞懂Nuxt3基本用法
一段曲折的旅程，一个艰难的人生
01-10 1万+
Nuxt.js实战记录，反复打磨，以臻精品
nuxt.js开发企业官网--搭建项目（一）
weixin_34174422的博客
05-30 1474
HI，我是allen。这次我们用nuxt这个拥有SSR特性来建造一个企业官网吧 楼主用的是淘宝镜像cnpm,如果是用npm的改过来即可 cnpm install vue-cli -g //安装手脚架 vue init nuxt/starter //安装nuxt 此过程按照要求填写项目信息即可 cnpm install //下载依赖 cnpm run dev //跑起来 复制代码 OK 搭建完...
nuxt搭建官网
lzccheng
02-14 3243
npx create-nuxt-app GW 引入flexible.js 可加载阿里的cdn文件 http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js 或者下载到本地 //nuxt.config.js head: { title: pkg.name, meta: [ { cha...
nuxt3：我们开始吧-开发-配置-部署
热门推荐
snowball的博客
11-28 2万+
2022 年 11 月 16 日，全球最大的 Nuxt 会议 Nuxt Nation 2022 在线举行，并正式发布了 Nuxt.js 3.0 的第一个稳定版本。的 Nuxt 框架的现代重写，具有一流的 Typescript 支持，是两年多研究、社区反馈、创新和实验的结果。nuxt项目tsconfig.json有配置，public目录下的文件可以省略/public目录，我这里测试不可以，后续会再研究。SSR应用：在服务端进行渲染，渲染完成后返回给客户端，每个页面有独立的URL，对SEO友好。
Nuxt3项目搭建详细步骤
CXW1014的专栏
02-04 1335
Nuxt3是基于vue3的服务端渲染的网络框架，
vue nuxt服务端渲染开源项目
weixin_42178050的博客
12-21 231
https://github.com/jigsaw-china/unnue-nuxt https://gitee.com/markowner/nuxt-elm/tree/master https://learnku.com/vuejs/t/40116
尝试搭建 Vue3+nuxt3+typescript+vuex+i18n+axios+element plus+...(三) 之 vuex
windbellxy的博客
04-18 1599
为了能在nuxt上跑通 vue3的项目， 仅 创建了登录页面和相关组件 登录页面和组件上涉及的 useRoute, useRouter等 已经无需再手动引入， 直接可以用 但vuex， 虽然默认也已经可以使用，但 vuex项目 拷贝过来的store文件夹， 一直报错， 引用出错 由于typescript不熟， 实在调不通的情况下，只能把store目录下的Index.ts，改成 最简单的创建 方式 ， import { createStore } from "vuex"; import user.
nuxt3+ts vite如何打包优化
05-30
Nuxt3 + TypeScript + Vite 打包优化的方法如下： 1. 开启静态资源压缩和Gzip压缩：可以使用Vite插件 `vite-plugin-compression` 来实现，它会自动压缩静态资源和Gzip压缩。 2. 优化代码分割：可以使用Vite的 `rollup-plugin-commonjs` 插件，它可以帮助我们将代码分割成更小的块，优化加载速度。 3. 使用CDN加速静态资源：将静态资源上传到CDN上，可以加快资源加载速度。可以使用Vite插件 `vite-plugin-cdn` 来实现自动上传到CDN。 4. 开启Tree-shaking：可以在 `nuxt.config.js` 中设置 `build.terser` 为 `true`，这样Vite会自动开启Tree-shaking来减少不必要的代码。 5. 开启缓存：可以通过在 `nuxt.config.js` 中设置 `build.cache` 为 `true`，来开启缓存，可以提高打包速度。 6. 使用ESbuild替代Terser：可以使用Vite的 `vite-plugin-esbuild` 插件来替代Terser进行代码压缩，ESbuild更快且体积更小。 以上是Nuxt3+TypeScript+Vite打包优化的一些方法，可以根据实际情况进行选择和组合。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值