vue的快速入门【IDEA版本】

和vscode相比,使用IDEA进行前端开发并没有那么容易,需要先进行配置 。

  1. 安装vue插件,重启idea

image-20200822080600685

  1. 鼠标右键添加vue component
  • 点击 file 打开设置 settings,展开 Editor 找到 file and code templates

image-20200822083000594

  • 找到 Vue single file component 并选中它,然后点击copy

image-20200822083027084

  • 把 Name 改成 Vue Component,然后把代码里的 “COMPONENT_ ”删掉,最后点 ok 就好了

image-20200822083050202

  • 成功结果

image-20200822083132591

直接使用<script>引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

demo1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    {{msg}}
</div>
</body>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        // Model 数据
        data:{
            msg :"hello vue"
        }
    });
</script>
</html>
posted @ 2021-02-09 22:48  DJ同学  阅读(236)  评论(0编辑  收藏  举报