WebStorm 怎么编译 Vue 工程

最近一些工程项目，需要用到Vue，只能从头学一下。

目前使用的WebStorm，但是不知道怎么编译，还要下载Node.js，对这个不熟悉。

最终找到了编译方法：记录一下

1. 打包方法

1.1 在工程里面，package.json，点击右键，选择 显示npm脚本。然后点击build

1.2 菜单 --> 视图 --> 工具窗口 --> npm , 然后点击build

2. 命令说明

打开 package.json，内容如下

{
  // 省略代码 ……
  "scripts": {
    "dev": "vite",              // 启动开发服务器，别名：`vite dev`，`vite serve`
    "build": "vite build",      // 为生产环境构建产物
    "preview": "vite preview"   // 本地预览生产构建产物
  },
  // 省略代码 ……
}

可以看到，build 实际执行的命令是 vite build

同样，也可以再这里加入其他的一些自定义命令

3. vite 常用命令说明

3.1 直接执行 vite

在当前目录下启动 Vite 开发服务器。vite dev 和 vite serve 是 vite 的别名。

3.2 vite build

构建生产版本。

3.3 vite optimize

预构建依赖。

3.4 vite preview

本地预览构建产物。不要将其用作生产服务器，因为它不是为此而设计的。

3.5 vite inspect

查看 Vite 项目的配置和依赖信息。
输出：显示当前项目的 Vite 配置信息以及依赖项的版本信息。

3.6 vite upgrade：

升级当前项目中的 Vite 版本。
输出：检查可用的 Vite 版本，并提示是否进行升级。若确认升级，则将当前项目中的 Vite 包更新到最新版本。

3.7 vite create <project-name>

创建新的 Vite 项目，可以选择使用预设模板。
输出：根据指定的项目名称创建新的项目文件夹，并初始化一个 Vite 项目。

四、参考链接：

1. https://blog.csdn.net/weixin_40760196/article/details/79952652/

2. https://vitejs.dev/

3. https://cn.vitejs.dev/guide/