前端VUE3框架的快速搭建

news/2025/2/24 7:10:11

前端VUE3框架的快速搭建

  • 安装nodejs
  • 创建一个 Vue 应用
  • 精简VUE项目
  • 在idea中运行vue项目
  • 修改标题
  • 定义全局css样式
  • 404页面

安装nodejs

参考:在MAC上面通过HomeBrew安装node和npm@指定版本
https://blog.csdn.net/yu_fu_a_bu/article/details/145810229

vue3推荐使用 nodejs v22
npm 版本:10.9.2

创建一个 Vue 应用

liujinglong@192 ~ % cd /Users/liujinglong/workplace
liujinglong@192 workplace % cd yufuabu 
liujinglong@192 yufuabu % npm create vue@latest

在这里插入图片描述

精简VUE项目

在这里插入图片描述

在idea中运行vue项目

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

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

修改标题

在这里插入图片描述

定义全局css样式

在这里插入图片描述

404页面

<script setup>

</script>

<template>
  <div style="height: 100vh;display: flex;justify-content: center;align-items: center;">
    <div class="error">
      <img src="@/assets/imgs/404.png" alt="404">
      <div style="text-align: center;padding: 20px 0;font-size: 20px; color: #0d0dd8">
        <router-link to="/" style="color: #5050b8">
          返回首页
        </router-link>
      </div>

    </div>

  </div>



</template>

<style scoped>

</style>


http://www.niftyadmin.cn/n/5864064.html

相关文章

基于 Python 的项目管理系统开发

基于 Python 的项目管理系统开发 一、引言 在当今快节奏的工作环境中&#xff0c;有效的项目管理对于项目的成功至关重要。借助信息技术手段开发项目管理系统&#xff0c;能够显著提升项目管理的效率和质量。Python 作为一种功能强大、易于学习且具有丰富库支持的编程语言&…

【行业解决方案十九】【DeepSeek汽车制造:焊接质量检测方案 】

在汽车制造领域,焊接质量直接关系到产品的安全性和可靠性。传统焊接检测方法不仅效率低下,还难以实现全面监控和质量问题的精准溯源。而如今,借助人工智能和大数据技术,DeepSeek 提供了一套全新的焊接质量检测方案,彻底改变了这一局面。 一、为什么焊接质量检测如此重要?…

通俗理解什么是云原生?

by deepseek。 一、核心理念&#xff1a;云原生到底是什么&#xff1f; 1. 一句话定义 云原生&#xff08;Cloud Native&#xff09; 是一种构建和运行应用程序的方法论&#xff0c;它利用云计算的优势&#xff08;弹性、分布式、自动化&#xff09;&#xff0c;让软件从设计…

动手学深度学习:线性回归神经网络

从零实现线性回归 生成数据 import torch def synthetic_data(w,b,num_examples):Xtorch.normal(0,1,(num_examples,len(w)))ytorch.matmul(X,w)bytorch.normal(0,0.1,y.shape)return X,y.reshape((-1,1)) true_wtorch.tensor([2,-3.4]).reshape(2,1) true_b4.2 features,lab…

第17篇:网络请求与Axios集成

目标&#xff1a;掌握在Vue3中规范地发起HTTP请求 1. 安装与基础配置 npm install axios // src/utils/request.js import axios from axios const service axios.create({ baseURL: https://api.example.com, timeout: 10000 }) export default service 2. 基础请…

正则表达式用法及其示例:匹配、查找、替换文本中的模式,及QT下如何使用正则表达式。

当然&#xff01;正则表达式是一种强大的工具&#xff0c;用于匹配、查找、替换文本中的模式。下面是一些常见的正则表达式用法及其示例。 1、基本语法 基本元字符和语法 .&#xff1a;匹配任意单个字符&#xff08;除了换行符&#xff09;。^&#xff1a;匹配输入字符串的开…

从零开始玩转TensorFlow:小明的机器学习故事 4

探索深度学习 1 场景故事&#xff1a;小明的灵感 前不久&#xff0c;小明一直在用传统的机器学习方法&#xff08;如线性回归、逻辑回归&#xff09;来预测学校篮球比赛的胜负。虽然在朋友们看来已经很不错了&#xff0c;但小明发现一个问题&#xff1a;当比赛数据越来越多、…

【前端】react大全一本通

定期更新&#xff0c;建议关注收藏点赞。 内容源自本人以前的各种笔记&#xff0c;这里重新汇总补充一下。 目录 简介生命周期函数PWA&#xff08;渐进式Web应用&#xff09; 使用教程JSX&#xff08;JavaScript XML&#xff09;虚拟DOM 简介 React.js 是一个帮助你构建页面 U…