当前位置：首页 > article >正文

前端VUE3框架的快速搭建

article 2025/2/24 23:53:14

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