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

  1. 安装vue插件,重启idea

  1. 鼠标右键添加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>

vue的快速入门【IDEA版本】的更多相关文章

  1. .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

    写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...

  2. Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js快速入门（二）

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...

  3. Vue.js 快速入门

    什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...

  4. Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法

    一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...

  5. Vue.js快速入门

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...

  6. Vue.js——快速入门

    Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...

  7. Vue的快速入门

    1 环境准备 1 下载安装Node 地址https://nodejs.org/en/download/ 完成后通过cmd打开控制台输入node -v 可以看到版本信息 2 通过该node自带的npm ...

  8. Vue.js—快速入门

    Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...

  9. Vue.js—快速入门及实现用户信息的增删

    Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...

随机推荐

  1. [LOJ 572] Misaka Network 与求和

    一.题目 点此看题 二.解法 直接推柿子吧: \[\sum_{i=1}^n\sum_{j=1}^nf(\gcd(i,j))^k \] \[\sum_{d=1}^nf(d)^k\sum_{i=1}^{n ...

  2. python-类的隐藏和封装

    7 """ 8 封装是面对对象的三大特征之一(另外两个是集成和多态),它指的是将对象> 的信息隐藏在对象的内部,不允许外部程序直接访问对象内部信息,而是通> ...

  3. 白话解读 WebRTC 音频 NetEQ 及优化实践

    NetEQ 是 WebRTC 音视频核心技术之一,对于提高 VoIP 质量有明显的效果,本文将从更为宏观的视角,用通俗白话介绍 WebRTC 中音频 NetEQ 的相关概念背景和框架原理,以及相关的优 ...

  4. clickhouse 亿级数据性能测试

    clickhouse 在数据分析技术领域早已声名远扬,如果还不知道可以 点这里 了解下. 最近由于项目需求使用到了 clickhouse 做分析数据库,于是用测试环境做了一个单表 6 亿数据量的性能测 ...

  5. 2017-2018 ACM-ICPC Northern Eurasia（A.Archery Tournament）

    题目链接:https://vjudge.net/problem/Gym-101630A 题意: n个事件,t=1 代表增加一个圆心为(x,y),半径为 abs(y)的靶子,t=2,代表射击的坐标为(x ...

  6. Salesforce LWC学习(三十二)实现上传 Excel解析其内容

    本篇参考:salesforce lightning零基础学习(十七) 实现上传 Excel解析其内容 上一篇我们写了aura方式上传excel解析其内容.lwc作为salesforce的新宠儿,逐渐的 ...

  7. ch1_6_6求解门禁系统问题

    import java.util.HashMap; import java.util.Scanner; public class ch1_6_6求解门禁系统问题 { public static voi ...

  8. 【linux】驱动-2-内核模块

    目录 前言 2. 内核模块 2.1 内核模块概念 2.1.1 内核 2.1.2 内核模块机制的引入 2.2 内核模块 2.2.1 内核模块参考例程 2.2.2 内核模块命令 2.2.3 系统自动加载模 ...

  9. ATMS中去pause Activity A.

    上文写完之后,感觉这个部分写的还是不清晰,本文继续补充一下. 首先还是看堆栈. obtain:78, PauseActivityItem (android.app.servertransaction) ...

  10. 2020-BUAA OO-面向对象设计与构造-HW11中对ageVar采用缓存优化的等价性证明（包括溢出情况）

    HW11中对ageVar采用缓存优化的等价性证明(包括溢出情况) 概要 我们知道,第三次作业里age上限变为2000,而如果缓存年龄的平方和,2000*2000*800 > 2147483647 ...