创建 Vue 传统项目

最后更新时间：20240 年 05 月

在 SnapDevelop IDE 中，您可以通过传统编码创建一个 Vue.js 前端 Web 应用程序。

传统项目指的是传统编码项目。如果你想创建可视化设计器项目，请参考创建 Vue Web 应用程序设计器项目。

前提条件

安装组件

SnapDevelop 安装程序将自动安装 Vue.js 前端 Web 应用程序项目所需的组件和环境。

配置网络环境

如需通过 Vue CLI 客户端创建项目的话，请确保当前机器可以连接互联网，以便 1）可以成功下载及安装 Vue CLI 客户端；2）可以成功从 NPM 源站点下载软件包。

如果是通过代理连接互联网的话，请首先确认代理正常工作，而且例外列表中没有排除掉 NPM 源相关的站点。然后通过 NPM 命令设置代理 IP 和端口，例如：npm config set proxy=“http://[ProxyIP]:[Port]/”。

如果网络连接正常，但仍然提示 “Failed to get response from https://registry.npmjs.org/vue-cli-version-marker ...” 错误，请尝试重新启动 SnapDevelop IDE后，再新建 Vue 项目。

设置脚本执行权限

运行 Live Server 时，要求当前用户的 ExecutionPolicy 是 RemoteSigned。如果当前用户不是管理员的话，请联系管理员帮忙设置当前用户的 ExecutionPolicy 为 RemoteSigned，否则运行 Live Server 时会提示以下错误：

检查 Node.js 版本

在 SnapDevelop 中创建 Vue 项目时要求使用Node.js v20.11.1。

SnapDevelop 安装程序默认安装的 Node.js 版本为v20.11.1。

但是如果您在机器上重新安装或升级了 Node.js 版本，您可以在终端窗口中输入命令： node -v 查看 Node.js 当前版本。

创建项目

您可以创建以下三种类型的 Vue.js Web 应用程序项目：

Vue2 -- 使用 SnapDevelop 默认自带的 Vue2 项目模板来生成项目。优点是快速、可控；缺点是可能有不兼容问题。
Vue3 -- 使用 SnapDevelop 默认自带的 Vue3 项目模板来生成项目。优点是快速、可控；缺点是可能有不兼容问题。
Vue CLI -- 使用 Vue CLI 来生成项目。优点是兼容性强；缺点是生成过程较慢。注意：1）如机器上没安装 Vue CLI 客户端，在您选择 Vue CLI 创建 Vue 项目时将被提示安装，2）请确保当前机器可以连接互联网，以便可以成功下载和安装 Vue CLI 以及从 NPM 源站点下载最新的软件包。

创建 Vue2/Vue3 项目

如需创建一个 Vue2 或 Vue3 项目：

在 SnapDevelop IDE 中，选择菜单文件 > 新建 > 新建项目。
在 新建项目 窗口中，选择 传统编码 页面，然后选择 Vue，点击 下一步。
指定项目的名称和位置。点击 下一步。
从类型下拉列表中选择 Vue2 或 Vue3 （Vue CLI 在下一小节中讨论）。然后点击创建。

您可以在输出窗口中查看安装进度。Vue 项目将被创建并显示在解决方案资源管理器中。整个过程可能需要几分钟时间。请耐心等待，直到 Vue 项目中 依赖包 节点下的所有包图标变成红色（，表示已下载完成；如果为灰色（）则表示下载中）。

创建 Vue CLI 项目

如需创建一个 Vue CLI 项目：

在 SnapDevelop IDE 中，选择菜单文件 > 新建 > 新建项目。
在 新建项目 窗口中，选择 传统编码 页面，然后选择 Vue，点击 下一步。
指定项目的名称和位置。点击 下一步。

注意：Vue CLI 工具要求项目名称只能包含小写字母。
从类型下拉列表中选择 Vue CLI。然后点击创建。

如您的机器上没有安装 Vue CLI 客户端，您将被提示安装 Vue CLI 工具。请点击确认安装 Vue CLI 工具。这将执行 npm install @vue/cli 命令安装 CLI 工具。请确认当前机器可以连接互联网，并耐心等待 Vue CLI 工具安装完成。
在 Vue CLI 工具安装完成后，Vue CLI 窗口将打开。请通过上下箭头选择 Vue2 或 Vue3 模板，然后按回车键。

Vue CLI 将创建项目并从 NPM 源站点下载最新的软件包。Vue 项目被创建后将显示在解决方案资源管理器中。整个过程可能需要几分钟时间。请耐心等待，直到 Vue 项目中 依赖包 节点下的所有包图标变成红色（，表示已下载完成；如果为灰色（）则表示下载中）。

导入项目

您还可以将第三方开发工具中创建的 Vue 应用导入到 SnapDevelop 中。

在 解决方案资源管理器 中，右键点击解决方案节点，然后选择添加 > 从文件夹导入 Web 项目。项目将会按照 Vue 应用的文件目录结构导入。然后您可以右键点击项目文件夹，选择保存为项目文件，这将会自动生成 SnapDevelop 的 Vue 项目文件和解决方案文件。您可以继续在第三方开发工具或 SnapDevelop 中开发该应用。

安装 Node 包

在 解决方案资源管理器 的项目中的 依赖包 节点下面，您可以看到当前项目的依赖，并且可以安装、卸载、以及更新这些软件包。

依赖包项前面的红色图标（）表示该项已下载完成，灰色图标（）表示该项未下载或下载中。

如您右键点击项目中的 依赖包 节点，然后选择 安装新的 Node 包，将打开Node 包管理器。

Node 包管理器提供了可视化的包管理方案，您可以在界面上查找/安装/卸载/更新自己需要的包，而不需要登录 NPM 或者其他包源的官网。您还可以通过右上角切换包源。有关 Node 包管理器的使用说明，请参考使用 Node 包管理器。

预览项目

如需预览整个 Vue 应用程序，您可以在 解决方案资源管理器 中右键点击项目节点，然后选择 Web 预览窗口。

在 IDE 底部的终端窗口中将打开一个 内置 Web 浏览器 页面。在该页面中您可以查看执行过程和结果（启动开发服务器以及编译项目）。同时 Web 预览 窗口将打开。在编译完成之前，Web 预览 窗口将无法预览到页面，并且会显示访问出错的信息。只有当编译完成后，Web 预览 窗口才会自动刷新打开项目的页面。

如果需要预览某个 Web 页面，您必须先编译项目，然后预览 dist 目录里的 Web 页面。您可以在编译完成后展开 dist 目录，右键点击想要预览的页面，然后选择 通过 Live Server 启动。

如您的机器上没有安装 Live Server 工具，您将被提示安装此工具。请点击确认安装。请确认当前机器可以连接互联网，并耐心等待 Live Server 工具安装完成。

在 Live Server 安装完成后，终端窗口中将打开一个 live-server 页面，在此页面中可以看到 Live Server 的本地服务是否启动。如服务启动，Web 页面将在默认的 Web 浏览器中打开。

编译项目

如需编译 Vue.js Web 应用程序项目，请选择菜单编译 > 编译解决方案 来编译当前解决方案中的所有项目。或者在 解决方案资源管理器 中，右键点击解决方案节点，然后选择 编译解决方案。

在 IDE 底部的输出窗口您可以查看编译进度和结果。

编译完成后，项目中将新增一个 dist 目录，包含了所有编译后的 Web 应用程序文件。您需要手工部署应用。

右键点击项目然后选择属性，您可以配置 Vue 应用程序的启动方式和编译属性，详情请参阅配置 JavaScript/TypeScript 项目属性。

调试项目

暂不支持调试 Vue 项目。

运行项目

运行 Vue2/Vue3 项目

在工具栏中选择要运行的项目，然后点击启动按钮的下拉图标，选择启动方式。

内置浏览器 – 执行 vue-cli-service serve 命令（包括：启动开发服务器，编译用于开发环境的应用包），自动启动内置浏览器并访问应用 URL。该命令和预览项目中的命令一样。使用此命令，您可以在浏览器的页面中实时看到您在 Vue 脚本中做的任何更改。
npm run serve – 执行 vue-cli-service serve --open 命令，包括：启动开发服务器，编译用于开发环境的应用包，打开默认的 Web 浏览器并访问应用URL。使用此命令，您可以在浏览器的页面中实时看到您在 Vue 脚本中做的任何更改。
npm run build – 执行 vue-cli-service build 命令，包括：编译用于生产环境的应用包。该命令并不会启动服务器以及部署应用。您需要手工部署应用。该命令和编译项目中的命令一样。
npm run lint – 执行 vue-cli-service lint命令，包括：检查整个项目是否符合 eslint 语法规范。如果想查看项目的所有警告和错误信息，建议执行 lint 命令。如果不执行 lint，直接执行 build 或 serve，build 或 serve 命令有自带 eslint 语法修复功能，但只会在对刚修改的页面进行检测，不会对所有项目文件进行检测。

当您选择以上任意一种启动方式时，在 IDE 底部的终端窗口中将打开一个对应页面。在该页面中您将看到命令的执行过程和结果。上述启动方式的名称和命令可以在项目的 package.json 文件中（详情请参考修改 package.json 文件）或在项目属性页面中（详情请参考修改项目属性）进行配置和修改。

下图为选择 npm run serve 启动方式时 Vue2 应用的运行结果。

运行 Vue CLI 项目

在工具栏中选择要运行的项目，然后点击运行按钮的下拉图标，选择启动方式。

内置浏览器 – 执行 vue-cli-service serve 命令（包括：启动开发服务器，编译用于开发环境的应用包），自动启动内置浏览器并访问应用 URL。该命令和预览项目中的命令一样。使用此命令，您可以在浏览器的页面中实时看到您在 Vue 脚本中做的任何更改。
npm run serve – 执行 vue-cli-service serve 命令，包括：启动开发服务器，编译用于开发环境的应用包。执行完该命令后，您可以直接打开浏览器访问应用URL。使用此命令，您可以在浏览器的页面中实时看到您在 Vue 脚本中做的任何更改。
npm run build – 执行 vue-cli-service build 命令，包括：编译用于生产环境的应用包。该命令并不会启动服务器以及部署应用。您需要手工部署应用。该命令和编译项目中的命令一样。
npm run lint – 执行 vue-cli-service lint命令，包括：检查整个项目是否符合 eslint 语法规范。如果想查看项目的所有警告和错误信息，建议执行 lint 命令。如果不执行 lint，直接执行 build 或 serve，build 或 serve 命令有自带 eslint 语法修复功能，但只会在对刚修改的页面进行检测，不会对所有项目文件进行检测。