npm run dev和npm run serve

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"`;;
esac

if [ -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

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

你可能感兴趣的:(#,02.vue,学习教程,npm,前端,javascript)