前端:Nuxt2 + Vuetify2

news2024/11/19 6:42:53

想要开发一个网站,并且支持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.coloradmin.cn/o/1867365.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

安全技术和防火墙(iptables)

安全技术 入侵检测系统&#xff1a;特点是不阻断网络访问&#xff0c;主要是提供报警和事后监督&#xff0c;不主动介入&#xff0c;类似于监控。 入侵防御系统&#xff1a;透明模式工作&#xff0c;对数据包&#xff0c;网络监控&#xff0c;服务攻击&#xff0c;木马&#…

实时显示用户输入PySide6实例

如何用 PySide6 实现QLabel 实时显示用户在 QLineEdit 内输入的内容&#xff1f; 示例代码&#xff1a; # QLineEdit 用户输入内容&#xff0c;QLabel 即时显示用户输入训练from PySide6.QtWidgets import (QApplication, QWidget,QLabel, QLineEdit, QVBoxLayout)class MyWi…

Python | Leetcode Python题解之第200题岛屿数量

题目&#xff1a; 题解&#xff1a; class Solution:def dfs(self, grid, r, c):grid[r][c] 0nr, nc len(grid), len(grid[0])for x, y in [(r - 1, c), (r 1, c), (r, c - 1), (r, c 1)]:if 0 < x < nr and 0 < y < nc and grid[x][y] "1":self.d…

喂饭级AI神器!免代码一键绘制图表,文本数据秒变惊艳视觉盛宴!

由于目前的AI生成图表工具存在以下几个方面的问题&#xff1a; 大多AI图表平台是纯英文&#xff0c;对国内用户来说不够友好&#xff1b;部分平台在生成图表前仍需选择图表类型、配置项&#xff0c;操作繁琐&#xff1b;他们仍需一份规整的数据表格&#xff0c;需要人为对数据…

Qt Quick Effect Maker 工具使用介绍

一、介绍 随着 Qt 版本的不断升级,越来越多的功能被加入 Qt,一些新的工具也随之应运而生,Qt Quick Effect Maker 工具是 Qt 6.5 之后才新添加的工具,之前的名字应该是叫做 Qt shader tool 这个模块。 以下是官方的释义:Qt Quick Effect Maker是一个用于为Qt Quick创建自定…

3.PyQt6常用基本控件

目录 常用控件 1.文本类控件 1.QLable标签控件 1.设置标签文本 2.设置标签文本和对齐方式 3.换行显示 4.添加超链接 5.为标签设置图片 6.获取标签文本 2.QLineEdit单行文本控件 3.QTextEdit多行富文本控件 4.QPlainTextEdit纯文本控件 5.QSpinBox整数数字选择控件 …

C++ | Leetcode C++题解之第200题岛屿数量

题目&#xff1a; 题解&#xff1a; class Solution { private:void dfs(vector<vector<char>>& grid, int r, int c) {int nr grid.size();int nc grid[0].size();grid[r][c] 0;if (r - 1 > 0 && grid[r-1][c] 1) dfs(grid, r - 1, c);if (r …

小白上手AIGC-基于PAI-DSW部署Stable Diffusion文生图Lora模型

小白上手AIGC-基于PAI-DSW部署Stable Diffusion文生图Lora模型 前言资源准备开启体验服务创建工作空间 部署服务创建DSW实例安装Diffusers启动WebUI 写在最后 前言 在上一篇博文小白上手AIGC-基于FC部署stable-diffusion 中&#xff0c;说到基于函数计算应用模板部署AIGC文生图…

Java之线程相关应用实现

后台线程 一个进程中只有后台进程运行&#xff0c;该进程将会结束。 新创建的线程默认为前台线程&#xff0c;Java中只要有一个前台线程运行&#xff0c;就不会结束程序&#xff0c;如果只有后台线程运行&#xff0c;程序就会结束&#xff0c;可以在线程对象启动前执行setDae…

工业AIoT竞赛流程

不要点到重置&#xff01;&#xff01;&#xff01;要刷新虚拟机就点重启 xshell连接虚拟机&#xff1a;ssh rootPublic IP 环境构建 vim /etc/hosts 按 i 进入插入模式&#xff0c;加内网ip和主机名&#xff0c;按esc&#xff0c;按 : &#xff0c;按wq 三个虚拟机都这样配 …

HQChart使用教程30-K线图如何对接第3方数据41-分钟K线叠加股票增量更新

HQChart使用教程30-K线图如何对接第3方数据40-日K叠加股票增量更新 叠加股票叠加分钟K线更新Request 字段说明Data.symbol 协议截图返回json数据结构overlaydata HQChart代码地址交流 叠加股票 示例地址:https://jones2000.github.io/HQChart/webhqchart.demo/samples/kline_i…

controller不同的后端路径对应vue前端传递数据发送请求的方式

目录 案例一&#xff1a; 为什么使用post发送请求&#xff0c;参数依旧会被拼接带url上呢&#xff1f;这应该就是param 与data传参的区别。即param传参数参数会被拼接到url后&#xff0c;data会以请求体传递 补充&#xff1a;后端controller 参数上如果没写任何注解&#xff0c…

半夜被慢查询告警吵醒,limit深度分页的坑

分享是最有效的学习方式。 博客&#xff1a;https://blog.ktdaddy.com/ 故事 梅雨季&#xff0c;闷热的夜&#xff0c;令人窒息&#xff0c;窗外一道道闪电划破漆黑的夜幕&#xff0c;小猫塞着耳机听着恐怖小说&#xff0c;辗转反侧&#xff0c;终于睡意来了&#xff0c;然而挨…

50、基于NARX神经网络的磁悬浮建模(matlab)

1、NARX神经网络简介 NARX&#xff08;非线性自回归外部输入&#xff09;神经网络是一种用于非线性建模和预测的神经网络结构。与传统的自回归模型不同&#xff0c;NARX网络可以接收外部输入来影响输出结果&#xff0c;从而更好地捕捉系统的复杂性和非线性特征。 NARX神经网络…

正版软件 | DeskScapes:将您的桌面变成生动的画布

您是否厌倦了静态的桌面背景&#xff1f;Stardock 的 DeskScapes 软件赋予您将任何图片或视频动画化的能力&#xff0c;让您的 Windows 桌面焕发活力。 动画桌面&#xff0c;艺术生活 使用 DeskScapes 您可以将任何静态图片或视频转化为桌面背景。不仅如此&#xff0c;通过 60 …

项目1111

中文显示姓名列和手机号 SELECT contact_name AS 姓名, contact_phone AS 手机号 FROM 2_公司id; 使用explain测试给出的查询语句&#xff0c;显示走了索引查询 EXPLAIN SELECT * FROM 7_订单数量 WHERE countid LIKE e%; 统计用户订单信息&#xff0c;查询所有用户的下单数量…

基于 GD32F450 的Zephyr 的基本测试-编译工程

一、cmake 编译 hello world 测试 打开示例工程 hello world cd ~/zephyrproject/zephyr/samples/hello_world新建 build 目前&#xff0c;用于存放临时文件目录&#xff0c;并进入该目录 mkdir -p build && cd build通过 cmake 指令 生成 gd32f450z 工程的 makefil…

Shell 编程入门

优质博文&#xff1a;IT-BLOG-CN 【1】x.sh文件内容编写&#xff1a; 固定开头&#xff1a;#&#xff01;/bin/sh&#xff1b; 【2】学习的第一个命令就是echo输出的意思&#xff1b; 【3】其实shell脚本也就是在文件中写命令&#xff0c;但是我们要写的是绝对路径&#xff1a…

k8s token加新节点

在 master 节点执行 kubeadm token create --print-join-command得到token和cert&#xff0c;这两个参数在2个小时内可以重复使用&#xff0c;超过以后就得再次生成 kubeadm join apiserver.k8s.com --token mpfjma.4vjjg8flqihor4vt --discovery-token-ca-cert-hash sha…

C++ | Leetcode C++题解之第199题二叉树的右视图

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<int> rightSideView(TreeNode* root) {unordered_map<int, int> rightmostValueAtDepth;int max_depth -1;stack<TreeNode*> nodeStack;stack<int> depthStack;nodeStack.push(ro…