VSCode Vue 开发环境配置

Vue2官方文档：https://v2.cn.vuejs.org/
Vue3官方文档：https://cn.vuejs.org/

Vue的安装和引用

Vue2的官方安装指南：https://v2.cn.vuejs.org/v2/guide/installation.html
在这里插入图片描述
 可以下载到本地，也可以使用在线版本，两种方式都是使用<script>引用，对于本地引用，在src中填写下载的本地文件的地址，对于在线引用，则直接按照官网提供的代码引用。

&lt;script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"&gt;&lt;/script&gt;

在开发阶段，推荐使用开发版本，包含完整的警告和调试模式，有利于开发和debug。在开发完成后再换成更简洁精悍的生产版本投入使用。

VSCo de 配置

插件：view–in–b row s e r
在这里插入图片描述
 插件安装完成后，右键 html 文件并点击View in Brow s e r 即可在浏览器中预览编写的网页。

插件：Vue La n g ua g e Fe atures (Vol ar)

用于Vue的代码高亮。

Hel lo Wo rl d

一个简单的html 实例，用<script>引用Vue，之后创建Vue 实例并将html中的组件挂载到Vue 实例的el 属性下，由Vue 实例的data 属性为组件提供数据。

<!DOCTYPE html&gt;
<html lang="en"&gt;
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    
    <div id="box">
        {{msg}}
    </div>
    <!-- 创建实例 -->
    <script>
        const app = new Vue({
            el:"#box",  // el指定该Vue管理的实例
            data:{  // data为实例提供数据
                msg: "hello world"
            }
        })

    </script>
</body>
</html>