前端:Nuxt2 + Vuetify2

想要开发一个网站,并且支持SEO搜索,当然离不开我们的 Nuxt ,那通过本篇文章让我们一起了解一下。如果构建一个Nuxt项目

安装 Nuxt,创建项目

安装nuxt2, 需要node v16+,大家记得查看自己的node版本。构建脚手架这块我们参考官方文档来就可以了,nuxt快速搭建官方教程 || 主要步骤如下:

确保安装了 npx(npx 在 NPM 版本 5.2.0 默认安装了):

创建的目录必须是空的,不然会构建失败的。 

$ npx create-nuxt-app <项目名>

Programming language:TypeScript 。详细可以参考:前端:JavaScript 与 TypeScript 区别-CSDN博客

前端:TypeScript 配置文件说明-CSDN博客

Package manager:Npm。详细可以参考:前端:npm和yarn的区别-CSDN博客

UI framework: Vuetify。详情可以参考:前端:2024年非常受欢迎非常火的 VueUI 库-CSDN博客

Nuxt.js modules:添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。

ESLint 对 ES6 支持的最广泛,这个不用说明

Project name                               — 项目名称

Programming language               — 程序设计语言

Package manager                       — 包管理器

UI framework                               — UI框架

Nuxt.js modules                           — NuxtJS模块(需要安装某个需要按"空格"点亮才行)

Linting tools                                 — 代码校验工具

Testing framework                       — 测试框架

Universal                                     — 渲染模式(SSR:服务端渲染、SSG:静态页面生成)

Deployment target                       — 部署目标

Development tools                       — 开发工具

What is your GitHub username?  — GitHub名称

Version control system                 — 版本控制工具

我们查看下目录情况

  • assets:放一些未编译的静态资源
  • components:组织应用,可以视作page的组织部件(注意这些组件不会有asyncData方法的特性,这个在项目中经常会用到)
  • layouts:总体布局,如果是多页面项目会有多个背景layout,写在这里会自动编译进整个页面
  • middleware:中间件
  • pages:页面目录,基本上可视的浏览窗里看到的就是一个个page页面
  • plugins:插件目录,组织实例化钱需要运行的js插件,可以把通用的api或者需要在页面加载前统一处理的请求(js等)放在这。
  • static:静态文件,服务器启动时才被映射,我的话基本把图片放在这或者assets里
  • store:状态树,这里可以用来存放通用变量或者方法,当然还有更多配置功能,详情参考官方文档
  • nuxt.config.js文件:这里就是设置配置的地方,在加入什么新的需要特殊处理的插件时,需要在这里进行调整
  • package.json文件:这个文件里放的基本上是和编译相关的,这块可以去看npm或者yarn的说明。

直接编译即可访问 

目前本人使用的是 Nuxt3 + Vuetify3 所以就不在这里讲解 Nuxt2 + Vuetify2 的用法,有兴趣的可以去官网参考下API即可,如果对 Nuxt3 + Vuetify3 有兴趣的可以参考前端:Nuxt3 + Vuetify3 + Element Plus + 添加常用插件-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/760211.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

初阶数据结构之堆讲解

本篇文章带大家学习的是堆&#xff0c;还请各位观众老爷给个三连 正片开始 堆的概念 如果有一个关键码的集合 K { &#xff0c; &#xff0c; &#xff0c; … &#xff0c; } &#xff0c;把它的所有元素按完全二叉树的顺序存储方式存储 在一个一维数组中&#xff0c;并满…

J021_QQ号格式校验

一、需求描述 校验QQ号码是否正确。要求全部是数字&#xff0c;数字长度&#xff08;6-20位之间&#xff09;&#xff0c;不能以0开头。 二、代码实现 package com.itheima.sort;public class Test {public static void main(String[] args) {System.out.println("----…

MySQL4(事务、函数、慢查询和索引)

目录 一、MySQL事务 1. 概念 2. 事务的ACID原则 3. MySQL实现事务的方法 4. MySQL实现事务的步骤 5. 事务的原子性、一致性、持久性 6. 事务的隔离性 7. MySql中的锁 1. 共享锁 2. 排他锁 3. 行级锁 4. 表级锁 5. 间隙锁 6. 临键锁 7. 记录锁 8. 意向共享锁…

1.spring入门案例

Spring 介绍 Spring是轻量级的开源的JavaEE框架。 Spring有两个核心部分&#xff1a;IOC和AOP IOC 控制反转&#xff0c;把创建对象过程交给Spring进行管理。 AOP 面向切面&#xff0c;不修改源代码进行功能增强。 Spring特点 1.方便解耦&#xff0c;简化开发。 2.AOP编…

docker安装sqlserver2019

1、背景 由于要学习flink cdc&#xff0c;并且数据源是sqlserver&#xff0c;所以这里采用docker安装sqlserver。 2、安装步骤 &#xff08;1&#xff09;建目录 // 创建指定的目录 mkdir sqlserver// 进入该目录 cd sqlserver// 创建/data/mssql目录 mkdir -p /data/mssql…

SpringBoot + mkcert ,解决本地及局域网(内网)HTTPS访问

本文主要解决访问SpringBoot开发的Web程序,本地及内网系统,需要HTTPS证书的问题。 我测试的版本是,其他版本不确定是否也正常,测试过没问题的小伙伴,可以在评论区将测试过的版本号留下,方便他人参考: <spring-boot.version>2.3.12.RELEASE</spring-boot.vers…

Ubuntu20.04安装vimplus插件

参考文章&#xff1a; Ubuntu Linux下vimplus的安装及使用安装vimplus之后乱码问题解决 1、安装步骤&#xff1a; $ git clone https://github.com/chxuan/vimplus.git ~/.vimplus$ cd ~/.vimplus$ ./install.sh2、./install.sh 过程 出现选择是否备份 /home/yin-roc/.vim…

注意力机制之ECA-Net:Efficient Channel Attention for Deep Convolutional Neural Network

论文link&#xff1a;link code&#xff1a;code 1.摘要 近年来&#xff0c;通道注意机制被证明在改善深层卷积神经网络&#xff08;CNN&#xff09;的性能方面提供了巨大的潜力。然而现有的大多数方法都致力于开发更复杂的注意模块以获得更好的性能&#xff0c;这不可避免地增…

博客都在使用的打字机效果,居然这么简单?

效果展示 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><style>body …

历年各省废水污染、治理数据

1996-2019年各省废水污染、治理数据https://download.csdn.net/download/a519573917/89485042 目录 摘要&#xff1a; 一、引言 二、文献综述 三、实证模型 &#xff08;一&#xff09;变量选择 &#xff08;二&#xff09;数据来源 &#xff08;三&#xff09;模型设定…

timm中模型更换huggingface模型链接

现在timm默认使用huggingface的链接了&#xff0c;错误链接如下&#xff1a; (MaxRetryError("HTTPSConnectionPool(hosthuggingface.co, port443): Max retries exceeded with url: /timm/swinv2_tiny_window8_256.ms_in1k/resolve/main/model.safetensors (Caused by C…

适用于智慧城市、智慧文旅等在线场景的轻量级3D数字人引擎MyAvatar简介

本人研发的国内首个纯面向web应用和小程序的轻量级3D虚拟人引擎MyAvatar。 功能简述 支持3D模型定制&#xff08;写实或卡通风格均可&#xff0c;人物模型需实现绑定和变形&#xff09;动画可以内置于模型中&#xff0c;也可以单独以glb或fbx格式导出并动态加载支持readyplay…

音频接口电路的PCB设计

Audio接口是音频插孔&#xff0c;即音频接口&#xff0c;可分为Audio in接口和Audio out接口。音频接口是连接麦克风和其他声源与计算机的设备&#xff0c;其在模拟和数字信号之间起到了桥梁连接的作用。对于平台的数字音频接RK3588口&#xff0c;需遵循《Rockchip RK3588 High…

时序分析之Clock rise/fall edge边沿对选取解析

目录 一、前言 二、Clock edge的选取逻辑 2.1 设计工程 2.2 同频同相 2.3 同频不同相1 2.4 同频不同相2 2.5 倍频关系(Fclk1>Fclk2) 2.6 倍频关系(Fclk1)<> 2.7 倍频关系存在相移(Fclk1)<> 2.8 非倍频关系无相移(Fclk1)<> 2.9 非倍频关系有相移…

在数字化转型中,中小企业如何打造数字化产品和服务?

引言&#xff1a;随着社会的发展和消费者行为的变化&#xff0c;市场对数字化产品和服务的需求日益增长。中小企业需要紧跟这一趋势&#xff0c;通过开发数字化产品和服务来满足消费者的新需求。云计算、大数据、人工智能等先进技术的出现&#xff0c;为中小企业提供了更多的机…

第5章_Modbus通讯协议

文章目录 5.1 学习Modbus的快速方法5.1.1 寄存器速记5.1.2 协议速记 5.2 初识Modbus5.2.1 背景5.2.2 什么是Modbus&#xff1f;1. Modbus简介2. Modbus特点3. Modbus常用术语4. Modbus事务处理 5.3 Modbus软件与使用5.3.1 Modbus软件简介5.3.2 Modbus Poll&#xff08;主站设备…

Pikachu靶场--Sql Inject

参考借鉴 pikachu靶场练习&#xff08;详细&#xff0c;完整&#xff0c;适合新手阅读&#xff09;-CSDN博客 数字型注入(post) 这种类型的SQL注入利用在用户输入处插入数值&#xff0c;而不是字符串。攻击者试图通过输入数字来修改SQL查询的逻辑&#xff0c;以执行恶意操作。…

C# OpenCvSharp 入门

摘要 C# OpenCvSharp 是一个基于OpenCV&#xff08;开源计算机视觉库&#xff09;的C#封装库&#xff0c;它提供了一组功能强大的工具和函数&#xff0c;用于图像处理、计算机视觉和计算机图形学等领域。通过使用OpenCvSharp库&#xff0c;您可以在C#应用程序中轻松地实现各种图…

5.6 0-1背包问题

#include<iostream> #include<string> #include<stdlib.h> #include<bits/stdc.h> using namespace std;int c;//背包容纳的重量 int n;//物品数量 int cw;//当前重量 int cv;//当前价值 int bestv;//当前最优价值 int x[100]; int bestx[100]; struct…

VMware每次打开网络设置都出现需要运行NetworkManager问题

每次打开都出现这个情况&#xff0c;是因为之前把NetworkManager服务服务关闭&#xff0c;重新输入命令&#xff1a; sudo systemctl start NetworkManager.service或者 sudo service network-manager restart 即可解决&#xff0c;但是每次开机重启都要打开就很麻烦&#xf…