一、项目创建
1、首先，我们从创建一个新的vue项目开始，在你的某个文件夹下
vue init webpack vueProject
输入命令之后会有问题弹出，自己根据需要选择
2、项目启动
创建完成之后，切换到vueProject目录下，使用 npm run dev启动：
访问箭头所指链接，出现下图，则说明启动成功
二、了解项目结构
1、一个 Vue 3 项目通常包含以下文件和文件夹：
vueProject/ ├── node_modules/ # 项目依赖的第三方库 ├── public/ # 静态资源文件夹 │ ├── index.html # 应用的 HTML 模板 │ └── ... # 其他静态资源（如图片、字体等） ├── src/ # 项目源代码 │ ├── assets/ # 静态资源（如图片、字体等） │ ├── components/ # 可复用的 Vue 组件 │ ├── views/ # 页面级组件 │ ├── App.vue # 根组件 │ ├── main.js # 项目入口文件 │ ├── router.js # 路由配置 │ ├── store.js # Vuex 状态管理配置 │ └── ... # 其他配置和资源 ├── package.json # 项目配置和依赖管理 ├── package-lock.json # 依赖的精确版本锁定文件 └── README.md # 项目说明文档
2、执行流程
整个项目的主文件是index.html，index.html会引入src文件夹中的main.js文件,main.js文件会导入顶级单文件组件App.vue文件,App.vue文件会通过组件嵌套或者路由来引用components文件夹中的其他单文件组件。
三、核心文件解析
1、public/index.html
public/index.html 是 Vue 应用的 HTML 模板文件。
Vue 会将应用挂载到 <div id="app"></div> 中。
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vue App</title></head><body><div id="app"></div></body>
</html>2、src/main.js
src/main.js 是 Vue 应用的入口文件。
src/main.js 负责创建 Vue 应用实例，并将根组件（通常是 App.vue）挂载到 index.html 中的 div#app 中。
import { createApp } from 'vue';
import App from './App.vue';createApp(App).mount('#app');3、src/App.vue
src/App.vue 是 Vue 应用的根组件。
src/App.vue 通常包含应用的主要布局和路由视图。
<template><div id="app"><h1>Hello, Vue 3!</h1><router-view></router-view> <!-- 路由视图 --></div>
</template><script>
export default {name: 'App',
};
</script><style>
#app {text-align: center;margin-top: 50px;
}
</style>4、src/components/
src/components/ 文件夹包含可复用的 Vue 组件。
<template><div><h2>Hello, World!</h2></div>
</template><script>
export default {name: 'HelloWorld',
};
</script><style scoped>
h2 {color: blue;
}
</style>5、src/views/
src/views/ 文件夹包含页面级组件，通常与路由配置一起使用。
<template><div><h2>Home Page</h2></div>
</template><script>
export default {name: 'Home',
};
</script>6、src/router.js
src/router.js 是 Vue Router 的配置文件，用于定义路由。
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';const routes = [{path: '/',name: 'Home',component: Home,},
];const router = createRouter({history: createWebHistory(),routes,
});export default router;7、package.json
package.json 是项目的配置文件，包含项目的元数据、依赖和脚本。
{"name": "my-vue-app","version": "1.0.0","scripts": {"serve": "vue-cli-service serve", // 启动开发服务器"build": "vue-cli-service build", // 构建生产环境代码"lint": "vue-cli-service lint" // 代码格式化},"dependencies": {"vue": "^3.2.0","vue-router": "^4.0.0","vuex": "^4.0.0"}
}