npm run dev和npm run serve

• 目录
• • 概述
  • • 需求：
  • 设计思路
  • 实现思路分析
  • • 1.npm install命令
    • 2.package.json
    • 3.npm run serve
• 参考资料和推荐阅读

Survive by day and develop by night.
talk for import biz , show your perfect code,full busy，skip hardness,make a better result,wait for change,challenge Survive.
happy for hardess to solve denpendies.

目录

概述

npm run dev和npm run serve的是一个非常常见的需求。

需求：

npm实际上是nodejs官方提供的包管理平台，npm提供了一个命令行工具npm-cli，在我们使用npm这个命令时，我们实际是通过node运行一个名为npm-cli.js的脚本

设计思路

实现思路分析

1.npm install命令

在构建项目时，通过npm install命令，会在项目目录下生成一个名为node_modules的文件夹

2.package.json

在package.json文件中，有一个scripts的字段

// 运行npm run serve的scripts字段"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"},

//运行npm run dev的scripts字段
"scripts": {"dev": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","webpack": "webpack --version"},

3.npm run serve

npm run serve的时候是运行vue-cli-service serv
node_modules文件夹的.bin文件

然不能直接运行vue-cli-service，但是我们在npm run的时候，会前往node_modules/.bin下找到vue-cli-service文件，然后将该文件作为脚本运行。

#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")case `uname` in*CYGWIN*) basedir=`cygpath -w "$basedir"`;;
esacif [ -x "$basedir/node" ]; then"$basedir/node"  "$basedir/../@vue/cli-service/bin/vue-cli-service.js" "$@"ret=$?
else node  "$basedir/../@vue/cli-service/bin/vue-cli-service.js" "$@"ret=$?
fi
exit $ret

@IF EXIST "%~dp0\node.exe" ("%~dp0\node.exe"  "%~dp0\..\@vue\cli-service\bin\vue-cli-service.js" %*
) ELSE (@SETLOCAL@SET PATHEXT=%PATHEXT:;.JS;=;%node  "%~dp0\..\@vue\cli-service\bin\vue-cli-service.js" %*
)

参考资料和推荐阅读

[1]. https://juejin.cn/post/7139045537864482853

欢迎阅读，各位老铁，如果对你有帮助，点个赞加个关注呗！~