vuejs3.0 从入门到精通——初始化项目——项目入口

初始化项目——项目入口

引自: https://vuejs.org/guide/introduction.html#what-is-vue

  Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

  在大多数启用了构建工具的 Vue 项目中，我们可以使用一种类似 HTML 格式的文件来书写 Vue 组件，它被称为单文件组件 (也被称为 *.vue 文件，英文 Single-File Components，缩写为 SFC)。顾名思义，Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里。

  当你运行 npm run serve 命令时，实际上是在执行 npm run serve 命令在 package.json 文件中的定义。通常，这个命令会启动一个本地开发服务器，预览你的 Vue.js 应用。让我们一步步来分析这个过程。

  首先，我们需要理解 package.json 文件中的 scripts 部分。这部分定义了可以在命令行中执行的 npm 脚本。npm run serve 就是一个这样的脚本，通常它会被配置为运行一些用于本地开发的命令，比如启动一个本地服务器。

  在执行 npm run serve 的时候，npm 会查找 package.json 文件，并执行 scripts 部分中名为 "serve" 的命令。这个命令的具体内容，通常是由项目开发者定义的。

  具体来说，如果我们在 package.json 文件的 scripts 部分有如下内容：

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "serve": "vue-cli-service serve"
  },
  "dependencies": {
    "vue": "^3.0.0"
  }
}

  这里，我们可以看到 serve 命令是通过 vue-cli-service serve 命令来实现的。vue-cli-service 是 Vue CLI 的一个命令行工具，用于管理 Vue.js 项目。运行 `npm run serve` 命令后，以下是它所执行的主要操作：

1. 查找本地安装的 npm 包，并确保安装了所需的依赖项。

2. 在终端中显示一个信息，表示正在启动开发服务器。

3. 使用 vue-cli-service 开始打包构建 Vue.js 应用程序，包括编译和打包项目的所有文件。

4. 启动一个本地服务器，例如 http://localhost:8080/。

5. 在本地服务器上运行打包后的应用程序，以便在浏览器中进行访问和调试。

  在运行 npm run serve 后，您可以在浏览器中打开指定的 URL，访问您的应用程序并进行调试。同时，终端将一直处于运行状态，以便您随时可以检查和监视应用程序的构建和运行状态。