当前位置：首页 > news >正文

Vue的学习总结-day01

news 来源：原创 2025/6/25 4:16:14

一、项目创建

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"
  }
}