【Vue】Vue的安装

2023-04-21 106

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

🏆今日学习目标：Vue3的安装

😃创作者：颜颜yan_

✨个人格言：生如芥子，心藏须弥

⏰本期期数：第一期

🎉专栏系列：Vue3

前言

Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

Vue3安装

独立版本

安装vue3可以在官网下载vue，然后本地使用script标签进行引用。vue官网和下载vue如下👇

vue官网

下载vue

CDN安装

可以借助 script 标签直接通过 CDN 来使用 Vue：

Staticfile CDN：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

unpkg：

<script src="https://unpkg.com/vue@next "></script>

这里我们使用了 unpkg，但你也可以使用任何提供 npm 包服务的 CDN, unpkg会保持和 npm 发布的最新的版本一致。通过 CDN 使用 Vue 时，不涉及“构建步骤”。这使得设置更加简单，并且可以用于增强静态的 HTML 或与后端框架集成。

第一个Vue程序

接下来，我们来编写第一个Vue程序吧~

首先创建一个html文件，在head中使用script标签引入vue，在body中添加一个div，添加id为app，使用 {{}}进行数据绑定，添加一个数据message

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello</title>
    <script src="https://unpkg.com/vue@next "></script>
</head>
<body>
    <div id="app">{{message}}</div>
</body>
</html>

接着使用createApp创建vue的应用，这个方法接收一个对象，使用mount方法进行挂载，将Vue的应用绑定到app上。

<script>
    Vue.createApp({
        data(){
            return{
                message:'Hello Vue'
            }
        }
    }).mount("#app")
</script>