Vue项目创建及main.js\App.vue\index.js文件作用

创建vue项目

已经安装好node.js和vue

• 打开cmd，检查是否都安装好，执行命令

F:\webStormProjects\flask_vue>node -v
v21.3.0

F:\webStormProjects\flask_vue>npm -v
10.2.4

F:\webStormProjects\flask_vue>vue -V
@vue/cli 5.0.8

• 利用vue脚手架创建一个vue项目

先进入到自己项目的目录下，然后执行命令vue create yourProject(你的项目名)

选择Vue3，然后等待创建完成

然后进入到你的项目目录下，在cmd中执行npm install命令，进行相关依赖包安装。

• 在你的项目文件夹下执行命令npm run serve，启动项目。
• 
• Vue有一些主要的文件：
• 其中，components主要是存放组件的，router存放路由文件，node_modules是存放需要用的模块的。

main.js

(1)项目的入口文件，执行的时候都是从你的 main.js 从上到下的执行的

（2）创建Vue实例，这个实例是Vue应用的根实例，它将管理整个应用的状态、数据和组件。

（3）导入应用中的各种组件，并在Vue实例中注册它们，以便在整个应用中使用.

（4）挂载vue实例。将Vue实例挂载到HTML文档的某个DOM元素上，这样Vue应用就会渲染到页面上

new Vue({  // 生成一个VUE实例

  render: function (h) { return h(App) },  // 渲染函数,将组件App渲染到挂载的元素上。
  router //管理路由
  
}).$mount('#app')  //这是将 Vue 应用挂载到 HTML 页面的一个id为app的 DOM 元素上的方法

App.vue

app.vue是根组件，是页面入口文件，是vue页面资源的首加载项。所有的页面都是在app.vue中进行切换的。可以理解为所有的路由都是app.vue的子组件。

它定义了整个应用的结构、样式和一些全局行为。在 App.vue 中定义的内容会在整个应用中保持一致性，同时通过 Vue Router 等方式动态加载不同页面的内容。

index.js

在Vue3中，这个文件是要自己创建的。

router文件夹下的index.js文件是Vue Router的配置文件。它的主要作用是定义路由的映射关系，即将URL路径映射到对应的视图组件。在这个文件中，我们可以配置路由的路径、组件、子路由等信息。也可以自己新建一个router.js 来定义配置文件，但是不能删除index.js，删除了这个文件，将丧失路由功能，导致无法进行页面跳转和导航。