Vue.js 基础教程

original icon
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.knowledgedict.com/tutorial/vue-install.html

Vue.js 所有安装方式详解


Vue.js 有多种安装方式,具体取决于您的项目需求和偏好。

通过 CDN 链接引入

这是最简单的方式,适用于快速原型设计或学习。您可以在 HTML 文件中引入 Vue.js 的 CDN 链接。

<!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

然后,您可以在页面的 <script> 标签中编写 Vue.js 代码。

<div id="app">
  {{ message }}
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue.js!'
    }
  });
</script>

通过 Vue CLI 安装

Vue CLI 是一个官方的命令行工具,用于快速搭建 Vue.js 项目。

首先,您需要全局安装 Vue CLI。使用以下命令:

npm install -g @vue/cli

然后,创建一个新的 Vue 项目:

vue create my-project

进入项目目录:

cd my-project

最后,运行开发服务器:

npm run serve

这会自动创建一个 Vue.js 项目,包括项目结构、依赖和开发服务器。

通过 npm 安装

如果您正在使用现有的项目,可以使用 npm 安装 Vue.js。

npm install vue

然后,您可以在项目中的 JavaScript 文件中导入 Vue.js。

import Vue from 'vue';

接下来,您可以创建 Vue 实例并使用它构建应用程序。

通过 Vite 安装

Vite 是一个更轻量级的打包工具,可以选择它来创建 Vue 项目:

npm init vite my-project -- --template vue

总结

无论您选择哪种安装方式,Vue.js 都会使您能够构建交互性强、响应式的前端应用程序。选择最适合您需求的方式,并根据您的项目需求编写相应的代码。