安装NodeJS

推荐v22.13.1
npm v10.9.2
npm配置淘宝镜像

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

搭建Vue工程

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

运行命令创建Vue工程：

npm create vue@latest

仅勾选Vue Router

根据提示输入命令启动项目

cd vue-project
npm install
npm run dev

打开并启动项目

使用IDEA打开，去除以下不需要的文件

点击按钮再IDEA里启动Vue工程

精简项目文件

HomeView.vue改为Home.vue，内容改为如下

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

<script setup>

</script>

App.vue删除无用代码:

<template>
  <RouterView />
</template>

router/index.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：存放网页文件的目录
  • App.vue：vue页面全局的入口
  • main.js：代码的配置文件，引入第三方或自定义的一些组件、css、js等
• index.html：编译成网页才能在浏览器渲染
• jsconfig.json：内部配置文件
• package.json：定义依赖库的文件
• package-lock.json：下载依赖时锁定版本的文件
• vite.config.js：全局的配置文件

设置网页标题

全局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页面

views/404.vue

<template>
  <div style="height: 100vh;display: flex;justify-content: center;align-items: 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>
</script>

路由配置

router/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'),},
    { path: '/about', component: import('../views/About.vue'),},
    { path: '/notFound', component: import('../views/404.vue'),},
    { path: '/:pathMatch(.*)', redirect: '/notFound'}
  ],
})

export default router