Vue.js 2和Vue.js 3：安装和基本用法

本文链接：https://blog.csdn.net/weixin_42132860/article/details/132605054

Vue.js是一款流行的JavaScript框架，用于构建交互性强大的前端应用。无论你是刚刚入门前端开发还是想要了解最新的Vue.js 3，本文将为你介绍如何安装和开始使用这两个版本。

安装Vue.js 2

首先，我们来看看如何安装Vue.js 2。

通过CDN引入：

你可以通过在HTML文件中引入Vue.js的CDN链接来开始使用Vue.js 2。

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

通过npm安装：

如果你使用npm作为包管理器，可以在你的项目中运行以下命令来安装Vue.js 2：

npm install vue@2

通过Vue CLI：

Vue CLI是一个官方提供的脚手架工具，它可以帮助你快速搭建Vue.js项目。首先，安装Vue CLI：

npm install -g @vue/cli

然后，创建一个新的Vue.js 2项目：

vue create my-vue2-project

基本用法：Vue.js 2

一旦安装完成，你可以创建Vue.js 2实例并开始构建你的应用。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js 2示例</title>
</head>
<body>

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

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue.js 2!'
  }
});
</script>

</body>
</html>

这个示例创建了一个Vue.js 2实例，并在#app元素中显示了一条简单的消息。

安装Vue.js 3

现在，让我们来看看如何安装Vue.js 3。

通过CDN引入：

你可以通过在HTML文件中引入Vue.js 3的CDN链接来开始使用Vue.js 3。

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

通过npm安装：

如果你使用npm作为包管理器，可以在你的项目中运行以下命令来安装Vue.js 3：

npm install vue@next

通过Vue CLI：

同样，你也可以使用Vue CLI来创建Vue.js 3项目。首先，安装Vue CLI：

npm install -g @vue/cli

然后，创建一个新的Vue.js 3项目：

vue create my-vue3-project

基本用法：Vue.js 3

一旦安装完成，你可以创建Vue.js 3实例并开始构建你的应用。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js 3示例</title>
</head>
<body>

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

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.4"></script>
<script>
const { createApp } = Vue;

const app = createApp({
  data() {
    return {
      message: 'Hello, Vue.js 3!'
    };
  }
});

app.mount('#app');
</script>

</body>
</html>

这个示例创建了一个Vue.js 3实例，并在#app元素中显示了一条简单的消息。

开始使用Vue.js 2和Vue.js 3

无论你选择Vue.js 2还是Vue.js 3，安装和基本用法都相对简单。通过引入CDN、npm安装或使用Vue CLI，你可以快速开始构建交互性强大的前端应用。

希望这篇文章对你有所帮助，让你更好地了解如何安装和开始使用Vue.js 2和Vue.js 3。如果你有任何问题或需要更多的指导，请随时提问。再次感谢阅读，愿你在Vue.js的世界中取得成功！