vscode中的vue环境配置

慕慕和小绵羊

已于 2023-06-06 14:53:04 修改

阅读量1.2k

点赞数 1

分类专栏：前端Vscode 编程软件的安装使用教程以及各种报错文章标签： vue.js vscode javascript

于 2023-06-06 14:38:28 首次发布

本文链接：https://blog.csdn.net/qq_46617150/article/details/131067024

版权

前端Vscode 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

编程软件的安装使用教程以及各种报错

10 篇文章 0 订阅

订阅专栏

1.下载vue.js

vue下载链接
在这里插入图片描述
2个版本都要下载，学习的时候使用开发版本，它包含一些报错提示和警告

2.在你的浏览器上安装 Vue Devtools

百度网盘链接：
链接：https://pan.baidu.com/s/1TcXGd0vZdBX2rNbeOWl7ZQ?pwd=mb56
提取码：mb56
将下载好的vue devtools加入浏览器扩展程序中
在这里插入图片描述

3.安装live server

在vscode扩展商店中安装live server插件，后面的html代码使用open with live server打开
在这里插入图片描述

4.小例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识vue</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>hello,{{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip=false;//阻止vue在启动时生成生产提示
        // 创建vue实例，使用vue的开端
        const x = new Vue({
            el:'#root',//el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
            data:{      //data中用于存储数据，数据供el所指定的容器使用
                name:'shang'
            }
        })
    </script>
    
</body>