Vue:搭建VSCode开发环境

安装VSCode插件

  • Chinese:适用于 VS Code 的中文(简体)语言包
  • Express:Web服务器

启动第一个Vue文件

  • 打开一个文件夹:VueLearning
  • 点击"新建文件",输入文件名【XX.html】放在 VueLearning目录下
  • 将vue.js包放在 VueLearning \ lib目录下
  • 输入【!】+【tab】,自动补全html模板

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 代码中导入vue.js包
  • 输入测试代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./lib/vue.js"></script>    <!--网络路径、相对路径-->
    <title>Document</title>
</head>


<body>

<div id='div1'>
    {{msg}}
</div>
<script>
    var vm=new Vue({
        el:'#div1',
        data:{
            msg:'Hello Vue.js !'
        }
    })
</script>

</body>
</html>
  • 【ctrl+shift+P】输入Express,选择"Host Current Workspace and Open in Browser" 启动Express服务器
    在这里插入图片描述
  • 在浏览器中补全html文件路径:
    在这里插入图片描述
发布了56 篇原创文章 · 获赞 5 · 访问量 7458

猜你喜欢

转载自blog.csdn.net/forchoosen/article/details/102942997