• vue serve及其与vue-cli-service serve之间的关系

    vue serve及其与vue-cli-service serve之间的关系

    目录

    vue serve及其与vue-cli-service serve之间的关系

    一、前言

    二、vue命令

    三、package.json的preset预置的配置命令参数

    3.1、依赖与开发依赖

    3.2、@vue/cli-service 的内部

    3.3、vue -***命令如何跑起来

    四、vue -***命令详解

    4.1、vue 命令帮助

    4.2、vue 命令做 组件级别单元测试

    五、关于很少被人使用的npm run inspect

    一、前言

            近日群里，总是是不是得，群友爆料关于“ vue命令 ”和“ vue-cli-service ”不能执行的问题，如下，需要如何做本机“ 部署 ”和在怎样的条件下，它们才能执行呢：

            另外，对二者的关系，做一个浅析。

    二、vue命令

    1. F:\VueExts\front-study\搭建工程\my-site>
    2.  
    3. vue serve src\components\Avatar.vue
    4.  
    5.   Command vue serve requires a global addon to be installed.
    6.   Please run npm install -g @vue/cli-service-global and try again.
    7.  
    8.

            意思是说，你要单独使用 “vue serve”这个工具的话，它需要作为工具而在当前工程的上下文中“安装”1个@vue/cli的服务的“ CLI命令行工具 ”，安装命令格式为：

    npm install -g @vue/cli-service-global

            它就是@vue/cli 系统中的关键项------"服务工具包"；

       注意，“脚手架”工具 和 “服务工具包”是有区别的：

        1、“脚手架”工具@vue/cli，简称CLI

        1.1、安装命令：

            卸载现有版本npm uninstall @vue/cli -g

            安装指定版本npm install -g @vue/cli@4.5.0

        1.2、作用：

            ◆实现的交互式的“人机会话”，来对vue进行操作

    （具体vue -***命令见后续所述；包括 vue ui 执行相关管理仪表盘）

        1.3、性质：是一个全局安装的 npm 包，提供执行类似vue -***命令的支持

            是“设计时”的工具。

        2、“服务”工具@vue/cli-service-global，简称CLI的服务

        2.1、安装命令：

            npm install -g @vue/cli-service-global  # 与“所创建或配置”的项目匹配的版本，在当前注册存储库中-g全局搜寻

            npm install -g @vue/cli-service-global@4.5.19 #安装某个指定版本

        2.2、作用：

            ◆构建webpack和webpack-dev-server之上，打通与node.exe可执行进程之间的通讯；

            ◆通过node内置的npm包管理器，通过“npm run”执行vue-cli-service脚本和serve、build、inspect脚本命令，全靠它，来提供进程间通讯；

            ◆vue要家在别的三方Loader，必须通过它；

            ◆内置了经过优化的特定版本(与通过@vue/cli创建的项目或配置的原型项目的版本相关)的webpack(默认，vue2内置webpack3.X，vue3内置webpack4.X以上；除非“配置原型”指定package.json的属性值)

        2.3、性质：是一个局部安装的 npm 包，

            是“运行时”的工具；

            需要“局部安装”在每一个独立的 @vue/cli 创建的项目中。

            不要将项目依赖dependencies中的键值对 "vue": "^2.6.11", 两者混淆， "vue": "^2.6.11"是指的vue的产品的版本号，比如vue2或vue3的具体版本。

    三、package.json的preset预置的配置命令参数

    3.1、依赖与开发依赖

            下面对它大致说明如下：

    1.   "dependencies": {
    2.     /* 项目分发时其上下文涉及到的必要依赖项： */
    3.     "core-js": "^3.6.5",
    4.        /* ：JS模块化的标准库内核V3.*.*，现已发展到到ECMAScript2023版本 */
    5.     "vue": "^2.6.11", 
    6.        /* ：你事前配置好的vue项目的产生或最终构建输出的版本号及其依赖库 */
    7.        /*     ：如果package.json指定了它，将按照它来产生和构建工程 */
    8.     "vue-router": "^3.2.0" 
    9.        /* ：你事前配置好的该版本的vue的路由依赖插件 */
    10.        /*     ：如果package.json指定了它，将按照它来产生和构建输出该工程 */
    11.   },
    12.  
    13.   "devDependencies": {
    14.     /* 项目的上下文中的进行vue的“开发时”的开发依赖库： */
    15.     /* 通常我们“手工”在终端输入命令安装，一般都应当安装对应需要的如下的开发依赖： */
    16.     "@vue/cli-plugin-babel": "~4.5.0",
    17.     "@vue/cli-plugin-eslint": "~4.5.0",
    18.     "@vue/cli-plugin-router": "~4.5.0",
    19.       /* ：Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) ；
    20.          或 vue-cli-plugin- (社区插件) 开头；
    21.          无论Vue内置插件还是三方插件，均可以作为项目创建过程的构成，
    22.            或在后期加入到项目中。它们也可以被归成一组可复用的preset预置
    23.              (preset可通过package.json配置)。
    24.       */
    25.     "@vue/cli-service": "~4.5.0",
    26.       /* ：vue的服务的命令行工具，通过它才能:
    27.          1、发出vue -***的命令来；
    28.          2、vue create 你的工程名---按照其内置“模板产生器”创建1个新的“模板化”结构优化的工程
    29.           才能通过GUI指引选择安装的vue的版本依赖库
    30.          （安装完成后会覆盖上面的"dependencies": {}对象中的vue的版本属性） 
    31.          3、......其它功能详见下面的说明。
    32.       */
    33.  
    34.     "@vue/eslint-config-prettier": "^6.0.0",
    35.     "babel-eslint": "^10.1.0",
    36.       /* ：Babel 是一个工具链（可以理解为它也是js的运行时的编译器），
    37.              主要用于将采用 ES6+ 的语法编写的代码转换为向后兼容的 JS 语法，
    38.              以便能够运行在当前和旧版本的浏览器或其他环境中;
    39.            babel-eslint 是在babel包的技术上的子存储库，在其下进行eslint扩展：
    40.       */
    41.     "eslint": "^6.7.2",
    42.       /* ：ESLint是一个用来识别 ECMAScript 
    43.            并且按照规则给出报告的代码检测工具,
    44.            使用它可以避免低级错误和统一代码的风格
    45.       */
    46.     "eslint-plugin-prettier": "^3.3.1",
    47.     "eslint-plugin-vue": "^6.2.2",
    48.     "less": "^3.0.4",
    49.       /* ：less语法支持的module模块开发依赖 */
    50.     "less-loader": "^5.0.0",
    51.       /* ：将less语法按照“工程化模块化”预编译为css后并打包的“预处理器” 
    52.              vue内置的“css模块化与工程化”
    53.       */
    54.       /*   ：更多的其它“预编译器”(“预处理器”)，比如vue-loader ,
    55.              vue内置的“JS模块化与工程化”:
    56.                一个其内置了的webpack的loader，可将@vue/cli-service内部的template格式SFC
    57.                或其被引用的vue组件转换为纯JavaScript模块
    58.       */
    59.       /*   ：更多的其它第三方loader ---同1个目的：开发时组件的热重载、及自动打包输出 */
    60.     "prettier": "^2.2.1",
    61.       /* ：三方插件：提供代码美化及语法高亮等功能的插件 */
    62.     "vue-template-compiler": "^2.6.11"
    63.       /* ：vue的所有模板的编译器---开发时，将Vdom转化为真实DOM的内置编译器 
    64.              其中包含了 render、mount、patch过程，以支持开发时的“热重载”和运行时的“动态编译”
    65.       */
    66.   },
    1.     这些脚本，可以 用与node集成的npm的run命令来执行：
    2.     "scripts": {
    3.         // vue-cli-service 命令行脚本 ：
    4.         "serve": "vue-cli-service serve",
    5.         "build": "vue-cli-service build",
    6.         "inspect": "vue-cli-service inspect",
    7.         // 组件级别的 单元测试 脚本 :
    8.         "test:Pager": "vue serve ./src/components/Pager/test.vue",
    9.         // 组件级别-单元调试 根组件，这样是错误的：
    10.             "test:App": "vue serve ./src/App.vue",
    11.         // 组件级别-单元调试 根组件，正确的是调试“Entry入口文件”：
    12.             "test:main": "vue serve ./src/main.js",
    13.     }
    14.     当然，可以 用node原生命令，在环境配置无误及命令行语法无误的情况下 单独执行。

            如果package.json的预配置 无误，

            你还可以直接点击使用vscode的集成js调试终端：

                    JavaScript Debug Terminal ：

     

            或者使用集成的扩展调试：

                    NPM调试 快捷方式：

     

    3.2、@vue/cli-service 的内部

            bin\下是它的原始的js代码：

            vue-cli-service指令，它就是入口文件，然后被node.exe调用，然后分脚本关键词参数，向Service服务模块传递运行参数。

    3.3、vue -***命令如何跑起来

            因而，从原理上来讲，仅有@vue/cli是不够的，必须安装Service服务并配以 @vue/cli-service

            vue -***命令才跑得起来。

            generator\下是它的的“ template模板 ”发生器：

    四、vue -***命令详解

            此命令行为安装“ vue的脚手架工具 ”后，可以执行的vue 命令的用法。

    4.1、vue 命令帮助

    1. Usage: vue  [options]
    2.  
    3. Options:
    4.   -V, --version                              output the version number
    5.   -h, --help                                 output usage information
    6.  
    7. Commands:
    8.   create [options]                 create a new project powered by vue-cli-service
    9.   add [options]  [pluginOptions]     install a plugin and invoke its generator in an already created project
    10.   invoke [options]  [pluginOptions]  invoke the generator of a plugin in an already created project
    11.   inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
    12.   serve [options] [entry]                    serve a .js or .vue file in development mode with zero config
    13.   build [options] [entry]                    build a .js or .vue file in production mode with zero config
    14.   ui [options]                               start and open the vue-cli ui
    15.   init [options]