位置: IT常识 - 正文

Nuxt3从零开始配置与打包发布(nuxt支持vue3吗)

编辑:rootadmin
Nuxt3从零开始配置与打包发布

推荐整理分享Nuxt3从零开始配置与打包发布(nuxt支持vue3吗),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:nuxt支持vue3吗,nuxt 配置,nuxt好用吗,nuxt好用吗,nuxt怎么样,nuxt怎么样,nuxt怎么样,nuxt怎么样,内容如对您有帮助,希望把文章链接给更多的朋友!

Nuxt3是基于Vue3的一个开发框架,基于服务器端渲染SSR,可以更加方便的用于Vue的SEO优化。

Nuxt 3.0 新特性包括:

更轻量:以现代浏览器为目标的服务器部署和客户端产物最多可缩小 75 倍

更快:基于 nitro 提供动态代码分割能力,以优化冷启动性能

Hybrid:增量静态生成和其他的高级功能现在都成为可能

Suspense:在任意组件和导航前后都可以获取数据

Composition API:使用 Composition API 和 Nuxt 3 的 composables 实现真正的代码复用

Nuxt CLI:没有任何依赖,帮你轻松搭建项目和集成模块

Nuxt Devtools:通过直接在浏览器中查看信息和快速修复实现更快地工作

Nuxt Kit:具有 Typescript 和跨版本兼容性的全新模块开发

Webpack 5:更快的构建时间和更小的包大小,无需配置

Vite:使用 Vite 作为打包工具,体验闪电般快速的 HMR

Vue 3:Vue 3 是你下一个 Web 应用程序的坚实基础

TypeScript:使用原生 TypeScript 和 ESM 构建,无需额外步骤

由于官方的Nuxt3刚发布没多久,所以一些文章和文档资源并不是很多。目前基于官方文档(Nuxt: The Intuitive Web Framework)去搭建Nuxt3模板项目还不行,可能需要翻墙。

这里直接分享步骤。

Nuxt3从零开始配置与打包发布(nuxt支持vue3吗)

1、官方模板下载。

官方模板库地址:https://github.com/nuxt/starter

Nuxt3实际上拉取的内容地址是:starter/v3.json at templates · nuxt/starter · GitHub

这个v3.json文件内容如上图,我们获取下载地址即可:https://codeload.github.com/nuxt/starter/tar.gz/refs/heads/v3 

用这个地址访问就可以下载到官方的Nuxt3模板了。

2、安装库。

运行命令安装依赖库:

npm install

3、在线调试和打包命令。

//测试运行npm run dev//打包(SSR混合渲染模式)npm run build//打包(SPA静态化生成模式)npm run generate

4、自定义调试运行端口。

默认Nuxt3用的端口是3000。我们可以在package.json文件里配置修改开发调试环境的端口号。

5、自定义打包后运行端口号。

目前经过各种方法尝试,只有通过pm2启动方式才自定义了打包后项目启动运行的端口号自定义。

pm2安装命令:

npm install -g pm2

 新建pm2打包配置文件:ecosystem.config.js

module.exports = { apps: [ { name: 'nuxt-app', port: '3060', exec_mode: 'fork',//cluster instances: '1',//max script: './.output/server/index.mjs' } ] }

启动命令:

pm2 start ecosystem.config.js

停止命令:

pm2 stop ecosystem.config.js

暗黑模式,使用:useDark | VueUse

安装VueUse

npm i @vueuse/core<script setup>import { useDark, useToggle } from '@vueuse/core'const isDark = useDark()const toggleDark = useToggle(isDark)</script><template> <span @click.stop="toggleDark()">暗黑模式</span> <el-switch size="small" v-model="isDark"/></template>

阿里云ECS Linux服务器或者Linux服务器安装Nodejs步骤

//下载Linux版本nodejswget https://npm.taobao.org/mirrors/node/v16.14.0/node-v16.14.0-linux-x64.tar.xz//或者wget https://nodejs.org/dist/v16.14.0/node-v16.14.0-linux-x64.tar.xz//解压tar -xvf node-v16.14.0-linux-x64.tar.xz//移动文件夹mv node-v16.14.0-linux-x64/ /usr/local/node//设置环境变量echo "export PATH=$PATH:/usr/local/node/bin" >> /etc/profile//让配置生效source /etc/profile//测试输出node版本号node -v//测试输出node版本号npm -v
本文链接地址:https://www.jiuchutong.com/zhishi/276995.html 转载请保留说明!

上一篇:操作系统的内存管理(操作系统的内存映射)

下一篇:win10切换平板模式没有提示(win切换平板模式)

  • 比心手势微信里怎么打(微信比心手势表情符号怎么打)

    比心手势微信里怎么打(微信比心手势表情符号怎么打)

  • iphone se2支持无线充电吗(iphone se2支持无线充电)

    iphone se2支持无线充电吗(iphone se2支持无线充电)

  • 剪映如何更换视频背景(剪映如何更换视频背景保留人像)

    剪映如何更换视频背景(剪映如何更换视频背景保留人像)

  • 苹果xs充电到80不动了(苹果xs充电到80苹果10w头可以充手机吗)

    苹果xs充电到80不动了(苹果xs充电到80苹果10w头可以充手机吗)

  • 美图手机忘记锁屏密码忘了怎么办(美图手机忘记锁屏密码怎么解锁)

    美图手机忘记锁屏密码忘了怎么办(美图手机忘记锁屏密码怎么解锁)

  • 快手置顶怎么取消(快手置顶取消)

    快手置顶怎么取消(快手置顶取消)

  • 手机碎屏发黄还能用吗(手机屏幕碎了发黄可不可以继续使用)

    手机碎屏发黄还能用吗(手机屏幕碎了发黄可不可以继续使用)

  • 无线键盘按什么键激活(无线键盘按什么键连接蓝牙)

    无线键盘按什么键激活(无线键盘按什么键连接蓝牙)

  • 双11红包退货后退还吗(双11红包退货后还有吗)

    双11红包退货后退还吗(双11红包退货后还有吗)

  • 常用镜头可分为哪两种(常用镜头可分为哪几类)

    常用镜头可分为哪两种(常用镜头可分为哪几类)

  • 快手粉丝有什么作用(快手粉丝有什么特点)

    快手粉丝有什么作用(快手粉丝有什么特点)

  • ps里边怎么去除一个图案(如何去除ps)

    ps里边怎么去除一个图案(如何去除ps)

  • wps视图怎么恢复正常(wps视图怎么变回经典)

    wps视图怎么恢复正常(wps视图怎么变回经典)

  • 手机qq可以远程吗(手机QQ可以远程操作另外一部手机吗)

    手机qq可以远程吗(手机QQ可以远程操作另外一部手机吗)

  • 手机qq群成员名片在哪(手机qq群成员名字)

    手机qq群成员名片在哪(手机qq群成员名字)

  • 酷我音乐灵异事件簿怎么没了(酷我音乐灵异事件簿怎么不能听了)

    酷我音乐灵异事件簿怎么没了(酷我音乐灵异事件簿怎么不能听了)

  • iphonexr三维触控在哪里设置(iphonexr三维触控怎么打开)

    iphonexr三维触控在哪里设置(iphonexr三维触控怎么打开)

  • 苹果8plus怎么分屏(苹果8plus怎么分身)

    苹果8plus怎么分屏(苹果8plus怎么分身)

  • 抖音属于什么系列软件(抖音属于什么系的app)

    抖音属于什么系列软件(抖音属于什么系的app)

  • opporen什么时候上市的(opporeno啥时候上市)

    opporen什么时候上市的(opporeno啥时候上市)

  • 基于WEB的网上购物系统的设计与实现(附:源码 论文 sql文件)(基于web的购物网站)

    基于WEB的网上购物系统的设计与实现(附:源码 论文 sql文件)(基于web的购物网站)

  • 数字图像处理课程设计-疲劳检测系统(数字图像处理课后题答案)

    数字图像处理课程设计-疲劳检测系统(数字图像处理课后题答案)

  • JS中操作<select>标签选的值(Js中操作数组的方法)

    JS中操作<select>标签选的值(Js中操作数组的方法)

  • 增值税纳税申报时间
  • 计提并结转所得税费用的会计分录
  • 医疗服务有增值业务吗
  • 高新企业如何申报纳税
  • 房地产开发企业预收款预缴增值税
  • 成品盘盈盘亏的会计分录
  • 进项抵欠税相关政策
  • 预支备用金填请款单还是借支单
  • 企业职工报销签单怎么写
  • 软件著作权如何入账
  • 开具增值税专用发票的要求
  • 什么样的企业用交税
  • 增值税普通发票可以抵扣吗
  • 购货方红字发票信息表怎么开
  • 城建税漏报怎么办
  • 财税2010 121号文件是否作废
  • 高新企业减免所得税政策
  • 所有者权益减少资产减少案例
  • 本期销售额未达起征点请将本期应纳税额
  • 企业向境外支付货款填写
  • 创新券兑付怎么操作
  • 跨月预缴如何做账
  • 小规模季报都报哪些税种
  • 商品残次品怎样定义
  • 建筑工地仓库管理流程
  • 金税盘减免税款怎么结转
  • 复核内容有哪些?
  • 厂家赠送的原材料怎么入账
  • 事业单位收到拨款怎么办
  • 结构性存款利息增值税
  • win10 待机时间
  • 购销合同印花税税率2023
  • 免征增值税的范围有
  • axios提交文件
  • laravel create
  • svg如何嵌入html5
  • wordpress neve
  • thinkphp 多表查询
  • nacos注册流程
  • 贴现手续费计入哪个明细科目
  • sqlcoalesce
  • 织梦怎么新建页面
  • 停工期间工资支付标准
  • 计提提成是什么意思
  • 处置资产增值税纳税义务发生时间
  • 支付利息的现金流
  • 发票审核中是什么意思
  • 承租人收到融资租赁款
  • 电商账务怎么做
  • 装修费未计入长期费用
  • 政府专款专用
  • 存货报废如何做账
  • 小型微利企业年报填什么表
  • 非正常损失的进项税额转出会计分录
  • 公司给非职工人员发工资
  • 低值易耗品怎么处理
  • 内部资金管理实施细则
  • 数据库表的查询学会了什么
  • sql server错误和使用情况报告
  • win 9x
  • win7系统资源管理器频繁未响应
  • ubuntu恢复rm –rf删除的文件
  • bios如何设置关机键开机
  • exfat 打不开
  • linux d
  • 离线安装macos
  • win8设置宽带连接
  • linux系统怎么查看root用户密码
  • win10一直重置
  • node.js基础入门
  • 安卓骰子游戏
  • 基于python的设计
  • bat删除隐藏文件
  • 怎么优化项目
  • jquery动态生成表格
  • android基础入门
  • js数组操作方法
  • 谈谈我对美国的印象
  • 贵州省 税务局
  • 税务局纳税服务品牌
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设