vue教程1：第一个页面HelloVue快速搭建

最新推荐文章于 2024-06-06 16:06:52 发布

°Fuhb

最新推荐文章于 2024-06-06 16:06:52 发布

阅读量1.7k

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_28834355/article/details/108558513

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

环境准备

VSCode开发工具

新建第一个页面

打开VSCode，点击File -> New File新建了个空白文件，保存为HelloVue.html
然后在刚才新建的页面，先输入感叹号"!"，再按下TAB键，就会自动生成HTML代码
编写HTML代码

<div id="app">
   {{ message }}
</div>

编写JS代码

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            message:"Hello Vue"
        }
    });
</script>

最终整个HTML代码如下，可以直接整个拷贝测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
</body>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            message:"Hello Vue"
        }
    });
</script>

</html>

运行测试

安装“open in browser”预览插件，已经安装的可以忽略跳过
右键该HTML文件，点击Open In Default Browser，效果如下：

在这里插入图片描述

°Fuhb

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue教程1：第一个页面HelloVue快速搭建

环境准备VSCode开发工具新建第一个页面打开VSCode，点击File -> New File新建了个空白文件，保存为HelloVue.html然后在刚才新建的页面，先输入感叹号"!"，再按下TAB键，就会自动生成HTML代码编写HTML代码<div id="app"> {{ message }}</div>编写JS代码<script src="https://cd
复制链接

扫一扫