安装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