直接用 <script> 引入
直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。
下载完成后, 将vue.js引入到HTML文件中, 就安装好了vue.js
例如: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue基本使用</title>
<!--1.下载导入Vue.js-->
<script src="js/vue.js"></script>
</head>
<body>
</body>
</html>
如果想要确认vue.js是否真的部署到了我们的HTML中, 还可以在浏览器打开这个HTML页面, 控制台会输出两个警告(开发版本下), 就说明我们的vue.js确实部署到了html中
image
其实对于安装Vue.js来说, 有很多种方法, 比如通过cli安装。但是对于初学者来说， 直接引入vue.js文件应该是最简单的一种方法。对于cli等工具安装vue.js需要对 Node.js 和相关构建工具有一定程度的了解。所以, 新手还是在熟悉 Vue 本身之后再使用 CLI吧。
有兴趣的话可以查阅 官方文档, 了解其他安装Vue.js的方法。
创建第一个 Vue 应用
- 在index.html中插入一个id为app的
<div>
<div id="app"></div>
- 新建Vue实例
let app = new Vue({
// 告诉Vue的实例对象, 将来需要控制界面上的哪个区域
el: '#app',
// 告诉Vue的实例对象, 被控制区域的数据是什么
data: {
message: 'Hello Vue!'
}
})
- 利用模板语法导入数据
<div id="app">
{{ message }}
</div>
经过上面三个步骤我们已经成功创建了第一个 Vue 应用！而且现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。
Vue Devtools
这是一个Vue调试工具安装,它允许你在一个更友好的界面中审查和调试 Vue 应用。 如果你能打开谷歌插件商店, 直接在线 安装即可
如果进不去谷歌商店也没有关系, 还可以离线安装。
- 下载 离线安装包
- 打开谷歌插件界面(在设置中找到'扩展程序')
- 直接将插件拖入
- 报错 程序包无效: "CRX_HEADER_INVALID", 可以将安装包修改为rar后缀, 解压之后再安装
- 重启浏览器
