我的第一个vue程序（vs code）

VS Code搭建Vue开发环境：初识Vue程序

最新推荐文章于 2025-06-20 19:59:00 发布

原创最新推荐文章于 2025-06-20 19:59:00 发布 · 261 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

1 篇文章

订阅专栏

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

前情提要:
首先要在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>