我的第一个vue程序（vs code）-优快云博客

本文链接：https://blog.youkuaiyun.com/enjoy_code_/article/details/111088932

本文介绍了如何在VS Code中创建第一个Vue程序。通过安装Live Server插件，新建Vue项目文件夹，编写HTML模板并引用Vue.js，按照官方指南创建Vue实例，实现了数据的渲染。在开发过程中，利用Live Server实现保存即更新的功能，同时提醒读者注意Vue实例创建时大小写的细节问题。

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

前情提要:
首先要在vs code上下载一个插件：live server。
方便我们后续用浏览器阅览前端效果。
在这里插入图片描述
然后在磁盘上新建一个文件夹，随便名称即可。
用vs code打开该文件夹：

我的文件夹是vue，在该目录下创建一个html模板：

html模板粘贴这个即可：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>我的第一个vue</title>
</head>
<body>

</body>
</html>

然后打开vue官方网站（https://cn.vuejs.org/v2/guide/index.html）：
在这里插入图片描述
按照这个写法，改动一下文件夹下html，第一个vue就做出来了:

你也可以粘贴我的模板：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>我的第一个vue</title>
</head>

<body>
    <div id="my">
        {{
            message
        }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var my=new Vue({
            el:"#my",
            data:{
                message:"hello , vue!"
            }
        })
    </script>
</body>
</html>