1、创建项目
npm init vue@latest 是创建现代 Vue 3 项目的推荐方式，它提供了简洁的交互界面和合理的默认配置，支持按需选择功能模块，适合快速启动新项目。
2、项目初始化完成，可执行以下命令：
cd create-vue 来到创建的项目文件夹
npm install 初始化项目
npm run dev 启动项目
3、项目的基本结构
``````my-project/
├── node_modules/ # 依赖包
├── public/ # 静态资源
├── src/ # 源代码
│ ├── assets/ # 资源文件（如图片、样式）
│ ├── components/ # 组件
│ ├── router/ # 路由配置
│ ├── stores/ # 状态管理（Pinia）
│ ├── App.vue # 根组件
│ ├── main.js # 入口文件
│ └── index.css # 全局样式
├── .gitignore # Git忽略配置
├── package.json # 项目配置和依赖
├── README.md # 项目说明
└── vite.config.js # Vite配置文件
4、设置别名（可选） #### 修改 vite.config.js文件 。 这个文件我的常用修改如下：
import { fileURLToPath, URL } from 'node:url' //Node.js 内置模块，用于处理文件路径和 URL 转换
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools' //Vue 开发者工具插件，用于在浏览器调试 Vue 应用
// element-plus 按需引入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vite.dev/config/
export default defineConfig({
plugins: [ // Vite 插件数组
vue(),
vueDevTools(),
// element-plus 按需引入
AutoImport({
resolvers: [ElementPlusResolver()] //自动导入ref、reactive等组合式 API，以及 ElementPlus 的函数（如`ElMessage`）
}),
Components({
resolvers: [ElementPlusResolver()] //自动注册 ElementPlus 组件，无需手动导入
})
],
resolve: {
// 配置别名 **`resolve.alias`**：设置路径别名，简化导入语句
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
'@img':fileURLToPath(new URL("./src/assets/images",import.meta.url)),
'@style':fileURLToPath(new URL('./src/assets/styles',import.meta.url)),
'@com':fileURLToPath(new URL('./src/components',import.meta.url)),
'@v':fileURLToPath(new URL('./src/views',import.meta.url)),
'@u':fileURLToPath(new URL('./src/utils',import.meta.url)),
'@3d':fileURLToPath(new URL('./src/3d',import.meta.url)),
},
},
//### **开发服务器配置**
server:{
host:'0.0.0.0', //允许外部访问开发服务器（如局域网内的其他设备）
port:8080 //服务器监听端口
}
})
5、路由配置（需要选择### Vue Router） 没选的话可以通过npm下载
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/equipment',
name: 'Equipment',
component: () => import('@v/Equipment.vue')
},
{
path: '/warehouse',
name: 'Warehouse',
component: () => import('@v/Warehouse.vue')
},
{
path: '/environment',
name: 'EnvConfig',
component: () => import('@v/EnvConfig.vue')
},
{
path:'/',
component:() => import('@v/Home.vue')
},
{
path:'/Pop',
component:() => import('@com/Pop.vue')
},
{
path:'/Structure',
component:() => import('@com/Structure.vue')
},
]
})
export default router //将路由实例导出，以便在`main.js`中引入并挂载到 Vue 应用
createRouter：Vue Router 4 提供的函数，用于创建路由实例。createWebHistory：创建 HTML5 历史模式的函数，使用浏览器的 History API 实现单页面应用的路由切换（地址栏显示真实 URL，如https://example.com/equipment）。path：浏览器中显示的路径。name：路由的名称，用于编程式导航（如router.push({ name: 'Equipment' })）。component：该路径对应的 Vue 组件。- 动态路由：如果需要匹配动态参数（如用户 ID），可以使用
:id形式（例如path: '/user/:id'）
6、将路由实例导出，以便在main.js中引入并挂载到 Vue 应用
```1
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// 引入路由
createApp(App) .
use(router)
// 使用路由
.mount('#app')
```在 `App.vue` 中添加路由出口：
<template>
<div>
<RouterLink to="/">Home</RouterLink> |
<RouterLink to="/about">About</RouterLink>
<router-view />
</div>
</template>
<router-view>是 Vue Router 的内置组件，它是一个占位符，用于告诉 Vue 在何处渲染当前匹配路由对应的组件。当用户访问不同 URL 时，<router-view>会动态替换为对应的组件内容。
- 底层逻辑：
当调用use(router)时，Vue Router 会：- 监听浏览器的 URL 变化（通过
createWebHistory或createHashHistory）。 - 根据 URL 匹配路由配置中的
routes，确定需要渲染的组件。 - 将组件渲染到
<router-view>所在的位置。
- 监听浏览器的 URL 变化（通过
7、
