【Vue】Vue的安装

简介: 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>


保存运行,我们就可以在页面上看到Hello Vue了~


01eb1ec5082d42f7b9d6326b271fcdd2.png


总结


以上就是今天的学习内容啦~

如果有兴趣的话可以订阅专栏,持续更新呢~

咱们下期再见~


acf7179ececd4e35aaa810fc8c693797.gif

相关文章
|
25天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
127 1
|
4天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
30 8
|
5天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
32 1
|
5天前
|
资源调度 JavaScript 前端开发
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
41 1
|
1月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
65 18
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
2月前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
46 1