和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. WPF 基础 - ControlTemplate

    常用 ControlTemplate 的地方:Control 的 Template 属性 运用效果举例:穿着 CheckBox 外衣的 ToggleButton,披着温度计的 ProgressBar. ...

  2. 01-Spring概述(总览)

    Spring概述 前言 Spring 发展至现在,俨然成为一个生态,但要理解其余的 Spring Boot.Spring Cloud 等框架,需要先对 Spring 的整个体系有一定的理解,因为其余的 ...

  3. vue 页面生成图片保存

    需求:将页面中的元素转成图片,支持保存或下载.要求下载的图片包含页面背景,头像,用户名,文本为"我的邀请码"和个人二维码. 实现:将页面绘制到canvas中,生成base64图片链 ...

  4. yolo训练数据集

    最近了解了下yolov3的训练数据集部分,总结了以下操作步骤:(基于pytorch框架,请预先装好pytorch的相关组件) 1.下载ImageLabel软件对图片进行兴趣区域标记,每张图片对应一个x ...

  5. 颠覆你认知的Python3.9

    我通读了python 3.9发行说明和相关的讨论.根据这些信息,我想写一个全面的指南,以便每个人都能一眼了解这些功能及其详细的工作原理 原文地址,点击这里,观看效果更佳 简而言之 从字典更新/合并到添 ...

  6. Manjaro Linux平台用pyinstaller打包python可执行文件

    技术背景 当我们创建一个python项目,最终的成果如果希望用户能够不依赖于python源代码也能够正常的执行,就会比较的人性化.因为源代码数量众多,很难让每个用户都自行管理所有的源代码,因此我们需要 ...

  7. Android 之 使用 Intent 在活动间传递数据

    •前言 继上次学习了<通过 Intent 完成点击按钮实现页面跳转>后,我们知道了如何通过 Intent 实现页面跳转: Intent 除了可以实现页面跳转外,还可以在跳转的时候传递数据: ...

  8. 自动QQ邮箱发送邮件

    语言:python 参考:https://www.runoob.com/python/python-email.html 前提: 1.QQ邮箱开启了SMTP服务 2.生成了授权码,这个授权码将作为自己 ...

  9. 使用 Elastic 技术栈构建 Kubernetes全栈监控

    以下我们描述如何使用 Elastic 技术栈来为 Kubernetes 构建监控环境.可观测性的目标是为生产环境提供运维工具来检测服务不可用的情况(比如服务宕机.错误或者响应变慢等),并且保留一些可以 ...

  10. spring5源码编译过程中必经的坑

    spring源码编译流程:Spring5 源码下载 第 一 步 : https://github.com/spring-projects/spring-framework/archive/v5.0.2 ...