首页 > 其他分享 >VSCode自建vue示例模板

VSCode自建vue示例模板

时间:2023-04-07 09:22:05浏览次数:47  
标签:vue 示例 VSCode app Snippets 模板

步骤

打开File->Preferences->Configure User Snippets

选择New Global Snippets file...

输入名字(自定义),填入以下内容,注意修改vue.js路径

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<script src='../js/vue.js'></script>",
			"<div id='app'>",
			"</div>",
			"<script>",
                        "let app = new Vue({",
                        "   el: '#app',",
                        "        data: {",
                        "           msg: 'Hello'",
                        "        }",
                        "    })",
			"</script>",
        ],
        "description": "fuckvue"
    }
}


结果

标签:vue,示例,VSCode,app,Snippets,模板
From: https://www.cnblogs.com/beizhe/p/17294904.html

相关文章

  • vue全家桶进阶之路27:Vue.js 3.0的下载和安装
    使用脚手架vue-cli创建vue3项目,创建前需要准备以下:1、node.js环境见:https://www.cnblogs.com/beichengshiqiao/p/17251233.html2、npm、cnpm工具见:https://www.cnblogs.com/beichengshiqiao/p/17251860.html3、vue框架见:https://www.cnblogs.com/beichengshiqia......
  • uni-app:nvue:配置底部安全区域(hbuilderx 3.7.3)
    一,文档地址:https://uniapp.dcloud.net.cn/collocation/manifest-app.html#full-manifest如图: 说明:offset:底部安全区域偏移,"none"表示不空出安全区域,"auto"自动计算空出安全区域二,编辑配置文件:manifest.json,如图所示,选择源码视图,在app-plus一项下进行设置1,取......
  • VSCode 工程下手动生成配置文件
    0.打开VS-Code,打开所在的工程1.首先在工程目录下新建.vscode文件夹2.按Ctrl+Shift+P,输入C/C++E,选择如图所示的项目,即自动生成配置文件。  3. 配置文件名字为:c_cpp_properties.json代码如下:1{2"configurations":[3{4"name":......
  • vue之双向数据绑定v-model
    目录简介语法示例简介在vue中,当修改了变量,页面内容会根据变量的变化而变化。但是如果页面变化了,变量不会变化,这个就是单向数据绑定。当页面变化,变量也会跟着变化,这个是双向数据绑定语法<inputtype="text"v-model="变量">示例<body><divid="app"><!--单向数据......
  • VSCode 新建 ssh 并配置免密登录
    #在local端VSCode点击新建ssh,输入ssh<user>@<ip>-A,修改config,点击connect#在local端cmd运行ssh-keygen-trsa#在remote端shell运行ssh-keygen-trsacd/home/lyc/.ssh/id_rsa#将loacl端id_rsa.pub的内容复制到authorized_keysvimauthorized......
  • vue全家桶进阶之路25:Vue2的停维通知
      Vue2的技术支持会持续多久?从官方发文来看,Vue2.7是当前、同时也是最后一个Vue2.x的次级版本更新。Vue2.7会以其发布日期,即2022年7月1日开始计算,提供18个月的长期技术支持(LTS:long-termsupport)。在此期间,Vue2将会提供必要的bug修复和安全修复,但不再......
  • vue之事件修饰符
    目录修饰符.stop事件.self事件.prevent事件.once事件修饰符事件修饰服释义.stop只处理自己的事件,子控件不再冒泡给父控件.self只处理自己的事件,子控件的冒泡不处理.prevent阻止a标签链接的跳转,也可以修改跳转页面.once事件只会触发一次(适用于抽奖页面)......
  • vue之过滤、筛选功能的实现
    目录需求代码需求给定一个列表(模拟数据),根据用户输入,自动筛选输入的内容并输出到屏幕代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js/jQuery.js"></......
  • 报错:‘VUE-CLI-SERVICE‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。
    启动前端的项目,命输入npmrundev时,报错:'vue-cli-service'不是内部或外部命令,也不是可运行的程序或批处理文件。如图:1、管理员身份打开 2.输入set-ExecutionPolicyRemoteSigned 3、选择A4、Pycharm-Terminal执行命令:npminstall需要安装一会儿,稍安勿躁,安装完成......
  • vue3创建项目笔记
    E:\vue3学习>npminitvite@latestvite-blog----templatevueNeedtoinstallthefollowingpackages:[email protected]?(y)yScaffoldingprojectinE:\vue3学习\vite-blog...Done.Nowrun:cdvite-blognpminstallnpmrundevnpmnotice......