【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

目录
相关文章
|
1天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
6 0
|
1天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
5 0
|
1天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
7 1
|
1天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
9 0
|
1天前
|
JavaScript
vue知识点
vue知识点
10 0
|
2天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
2天前
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
|
2天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
|
2天前
|
JavaScript
vue中使用pinia及持久化
vue中使用pinia及持久化
5 0
|
2天前
|
JavaScript 前端开发 UED
Vue class和style绑定:动态美化你的组件
Vue class和style绑定:动态美化你的组件