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