Vue CLI 项目集成 Vuexvue/cli-plugin-vuex 插件的安装、代码生成与 Vue 2/Vue 3 适配原理【免费下载链接】vue-cli️ webpack-based tooling for Vue.js Development项目地址: https://gitcode.com/gh_mirrors/vu/vue-cli本篇文章以 Vue CLI 官方仓库中的vue/cli-plugin-vuex插件文档docs/core-plugins/vuex.md为核心讲解如何在已有 Vue CLI 项目中通过vue add vuex一步完成 Vuex 状态管理的接入。文章将结合该插件在仓库中的生成器源码、模板文件与自动化测试深入拆解插件在 Vue 2 与 Vue 3 两种技术栈下的差异处理逻辑帮助读者既会用也懂为什么。读完本文你将掌握 Vue CLI 插件式架构下的 Vuex 安装全流程并能在项目里根据 Vue 主版本自行判断插件生成代码的正确形态。插件概览Vuex 以插件形式接入 Vue CLIVue CLI 采用插件化架构新建项目的package.json中所有以vue/cli-plugin-开头的依赖都是插件它们可以修改内部 webpack 配置、向vue-cli-service注入命令创建项目过程中列出的绝大多数功能选项也都由插件实现见 docs/core-plugins/index.md。vue/cli-plugin-vuex正是这一架构下的 Vuex 官方插件仓库中的描述为 vuex plugin for vue-cli。它不负责 Vuex 状态管理本身的运行逻辑那是 Vuex 库的职责而是负责把 Vuex 正确接入一个 Vue CLI 工程安装依赖、生成store目录与初始化代码、修改应用入口文件。从 packages/vue/cli-plugin-vuex/package.json 可以看到该插件当前版本为5.0.9其peerDependencies声明为vue/cli-service: ^3.0.0 || ^4.0.0 || ^5.0.0-0即它可以配合 Vue CLI 3.x、4.x 与 5.x 使用。与 Babel、TypeScript、ESLint 等插件不同Vuex 插件本身不注入任何vue-cli-service命令、也不修改 webpack 配置其插件入口 packages/vue/cli-plugin-vuex/index.js 是一个空实现module.exports (api, options {}) {}。它全部的实际工作都发生在生成器generator阶段这正是插件在创建/添加功能时执行的代码。这一点从源码结构上可以清晰推断。在已有项目中安装 Vuex官方文档给出的安装方式非常简单只需要一条命令vue add vuex在vue add执行时Vue CLI 会解析并加载vue/cli-plugin-vuex包然后运行其生成器完成以下工作在package.json的dependencies中写入vuex依赖版本视 Vue 主版本而定渲染src/store/index.js初始化文件修改应用入口文件默认src/main.js完成 Vuex 的注册与注入。vue add适用于任何已存在的 Vue CLI 工程——无论是通过vue create创建时未勾选 Vuex、还是后续需要补充状态管理能力都可以用这条命令补齐。该命令与创建项目时勾选 Vuex 功能见后文创建项目时勾选走的是同一套生成器逻辑。生成器源码解析Vue 2 / Vue 3 双分支插件真正的核心逻辑位于 packages/vue/cli-plugin-vuex/generator/index.js。该生成器接收三个参数apiGenerator API提供注入 import、渲染模板、扩展 package.json 等能力、options与rootOptions根选项包含vueVersion等项目级配置。生成器首先无条件执行一行注入api.injectImports(api.entryFile, import store from ./store)即在入口文件顶部引入生成的 store。随后根据rootOptions.vueVersion是否等于3走完全不同的两条分支。Vue 3 分支if (rootOptions.vueVersion 3) { api.transformScript(api.entryFile, require(./injectUseStore)) api.extendPackage({ dependencies: { vuex: ^4.0.0 } }) api.render(./template-vue3, {}) }依赖安装 Vuex 4.x^4.0.0这是 Vue 3 对应的 Vuex 大版本渲染 packages/vue/cli-plugin-vuex/generator/template-vue3/src/store/index.js 模板使用 Vue 3 组合式 API 风格import { createStore } from vuex export default createStore({ state: { }, getters: { }, mutations: { }, actions: { }, modules: { } })通过transformScript调用 packages/vue/cli-plugin-vuex/generator/injectUseStore.js 对入口文件做 AST 转换。injectUseStore.js基于 jscodeshift 实现它查找入口文件中的createApp(...)调用同时兼容Vue.createApp(...)的写法并把该调用替换为createApp(...).use(store)从而在应用实例上完成 Vuex 的注册。核心转换逻辑如下const appRoots root.find(j.CallExpression, (node) { // 匹配 createApp(...) 或 Vue.createApp(...) }) appRoots.replaceWith(({ node: createAppCall }) { return j.callExpression( j.memberExpression(createAppCall, j.identifier(use)), [j.identifier(store)] ) })这样src/main.js中类似createApp(App).mount(#app)的代码会被自动改写为createApp(App).use(store).mount(#app)。Vue 2 分支} else { api.injectRootOptions(api.entryFile, store) api.extendPackage({ dependencies: { vuex: ^3.6.2 } }) api.render(./template, {}) }依赖安装 Vuex 3.x^3.6.2即 Vue 2 配套版本不渲染独立的注册代码而是通过api.injectRootOptions把store追加到根组件选项根 Vue 实例的store字段中渲染 packages/vue/cli-plugin-vuex/generator/template/src/store/index.js采用 Vue 2 经典写法import Vue from vue import Vuex from vuex Vue.use(Vuex) export default new Vuex.Store({ state: { }, getters: { }, mutations: { }, actions: { }, modules: { } })Vue 2 与 Vue 3 分支的差异本质上是两个大版本 Vuex API 的差异Vue 2 需要Vue.use(Vuex)全局安装插件并new Vuex.Store(...)Vue 3 则使用createStore(...)工厂函数且注册方式从根选项注入变为app.use(store)。与 TypeScript 的协同生成器末尾还有一段针对 TypeScript 工程的兼容逻辑if (api.invoking api.hasPlugin(typescript)) { const convertFiles require(vue/cli-plugin-typescript/generator/convert) convertFiles(api) }即当通过vue add vuex在已启用 TypeScript 的项目中安装 Vuex 时会调用vue/cli-plugin-typescript生成器提供的convert函数把生成的模板文件转换为 TypeScript 版本。这一判断条件api.invoking表示在已有项目上执行vue add这一场景api.hasPlugin(typescript)则检测项目是否已安装 TypeScript 插件。需要注意的是转换功能要求vue/cli-plugin-typescript已在当前项目中因此跨插件调用通过require(vue/cli-plugin-typescript/generator/convert)按需加载。自动化测试插件行为的可验证依据仓库为插件行为编写了专门的单元测试 packages/vue/cli-plugin-vuex/tests/vuexGenerator.spec.js通过vue/cli-test-utils的generateWithPlugin工具模拟生成过程并断言产物base用例验证默认Vue 2场景生成的src/store/index.js存在且包含import Vuexpkg.dependencies中包含vuex依赖use with Vue 3用例将vueVersion设为3后验证src/store/index.js包含import { createStore }src/main.js包含.use(store)且pkg.dependencies.vuex匹配^4。这些断言与上文分析的生成器逻辑一一对应读者在升级或修改插件行为后可运行该测试快速回归验证。创建项目时勾选 Vuex除了vue add vuex在vue create创建项目并勾选 Features 时Vuex 也是一个可选项。从仓库结构可以看到创建流程的功能提示由 packages/vue/cli/lib/promptModules/vuex.js 提供勾选后会在生成阶段应用同一个vue/cli-plugin-vuex生成器。也就是说无论项目是创建时选中还是创建后补齐最终得到的src/store/index.js骨架与入口文件改动完全一致不存在两套初始化结果。小结vue/cli-plugin-vuex是一个典型的零运行时代码的 Vue CLI 插件运行时入口为空全部价值集中在生成器阶段——自动安装正确版本的 Vuex 依赖Vue 2 →^3.6.2Vue 3 →^4.0.0、渲染符合对应版本 API 的src/store/index.js骨架、并以根选项注入Vue 2或 jscodeshift AST 改写createApp().use(store)Vue 3的方式完成入口集成同时对 TypeScript 工程自动执行类型转换。实操时只需记住vue add vuex执行后检查三处产物即可确认接入成功package.json中新增vuex依赖、src/store/index.js存在、入口文件src/main.js已完成注册。后续在store/index.js的state、getters、mutations、actions、modules各区块中填充业务状态即可投入开发。如需深入了解 Vue CLI 插件生成器的通用 APIinjectImports、injectRootOptions、render、extendPackage、transformScript等可继续阅读 docs/dev-guide/generator-api.md若想了解其他核心插件Babel、TypeScript、ESLint、PWA 等的接入方式参见 docs/core-plugins/index.md。【免费下载链接】vue-cli️ webpack-based tooling for Vue.js Development项目地址: https://gitcode.com/gh_mirrors/vu/vue-cli创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考