vue教程：npm命令和package.json-马育民老师

# package.json

npm包配置文件，里面定义了 npm脚本，依赖包等信息

**注意：** 该文件出错，会导致项目出现bug，甚至无法运行

### 内容说明

```
{
  "name": "test",//包名
  "version": "0.1.0",//版本号
  "private": true,
  "scripts": {//脚本，下面有解释
    "serve": "vue-cli-service serve", //启动服务
    "build": "vue-cli-service build", //构建
    "lint": "vue-cli-service lint" //检查语法，会频繁提示语法错误，平时不用
  },
  "dependencies": {//生成环境依赖，在 node_module 目录下
    "core-js": "^3.6.5",
    "vue": "^2.6.11"//依赖vue
  },
  "devDependencies": {//开发环境依赖，在 node_module 目录下
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11" //解析.vue文件中的<template>标签
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}
```

# 启动服务命令

开启本地开发服务器，监控项目文件的变化，实时构建并自动刷新浏览器

```
npm run serve
```

**说明：**参数 `serve` 是 `package.json` 中的配置，如下图：

[![](https://www.malaoshi.top/upload/pic/vue/QQ20210113220123.png)](https://www.malaoshi.top/upload/pic/vue/QQ20210113220123.png)

# build命令

**项目开发时**，编写的是 `.vue` 文件，该文件只能在 **cli脚手架环境下运行**

**开发完成后**，要将 `.vue` 文件 **编译** 成 `.html`、`.css`、`.js` 文件，将这些文件交付给客户，或者部署到服务器上运行

**编译** 就是通过下面命令实现的：

```
npm run build
```

执行上面命令后，生成 的 `.html`、`.css`、`.js` 文件保存在 `dist` 目录

原文出处：http://www.malaoshi.top/show_1IXOtismpAg.html