1. 基本信息
{"name": "my-vue-app","version": "1.0.0","description": "A Vue.js project","author": "Your Name <your.email@example.com>","license": "MIT"
}
name
: 项目名称,通常是小写字母,可以包含连字符。version
: 项目版本号,遵循 语义化版本控制(如 1.0.0
)。description
: 项目描述,简要说明项目用途。author
: 项目作者信息。license
: 项目使用的开源许可证。
2. 依赖项
dependencies
"dependencies": {"vue": "^3.2.0","vue-router": "^4.0.0","axios": "^0.27.2"
}
- 作用: 定义项目运行时需要的依赖包。
- 用法: 使用
npm install <package>
或 yarn add <package>
添加依赖。 - 示例:
vue
: Vue 核心库。vue-router
: Vue 的路由管理库。axios
: HTTP 请求库。
devDependencies
"devDependencies": {"@vue/cli-service": "^5.0.0","eslint": "^8.0.0","webpack": "^5.0.0"
}
- 作用: 定义开发环境所需的依赖包,这些包不会被打包到生产环境中。
- 用法: 使用
npm install <package> --save-dev
或 yarn add <package> --dev
添加开发依赖。 - 示例:
@vue/cli-service
: Vue CLI 提供的服务工具。eslint
: JavaScript 代码检查工具。webpack
: 模块打包工具。
3. 脚本命令
"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "eslint --ext .js,.vue src"
}
- 作用: 定义快捷命令,用于运行常见的任务。
- 用法: 使用
npm run <script-name>
或 yarn <script-name>
执行脚本。 - 示例:
serve
: 启动本地开发服务器。build
: 构建生产环境代码。lint
: 检查代码风格和潜在错误。
4. 浏览器兼容性
"browserslist": ["> 1%","last 2 versions","not dead"
]
- 作用: 定义目标浏览器范围,影响 Babel 和 PostCSS 等工具的行为。
- 用法: 配置支持的浏览器版本。
- 示例:
"> 1%"
: 支持全球使用率大于 1% 的浏览器。"last 2 versions"
: 支持每个浏览器的最近两个版本。"not dead"
: 排除已经停止维护的浏览器。
5. 私有标志
"private": true
- 作用: 标记项目为私有项目,防止意外发布到 npm。
- 用法: 设置为
true
表示项目不对外公开。
6. 引擎要求
"engines": {"node": ">=14.0.0","npm": ">=6.0.0"
}
- 作用: 指定项目所需的 Node.js 和 npm 版本。
- 用法: 在安装依赖或运行项目时,会检查当前环境是否符合要求。
7. 入口文件
"main": "src/main.js"
- 作用: 指定项目的入口文件。
- 用法: 通常指向
src/main.js
或其他主入口文件。
8. 其他字段
keywords
"keywords": ["vue", "frontend", "spa"]
repository
"repository": {"type": "git","url": "https://github.com/username/my-vue-app.git"
}
homepage
"homepage": "https://example.com"
bugs
"bugs": {"url": "https://github.com/username/my-vue-app/issues"
}