vue的快速入门【IDEA版本】
和vscode相比,使用IDEA进行前端开发并没有那么容易,需要先进行配置 。
- 安装vue插件,重启idea
- 鼠标右键添加
vue component
- 点击 file 打开设置 settings,展开 Editor 找到 file and code templates
- 找到 Vue single file component 并选中它,然后点击copy
- 把 Name 改成 Vue Component,然后把代码里的 “COMPONENT_ ”删掉,最后点 ok 就好了
- 成功结果
直接使用<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>