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 都会使您能够构建交互性强、响应式的前端应用程序。选择最适合您需求的方式,并根据您的项目需求编写相应的代码。

Vue 项目通过 npm 及 vue 创建后,我们可以在 IDE(VSCode、IDEA、Eclipse、Atom 等) 中打开项目,下面详 ...
在开发过程中,我们经常会遇到动态添加类名或直接修改内联样式(例如 tab 切换)。 ...
在Java中执行JavaScript代码有几种方式,我将为你介绍其中的三种常见方式:使用Java的内置脚本引擎、使用第三方库GraalVMP ...
在这个例子中,我将展示如何创建一个基本的Django-Vue管理界面,其中Django作为后端API,而Vue.###步骤1:Django后 ...
Redis 官方只提供类 Unix 系统下的安装包,Windows 下需要到 github 相关的项目中下载。 ...