和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. FreeBSD安装xorg + xfce 4

    FreeBSD安装xorg,以及xfce 安装xorg 可选包 -xorg 完整xorg环境包 -xorg-minimal xorg最小化包 ports安装 cd /usr/ports/x11/xor ...

  2. BIMFACE二次开发【C#系列】

    本系列文章主要介绍使用 C# .ASP.NET(MVC)技术对 BIMFACE 平台进行二次开发,以满足本公司针对建筑行业施工图审查系统的业务需求,例如图纸模型(PDF 文件.二维 CAD 模型.三维 ...

  3. 「UOJ 514」通用测评号（生成函数）

    首先,题目中的过程可以看作:每次选择任意一个燃料仓,给它装填 \(1\) 单位的燃料,如果此时恰好 "填满" 了它,就给答案 \(+1\). 考虑 \(n\) 号燃料仓填满的概率, ...

  4. java集合框架部分相关接口与类的介绍

    集合基础 接口 Iterable //Implementing this interface allows an object to be the target of the "for-ea ...

  5. 正则表达式如何直接在EXCEL中使用？

    正则表达式,相信大家都不陌生.但在我们最常用的办公软件EXCEL中,目前没有可直接使用正则表达式的函数(至少10版本的EXCEL没有),那么今天我就分享下如何在EXCEL中自定义正则函数. 一.提需求 ...

  6. Cable Protection

    题目大意:求一颗基环树的最小点覆盖. 题解:其实是一道比较板子的树形dp,dp[i][0/1]表示取或者不取i点的最小点.但是首先我们要把基环树断开,然后分别考虑a被覆盖和b被覆盖的情况. dp[i] ...

  7. P1036_选数(JAVA语言)

    题目描述 已知 n 个整数x1​,x2​,-,xn​,以及1个整数k(k<n).从n个整数中任选k个整数相加,可分别得到一系列的和.例如当n=4,k=3,4个整数分别为3,7,12,19时,可得 ...

  8. 简要说一下.Net的编译过程.

    看面试题的时候遇到这样一道题目,简要说明.NET的编译过程,在网上看了很多资料,简单总结如下: 1.一般的编译过程 通常高级语言的程序编译过程是:首先写好的程序是源代码,然后编译器编译为本地机器语言, ...

  9. 对用pyinstaller打包的exe程序进行反编译，获得源码

    参考文章: 1.https://www.cnblogs.com/DirWang/p/12018949.html#PyInstallerExtractor 2.https://msd.misuland. ...

  10. python3 list合并

    1 t1=[x for x in range(5)] 2 t2=[x for x in range(5,10)] 3 4 #way1:通过方法extend(),直接修改列表,无返回值 5 # t1.e ...