Vue.js快速入门：从概念到Hello World-优快云博客

本文概述了Vue.js，一个轻量级的渐进式框架，重点在于其视图层，并强调其易用性和与其他库的集成能力。接着介绍了如何使用HBuilder X搭建Vue.js的Hello World项目，包括引入Vue.js文件和在HTML中进行简单的DOM渲染验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.js概述及搭建

Vue.js是什么？

Vue是一套用于构建用户界面的渐进式框架。

Vue的核心库只关注视图层，容易上手，便于与第三方库或既有项目整合。

当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

Vue.js Hello World搭建

工具：HBuilder X

在HBuilder X中选择新建项目，如下图所示：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ir4xKgl1-1622822813934)(F:\Users\寒山\Desktop\创建Vue第一步.png)]$

选中vue项目（普通模式），点击创建

项目的js文件夹中会自带以下两个.js文件：
在这里插入图片描述

vue.js开发环境版，包含了有帮助的命令行警告。

vue.min.js生产环境版本，优化了尺寸和速度。

对于学习来说，两者没有太大的差别，二选一就行。

在index.html文件中使用以下语句引入Vue:

<!--开发环境版本-->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

或

<!--生产环境版本-->
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

html中写入以下代码验证Vue

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<div id="test1">
			{{message}}		
		</div>
		
        <!-- vue代码 -->
		<script type="text/javascript">
			var vue = new Vue({
				el:'#test1',
				data:{
					message:'Hello World!'
				}
			})
		</script>
		
	</body>
</html>