前端框架VUE——安装及初始化
本篇文章适合，想要学习 vue，但对 vue 又没有接触过的同学阅读，是非常基础的内容。告诉大家使用 vue 时的安装方式，及如何创建实例，展示内容。
一、安装方式
vue 是一种前端框架，所以使用前我们必须安装，有三种安装方式分别为：
1.1、使用 script 标签引入
在 vue 官方文档，我们可以下载开发版本和生产版本两个 js 文件，生产版本是经过压缩，删除注释，警告等，比开发版本文件要小，下载之后直接通过 script 标签引入，Vue 会被注册为一个全局变量。
//使用
<script src="static/js/vue.js"></script>1.2、CDN
使用 cdn 方式引入 vue.js 文件，与上述 script 标签引入是类似的，使用 cdn 引入需要注意引入文件的版本号，建议链接到一个明确的版本号和构建文件，避免新版本造成影响。
//使用
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>1.3、NPM
vue 构建大型应用项目时，推荐使用 npm 安装，因为 npm 能很好的和 webpack 或 browserify 模块打包器配合使用，同时 vue 也提供配套工具来开发单文件组件。
什么是脚手架？
vue 提供了一个官方的 cli，为单页面应用(SPA)快速搭建繁杂的脚手架。它为现代前端工作流提供了开箱即用的构建设置。
使用 npm 安装 vue 之前，需要先安装 node.js 环境。
// 安装语法
npm install vue1.4、Bower
# 最新稳定版本
$ bower install vue二、初始化
突然想起一个特别有意思的话，程序员遍地都是对象，唯独我没有对象。听起来特别扎心的一句话，作为程序媛的妹子之前也有过这种苦恼，不过我还是要告诉你一句，缘分未到，静待缘来！
vue实例化的时候，与我们面向对象的实例是一样的，想看《面向对象》的，可自行翻看下。
创建一个 vue 实例，代码如下：
var vm = new Vue({ el:'#app', data(){ //定义数据 } })
vm 是（ViewModel）的缩写，表示 Vue 的实例。
实例化时，可传入一个选项对象，选项对象中可以加入很多选项。
el 是用于挂载要管理的元素，el之外的元素不会被vue解析。
data 用于定义绑定到元素的数据。
三、第一个 vue 页面
做一个简单的 hello world 页面，我们使用cdn方式引入vue。具体实例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="app">{{msg}}</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el:"#app",
data(){
return{
msg:'hello world'
}
}
})
</script>
</body>
</html>
打开网页，正常运行，显示 hello world。
3.1、如果我们继续给div添加一个兄弟节点，继续展示 msg 数据，如：
<div id="app">{{msg}}</div>
<div>{{msg}}</div>
运行结果如图：
此时我们发现 {{msg}} 并没有被解析，直接原样输出。是因为，el 挂载要管理的元素，而后边的 div 没有在管理元素内，所以直接输出了，并没有解析内容。
值得注意的是，开发时，需要解析的内容都要放到被挂载管理的元素内。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？