• 一、vue3.0 项目结构解析

一、vue3.0 项目结构解析

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

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

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

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

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