如何在原生HTML里面使用VUE（保姆级教学）
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
项目地址：https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
一、如何引用Vue.js到html文件里
1.以cdn的方式引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>将上面代码添加到html的head里，即可全局使用vue的方法；
2.直接将vue文件保存到本地，再引入
可以采取下面方法：
（1）将CDN的路径（https://cdn.jsdelivr.net/npm/vue/dist/vue.js）复制到浏览器，并搜索；
（2）将搜索到的内容全选复制项目的vue.js文件里，如图；
（3）在index.html里面引入；
上面是在原生HTML里面引入vue的方法，其他的同理，如：elementUI、ant Desgin Vue等，都可以用类似的方式引入到原生HTML里。
二、如何在html文件里使用VUE
成功引入vue后，我们就可以在html文件里使用vue，下面是示例；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<!-- 创建一个根元素 -->
<div class="home" id="home"></div>
<script>
// 将vue挂载到id为home的根元素上
var vm = new Vue({
el: "#home",
data() {
return {};
},
methods: {},
mounted() {},
created() {},
});
</script>
</body>
</html>
这样就可以在html里面使用Vue了，下期我将分享在html里面使用Vue组件~
最近有小伙伴联系我说cdn地址内容找不到，我给大家上传到git了，大家有需要的可以自行去下载，地址：GitCode - 全球开发者的开源社区,开源代码托管平台，感谢大家的支持！
GitHub 加速计划 / vu / vue
105
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：1 个月前 )
9e887079
[skip ci] 1 年前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
新一代开源开发者平台 GitCode，通过集成代码托管服务、代码仓库以及可信赖的开源组件库，让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
18
0- 0
已为社区贡献3条内容
所有评论(0)