启动Vue项目的多种方式_或者使用_Vue.js应用程序的入口文件是main.js

作者：科技一枝花 | 发布时间：2025-06-07 |

启动Vue项目的多种方式

启动Vue项目有多种方法，其中最常见的是使用Vue CLI创建项目。此外，还可以直接在HTML中引入Vue库，或者使用CDN引入Vue库。

推荐方式：使用Vue CLI创建项目

Vue CLI是创建Vue项目的官方工具，它提供了一套完整的开发环境和工具支持，非常适合大多数开发场景。

使用Vue CLI创建项目的步骤

安装Node.js和npm

安装Vue CLI

创建新项目

启动开发服务器

安装Node.js和npm

确保你已经安装了Node.js和npm。你可以从Node.js官方网站下载并安装最新版本的Node.js，npm会自动安装。

安装Vue CLI

打开命令行工具，运行以下命令来全局安装Vue CLI：

npm install -g @vue/cli

创建新项目

安装完成后，运行以下命令来创建一个新的Vue项目：

vue create my-project

你可以将my-project替换为你希望的项目名称。Vue CLI会提示你选择一些项目配置选项，可以选择默认配置或自定义配置。

启动开发服务器

进入项目目录并启动开发服务器：

cd my-project

npm run serve

这将启动一个本地开发服务器，并在浏览器中自动打开项目。

直接在HTML中引入Vue库

对于快速测试或开发简单的Vue应用，可以直接在HTML文件中引入Vue库。

创建一个HTML文件

引入Vue库

编写Vue代码

创建一个HTML文件

创建一个名为index.html的文件，并添加基本的HTML结构：

<!DOCTYPE html>
<html>
<head>
  <title>Vue App</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>Hello Vue!</h1>
  </div>
  <script>
    new Vue({
      el: 'app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>
</html>

引入Vue库

在HTML文件的<head>部分或<body>部分引入Vue库，可以通过CDN方式引入。

编写Vue代码

在<div>标签内编写Vue代码，初始化Vue实例并绑定到DOM元素。

使用CDN引入Vue库

使用CDN引入Vue库的方式适合快速测试或开发简单的Vue应用。

在HTML文件中引入Vue库

编写Vue代码

引入Vue库

可以在HTML文件的部分或部分引入Vue库，通过以下CDN链接：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

编写Vue代码

在<div>标签内编写Vue代码，初始化Vue实例并绑定到DOM元素。

启动Vue项目有三种主要方式：使用Vue CLI创建项目、直接在HTML中引入Vue库、使用CDN引入Vue库。对于大多数开发者而言，推荐使用Vue CLI创建项目，因为它提供了全面的开发工具和最佳的开发环境。直接在HTML中引入Vue库和使用CDN引入Vue库适合快速测试和简单应用开发。

方法优点缺点

Vue CLI 提供最佳的开发环境和工具支持需要安装Node.js和npm

直接引入Vue库简单易行缺少工具和配置选项

使用CDN 无需安装，快速测试功能受限

方法	优点	缺点
Vue CLI	提供最佳的开发环境和工具支持	需要安装Node.js和npm
直接引入Vue库	简单易行	缺少工具和配置选项
使用CDN	无需安装，快速测试	功能受限

启动Vue项目的多种方式_或者使用_Vue.js应用程序的入口文件是main.js