Vue3.0+Element-plus项目框架搭建(二)：项目结构对比解析

想要进行项目的开发，那么首先我们需要先了解一下 vue3 项目的初始结构。

在这里我们把它和 vue2 的项目进行对比来去说明。

1. main.js
   1. 通过 按需导入的 createApp 方法来来构建 vue 实例；
   2. 通过 vue实例.use 方法来挂载插件（router、vuex）；
   3. 没有了 Vue 构造方法，无法再挂载原型；
2. App.vue
   1. 组件内部结构无变化，依然是
      1. tempalte
      2. script
      3. style
   2. <template> 标签中支持多个根标签；
3. store/index.js
   1. 通过 按需导入的 createStore 方法来来构建 store 实例；
   2. 无需再通过 Vue.use(Vuex) 的形式进行挂载；
4. router/index.js
   1. 通过 按需导入的 createRouter 方法来构建 router 实例；
   2. 通过 按需导入的 createWebHashHistory 方法来创建 hash 模式对象，进行路由模式指定；
   3. 无需再通过 Vue.use(VueRouter) 的形式进行挂载；
   4. routes 路由表的定义无差别；

综上所述，在 vue3 的初始化项目中，与 vue2 对比的最大差异其实就是两点：

1. vue3 使用 按需导入的形式 进行初始化操作；
2. <template> 标签中支持多个根标签；

我们主要了解了 vue3 项目的初始结构，通过了解我们也可以发现现在的项目中，存在很多的 无用代码，那么我们就需要 删除掉这些无用的默认代码，也就是进行 初始化项目 操作。