【Vue】02 Vue技术——搭建 Vue 开发框架：在VS Code中创建一个Vue项目

JosieBook2025-12-09 17:52

文章目录

一、安装vue开发环境
[二、VS Code中创建项目](#二、VS Code中创建项目)
三、运行第一个Vue项目

一、安装vue开发环境

我们先打vue官网，https://cn.vuejs.org/

进入vue2的开发文档：

https://v2.cn.vuejs.org/

进入起步：

默认就来到了介绍，介绍页面往下拉，就能看到开发环境的安装按钮。

点击安装按钮，可以进入环境版本的选择安装按钮。

这里开发版本和生产版本，根据需要安装，开发的时候一般选择开发版本进行安装下载，这里我们将两个都下载到一个文件夹中，实际就是两个js文件。

二、VS Code中创建项目

我们先创建一个文件夹，vue_basic，然后鼠标右键用vs code打开。

我们看到这里在vue_basic下创建了一个用来放文件的01_初识Vue，里面新建一个html文件。

新建的js文件夹，里面放入我们下载的两个vue开发环境的文件。

在实际文件夹路径中也是这样的层级对应关系。

最后，在html文件夹中写入代码，保存。

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>初识Vue</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue!'
            }
        });
    </script>
</body>
</html>

三、运行第一个Vue项目

我们在浏览器中运行这个html文件，如果看到输出Hello, Vue!，说明运行成功！

如果按下F12进行查看，可以看到有两个这样的输出。是什么意思呢？下方会给出答案，没有错误，但还需要安装开发者工具，下篇文章中详细来说。