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

最新推荐文章于 2026-04-15 12:14:07 发布

原创最新推荐文章于 2026-04-15 12:14:07 发布 · 6.1k 阅读

15 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

Spring Boot2 + Vue3入门实战

文章目录

一、安装vue开发环境
二、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文件夹中写入代码，保存。

<!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>