北京建网站公司,来宾建设工程造价网站,定制软件开发公司哪家好,哈尔滨优化网站方法简言
最近学了Nuxt3,并使用它创建了自己的小网站。记录下学习到的nuxt3内容。 Nuxt3官网 Nuxt 是一个免费的开源框架#xff0c;可通过直观、可扩展的方式使用 Vue.js 创建类型安全、高性能、生产级的全栈 Web 应用程序和网站。 支持SSR、SPA、建立静态网站#xff0c;也可以…简言
最近学了Nuxt3,并使用它创建了自己的小网站。记录下学习到的nuxt3内容。 Nuxt3官网 Nuxt 是一个免费的开源框架可通过直观、可扩展的方式使用 Vue.js 创建类型安全、高性能、生产级的全栈 Web 应用程序和网站。 支持SSR、SPA、建立静态网站也可以混合渲染SSRSPA。
Nuxt3项目创建
nuxi脚手架下载项目模板
创建前提条件
Node.js - v18.0.0 或更新版本文本编辑器 - 建议使用带有 Volar 扩展的 Visual Studio Code终端 - 以便运行 Nuxt 命令
project-name就是你的项目名
npx nuxilatest init project-name
pnpm dlx nuxilatest init project-name
注意点
npm源不要用淘宝源最好有梯子安装关闭防火墙
报网络错误
hosts文件添加下面内容 hosts路径C:\Windows\System32\drivers\etc
# Some other ip address nuxt3
185.199.108.133 raw.githubusercontent.com
185.199.111.133 raw.githubusercontent.com模板下载错误
如下所示 先试试 设置网络的 首选DNS为 114.114.114.114 还不行的话可以梯子找到代理端口使用下方命令创建项目 9080端口换成代理端口注意是nuxi-nightly。
npx nuxi-nightlylatest init nuxt-app http_proxyhttp://localhost:9080 问题详情issues159
都不行
实在不行就去gitee、github找别人nuxt3模板吧。 这是我的
目录运行
创建项目后运行项目 1
code project-name
2
npm install
3
npm run dev即可成功默认端口3000.
目录介绍
一个nuxt3项目目录差不多如下图所示
.nuxt ---- 项目的编译好的文件。Nuxt 在开发过程中使用 .nuxt/ 目录来生成 Vue 应用程序。.output ---- 在为生产构建应用程序时Nuxt 会创建 .output/ 目录。assets ---- 项目资源文件assets/ 目录用于添加构建工具将处理的所有网站资产。components ---- components/ 目录是放置所有 Vue 组件的地方。composables ------ 公共函数hook文件夹content ----- 使用 content/ 目录为您的应用程序创建基于文件的内容管理系统。layouts ----- Nuxt 提供了一个布局框架可将常见的用户界面模式提取为可重复使用的布局。middleware ---- Nuxt 提供了中间件用于在导航到特定路由之前运行代码。modules ----- 存放模块的文件夹pages ----- 页面文件夹。 Nuxt 提供基于文件的路由功能可在网络应用程序中创建路由。plugins ------- 插件文件夹。 Nuxt 有一个插件系统可在创建 Vue 应用程序时使用 Vue 插件等。public ----- 静态资源文件夹 public/ 目录用于提供网站的静态资产。server ---- server/ 目录用于向应用程序注册 API 和服务器处理程序。utils ----- 工具函数文件夹 使用 utils/ 目录可在整个应用程序中自动导入实用程序函数。.env ----- 文件指定了构建/开发时的环境变量。app.config.ts ---- 通过 App Config 文件在应用程序中公开反应式配置。app.vue ---- 根组件文件是 Nuxt 应用程序的主要组件。nuxt.config.ts ----- nuxt3配置文件只需一个 nuxt.config 文件即可轻松配置 Nuxt。tsconfig.json ---- ts配置文件。package.json ---- 项目脚本和依赖描述文件。
结语
nuxt3仓库在github上那个nuxi脚手架。。。国内不好用它创建项目网络不行多试几次就行。
