当前位置: 首页 > news >正文

前端VUE3框架的快速搭建

前端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>

相关文章:

  • 【僵尸进程】
  • CSS通过webkit-scrollbar设置滚动条样式
  • 动态内存分配和释放时需要注意哪些问题
  • 链表和STL —— list 【复习笔记】
  • C#中级教程(2)——走进 C# 面向对象编程:从基础到进阶的深度探索
  • KEPServerEX 如何配置Dcom说明文档
  • 【深度学习量化交易15】基于miniQMT的量化交易回测系统已基本构建完成!AI炒股的框架初步实现
  • 如何手动设置u-boot的以太网的IP地址、子网掩码、网关信息、TFTP的服务器地址,并进行测试
  • 3分钟idea接入deepseek
  • 归并排序 Listnode* vector<int> vector<ListNode*>
  • CentOS-7-x86_64-Minimal-2009 免费下载与使用教程
  • 第二篇:MySQL安装与配置(基于小皮面板(phpstudy))
  • 易飞报错:输入的库位并不存在,请重新输入
  • 基于大数据技术智能教学系统的设计与实现
  • QString是 Qt 框架中的一个核心类,基本用法使用:创建、字符串拼接、截取、查找、替换、分割、大小写转换、比较。
  • 基于ffmpeg+openGL ES实现的视频编辑工具-添加背景音乐(十一)
  • 高速差分信号的布线
  • 【单片机毕业设计14-基于stm32c8t6的智能宠物养护舱系统设计】
  • 380v三相电的相序检测,缺相检测,相序保护
  • javaw.exe是什么进程?
  • 中方发布《不跪!》视频传递何种信息?外交部回应
  • 新一届中国女排亮相,奥运冠军龚翔宇担任队长
  • 黄永年:说狄仁杰的奏毁淫祠
  • 央行副行长:增强外汇市场韧性,坚决对市场顺周期行为进行纠偏
  • AI应用大盘点:谁暴涨?谁掉队?
  • 国务院同意在海南全岛和秦皇岛等15个城市(地区)设立跨境电子商务综合试验区