01. 前端Vue3 框架的快速搭建以及项目工程的讲解

1854 字约 4 分钟读完15797 次阅读更新于 2026/5/3

安装软件 NodeJS

vue3推荐使用 nodejs v22.13.1 （up 使用的版本，肯定没错）

npm 版本：10.9.2

npm 使用之前一定要配置淘宝镜像：

npm config set registry https://registry.npmmirror.com

查看镜像：

npm config get registry

搭建 Vue工程

Vue官网：https://cn.vuejs.org/

快速上手：https://cn.vuejs.org/guide/quick-start.html

运行命令创建 Vue 工程：

npm create vue@latest

通过交互式的指令去创建 Vue3 工程

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

cd vue
npm i
npm run dev

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

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

vue 工程精简

删除无用的文件

在 idea 里面启动 vue 工程

HomeView.vue 改名成** Home.vue**

<template>
  <div>
    主页
  </div>
</template>

<script setup>

</script>

App.vue 删除无用的代码：

<template>
  <RouterView />
</template>

router.js 删除无用的代码：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    { path: '/', name: 'home', 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'

路由配置

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

定义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.jpg" alt="">
      <div style="text-align: center; padding: 20px 0; font-size: 20px;"><a style="color: #3741fb" href="/">返回主页</a></div>
    </div>
  </div>
</template>