vue.js安装

作者：嗜神魔影发布日期:2026-05-06 浏览:97

// Vue.js 安装示例代码

// 1. 使用 CDN 引入 Vue.js (适用于快速原型开发或学习)
// 在 HTML 文件中通过 <script> 标签引入 Vue.js
<!DOCTYPE html>
<html>
<head>
  <title>Vue.js 示例</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <!-- 引入 Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script>
    // 创建 Vue 实例
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    });
  </script>
</body>
</html>

// 2. 使用 npm 安装 Vue.js (适用于构建大型应用)
// 首先确保你已经安装了 Node.js 和 npm
// 打开终端并运行以下命令来安装 Vue.js
$ npm install vue

// 然后在你的 JavaScript 文件中通过 import 或 require 引入 Vue.js
import Vue from 'vue';

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

// 3. 使用 Vue CLI 创建项目 (推荐用于生产环境)
// 首先全局安装 Vue CLI
$ npm install -g @vue/cli

// 创建一个新的 Vue 项目
$ vue create my-project

// 进入项目目录并启动开发服务器
$ cd my-project
$ npm run serve

解释说明：

CDN 引入：适合快速学习和简单的原型开发。直接在 HTML 文件中通过 <script> 标签引入 Vue.js。
npm 安装：适合构建复杂的单页应用（SPA），使用模块化的方式管理和打包代码。
Vue CLI：Vue 提供的官方命令行工具，帮助你快速搭建项目结构，并提供丰富的配置选项，适合生产环境使用。

上一篇：vue3全局组件

下一篇：typescript vue