搭建vue前端项目

一、创建项目文件夹 demo

mkdir demo

二、创建package.json

模式1:交互模式(默认)

npm init

# 1 package name                项目名称(必须小写，不能有空格，可用连字符 -) 默认当前文件夹名称
# 2 version: (1.0.0)            项目版本号
# 3 description                 项目描述
# 4 entry point: (index.js)     项目文件入口(改为：src/main.js（Vite/Vue 项目的标准入口，之前配置的入口文件）)
# 5 test command                测试脚本命令（如 Jest、Mocha 测试，后续可配置）
# 6 git repository              项目的 Git 仓库地址
# 7 keywords                    项目关键词（用于 npm 搜索，逗号分隔)
# 8 author                      作者
# 9 license: (ISC)              开源许可证
# 10 About to ...:              展示配置预览 
# Is this OK? (yes)             确认配置是否正确

模式2:快速模式

npm init -y
# y 是 yes 的缩写,自动生成默认配置的 package.json，后续再手动修改需要调整的项（如入口文件、描述、关键词等）。

三、添加脚本命令

在 package.json 中添加 dev（开发启动）和 build（打包构建）脚本，对应 Vite 命令：

{
    "scripts": {
        "dev": "vite",             // 开发模式启动（对应之前的 npm run dev）
        "build": "vite build",     // 打包构建（对应之前的 npm run build）
        "preview": "vite preview"  // 预览打包后的文件（可选）
    }
}

• 执行 npm run dev 即可启动 Vite 开发服务，npm run build 生成 dist 打包文件