详解文件 - packeg.json

package.json是一个项目描述文件, 是一个严格的json文件，里面记录了当前项目的信息。比如: 项目名称、版本、作者、gitHub地址、当前项目依赖哪些第三方模块等。

当我们需要向项目中添加额外的依赖时，其就会被记录到这个文件默认的模板工程中。

创建项目代码

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

若您是跟着代码一步步走来，packeg.json里面的文件应该是这样的

{
  "name": "my-vue-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.1.0",
    "vite": "^3.1.0"
  }
}

介绍

dependencies - 生成环境依赖

devDependencies - 开发环境依赖

• dev 使用HMR启动本地web服务器进行开发
• build 生成项目，并输出到文件夹。/dist
• preview 启动一个本地web服务器，该服务器从/dist为构建的解决方案提供预览服务

参考文章

• “vite”和“vite预览”有什么区别？