前端vue3框架的快速搭建

安装NodeJS

Vue3推荐使用nodejs v22.13.1
npm版本：10.9.2

（但我nodejs用的是v24.11.1，npm用的是v11.6.2，不过up主说nodejs最好用18以上的版本，或者最新的nodejs版本也是推荐的，所以应该没关系，嘿嘿！）

搭建Vue工程

Vue官网
运行命令行创建Vue工程：npm create vue@latest
通过交互式指令创建Vue3工程

在命令行根据提示运行命令

cd vue-gxr
npm install
npm run dev

打开运行后出现的网址： http://localhost:5173/

在CMD命令行里面按两次Ctrl+C可以关闭正在运行的Vue工程

精简Vue工程

删除无用文件

在idea里面启动Vue工程

点击按钮，启动Vue工程

HomeView.vue改名成Home.vue

<template><div>主页</div>
</template>
<script setup></script>

App.vue删除无用的代码：

<template><RouterView />
</template>

index.js

import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{ path: '/', component: import('../views/Home.vue'),},],
})export default router

main.js精简：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'const app = createApp(App)app.use(router)app.mount('#app')

Vue工程目录解读

node_modules:不是源码文件，这个是依赖包下载之后的存放目录
public：存放全局的静态文件，比如网页的icon
src

• assets：一般是存放代码引用的静态文件，比如：css、js、img
• components：存放Vue组件（可复用的代码块就叫组件）
• router：定义路由文件的目录
• views：存放Vue网页文件的目录
• App.vue：Vue页面的全局入口，所有Vue文件的父级
• main.js：代码的配置文件，引入第三方的组件或者我们自己定义的一些组件，如css、js等

index.html：vue编译成网页才能在浏览器渲染
jsconfig.json：内部配置文件
package.json：定义依赖库的文件
package-lock.json：在下载依赖的时候锁定版本的一个文件
vite.config.js：全局的配置文件
https://vitejs.cn/vite3-cn/guide/features.html

设置网页标题

全局css global.css

*{box-sizing: border-box;
}body{margin: 0;padding: 0;color: #333;font-size: 14px;
}a{text-decoration: none;
}

在main.js里面引入global.css

import './assets/css/global.css'

404页面定义

<template><div style="height: 100vh;display: flex;align-items: center;justify-content: center"><div style="width: 50%"><img style="width: 100%" src="@/assets/imgs/404.png" alt=""><div style="text-align: center;padding: 20px 0;font-size: 20px"><a style="color: blue" href="/">返回主页</a></div></div></div>
</template>
<script setup lang="ts">
</script>

路由配置

404页面路由配置

router/index.js

import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{ path: '/notFound', component: import('../views/404.vue'),},{ path: '/:pathMatch(.*)', redirect:'/notFound'},],
})export default router