Vue进阶之Vue CLI服务—@vue/cli-service Vuex

embedded/2024/11/29 1:02:36/

Vue CLI服务—@vue/cli-service & Vuex

  • @vue/cli-service
    • 初识
    • bin/vue-cli-service.js
      • 代码执行
      • 解读
  • Vuex
    • generator/index.js
    • store/index.js
    • 插件化的能力怎么引入呢?

@vue/cli-service

初识

第一块是上一个讲述的cli是把我们代码的配置项,各种各样的插件,npm包给你装好
第二块是这里的cli-service包是提供webpack配置

在cli的Creator中已经内置好了@vue/cli-service,就已经包含了cli-service这部分的webpack的配置

还是先看cli-service的package.json找到bin的入口文件

在这里插入图片描述

bin/vue-cli-service.js

代码执行

pnpm i

node vue-cli-service.js

在这里插入图片描述

解读

javascript">//首先引入service
const Service = require('../lib/Service')
//基于Service构造函数创建实例
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())const rawArgv = process.argv.slice(2)
//类似于代码压缩的效果,将无用的空格去掉,比如,vue-cli-service build --a     --b  --c 
const args = require('minimist')(rawArgv, {boolean: [// build// FIXME: --no-module, --no-unsafe-inline, no-clean, etc.'modern','report','report-json','inline-vue','watch',// serve'open','copy','https',// inspect'verbose']
})
const command = args._[0]service.run(command, args, rawArgv).catch(err => {error(err)process.exit(1)
})

平常npm run serve,npm run dev就是执行的是 vue-cli-service serve 和 vue-cli-service dev,最终真正执行的是 node bin/vue-cli-service.js run serve,本质上也就是Commander

run执行的代码,本质上就是针对webpack定制化,或者说webpack配置化的一个能力

javascript">async run (name, args = {}, rawArgv = []) {// resolve mode// prioritize inline --mode// fallback to resolved default modes from plugins or development if --watch is definedconst mode = args.mode || (name === 'build' && args.watch ? 'development' : this.modes[name])// --skip-plugins arg may have plugins that should be skipped during init()this.setPluginsToSkip(args, rawArgv)// load env variables, load user config, apply pluginsawait this.init(mode)args._ = args._ || []let command = this.commands[name]if (!command && name) {error(`command "${name}" does not exist.`)process.exit(1)}if (!command || args.help || args.h) {command = this.commands.help} else {args._.shift() // remove command itselfrawArgv.shift()}const { fn } = commandreturn fn(args, rawArgv)}

而cli-service包就是创建webpack的过程,generator中的内容就是怎么去封装webpack.config.js的过程
在这里插入图片描述

下面的这个就是通过vue-cli创建的默认的模板,里面有标识符,就是ejs模板化语言,在开发中称之为生成模板的过程,使用的就是ejs(嵌入式的js)
在这里插入图片描述

Vuex

以Vuex为例,只要提供generator能力,我们就能使用插件化的能力给解析好

generator/index.js

  • vue-cli
    • packages
      • @vue
        • cli-plugin-vuex
          • generator
            • index.js

在这里插入图片描述

store/index.js

  • vue-cli
    • packages
      • @vue
        • cli-plugin-vuex
          • generator
            • template-vue3
              • src
                • store
                  • index.js

这里对应的就是Vue中Vuex的用法

javascript">import { createStore } from 'vuex'export default createStore({state: {},getters: {},mutations: {},actions: {},modules: {}
})
  • vue-cli
    • packages
      • @vue
        • cli-plugin-vuex
          • index.js

这里是一个入口的返回

javascript">module.exports = (api, options = {}) => {}

目的就是能够使用插件化的能力将其引入进去

vue add vuex

使用这样的命令实现插件化的能力

插件化的能力怎么引入呢?

vue add vuex

  • vue-cli

add是通过引入lib下的add文件来添加插件的

javascript">program.command('add <plugin> [pluginOptions]').description('install a plugin and invoke its generator in an already created project').option('--registry <url>', 'Use specified npm registry when installing dependencies (only for npm)').allowUnknownOption().action((plugin) => {require('../lib/add')(plugin, minimist(process.argv.slice(3)))})

add这里就是安装一个npm包的过程

  • vue-cli
    • packages
      • @vue
        • cli
          • lib
            • add.js
  1. 判断service的package.json
javascript">const servicePkg = loadModule('@vue/cli-service/package.json', context)if (servicePkg && semver.satisfies(servicePkg.version, '3.x')) {// special internal "plugins"if (/^(@vue\/)?router$/.test(pluginToAdd)) {return addRouter(context)}if (/^(@vue\/)?vuex$/.test(pluginToAdd)) {return addVuex(context)}}
  1. 安装上面说到的service的包
javascript">  log()log(`📦  Installing ${chalk.cyan(packageName)}...`)log()const pm = new PackageManager({ context })if (pluginVersion) {await pm.add(`${packageName}@${pluginVersion}`)} else if (isOfficialPlugin(packageName)) {const { latestMinor } = await getVersions()await pm.add(`${packageName}@~${latestMinor}`)} else {await pm.add(packageName, { tilde: true })}
  1. 然后找目录下的generator,生成generator目录下的文件
javascript">log(`${chalk.green('✔')}  Successfully installed plugin: ${chalk.cyan(packageName)}`)log()const generatorPath = resolveModule(`${packageName}/generator`, context)if (generatorPath) {invoke(pluginName, options, context)} else {log(`Plugin ${packageName} does not have a generator to invoke`)}

http://www.ppmy.cn/embedded/141309.html

相关文章

Hadoop分布式文件系统(一)——HDFS简介

目录 1. HDFS设计目标2. HDFS组件3. HDFS数据复制4. HDFS健壮性4.1 磁盘数据错误&#xff0c;心跳检测和重新复制4.2 集群均衡4.3 数据完整性4.4 元数据磁盘错误4.5 快照 5. HDFS数据组织5.1 数据块存储5.2 流水线复制5.3 文件的删除和恢复 参考 1. HDFS设计目标 1.错误检测和快…

C语言基于AVR单片机的电子万年历设计-附项目源码+论文

C语言基于AVR单片机的电子万年历设计 摘要 电子万年历是一种常见的电子设备&#xff0c;能够显示日期、时间和星期等信息。本文介绍了一种基于AVR单片机的电子万年历设计&#xff0c;使用C语言进行编程&#xff0c;通过集成RTC模块和LCD显示模块&#xff0c;实现了时间的精确…

Tomcat的工作模式是什么?

文章目录 单实例模式多实例模式集群模式 单实例模式 在单实例模式下&#xff0c;Tomcat运行在单个Java进程内&#xff0c;并且只有一个Tomcat实例&#xff0c;所有请求都被该实例处理。 多实例模式 在多实例模式下&#xff0c;Tomcat运行在多个Java进程内&#xff0c;每个To…

HarmonyOS Next元服务蒹葭动卡体验互动

各位大佬&#xff0c;纯血鸿蒙HarmonyOS NEX手机、平板&#xff0c;应用市场搜索“蒹葭动卡”即可体验&#xff0c;打开留言即可发表你的文学观点,谢谢互动。 您也可以通过以下方式&#xff0c;打开“蒹葭动卡”互动。

高级网络安全——SSL/TLS, HTTPS, VPN(week4)

文章目录 一、前言二、重点概念1. 安全外壳(SSH)2. SSH概述3. SSH-2的安全目标4. SSH传输层协议5. SSH密钥指纹6. SSH密钥指纹7. SSH-2算法SSH传输层协议8. SSH传输层协议Diffie-Hellman密钥交换9. SSH传输层协议Diffie-Hellman密钥交换10. SSH传输层协议Diffie-Hellman密钥交…

Spring Boot OA:构建企业级办公自动化平台

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了企业OA管理系统的开发全过程。通过分析企业OA管理系统管理的不足&#xff0c;创建了一个计算机管理企业OA管理系统的方案。文章介绍了企业OA管理系统的系统分析部…

计算机网络的功能

目录 信息交换 资源共享 分布式处理 可靠性增强 集中管理 信息交换 计算机网络最基本的功能之一是允许不同设备之间的数据通信。这包括电子邮件的发送和接收、即时消息的传递、文件传输等。通过网络&#xff0c;用户可以轻松地与全球各地的其他人进行沟通和协作。 信息交…

shell脚本基础学习_总结篇(完结)

细致观看可以&#xff0c;访问shell脚本学习专栏&#xff0c;对应章节会有配图https://blog.csdn.net/2201_75446043/category_12833287.html?spm1001.2014.3001.5482 导语 一、shell脚本简介 1. 定义&#xff1a; 2. 主要特点&#xff1a; 3. shell脚本的基本结构 4. S…