首页 > 其他分享 >vscode 快捷键生成vue模板

vscode 快捷键生成vue模板

时间:2023-08-21 17:04:00浏览次数:39  
标签:vue vscode 生成 -- 快捷键 模板

vscode 快捷键生成vue模板教程

我们在开发vue项目时,需要一个vue模版,去创建一个组件,可以使用快捷键

1.文件--》首选项--》用户片段

vscode 快捷键生成vue模板_vscode

2.搜索vue 选择

vscode 快捷键生成vue模板_快捷键_02

vscode 快捷键生成vue模板_模版_03

3.模板内容填充

vscode 快捷键生成vue模板_模版_04

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  <div>",
            "    $0",
            "  </div>",
            "</template>",
            "",
            "<script>",
            "",
            "  export default {",
            "    name:'',",
            "    props:[''],",
            "    data () {",
            "      return {",
            "",
            "      };",
            "    },",
            "",
            "    components: {},",
            "",
            "    computed: {},",
            "",
            "    created() {},",
            "",
            "    mounted() {},",
            "",
            "    methods: {},",
            
            "",
            "  }",
            "",
            "</script>",
            "<style lang='scss' scoped>",
            "",
            "</style>"
        ],
        "description": "三线码工vue模板"
    }
}

4.创建vue文件

vscode 快捷键生成vue模板_快捷键_05

 5.写快捷键vue

vscode 快捷键生成vue模板_快捷键_06

 6.生成代码

vscode 快捷键生成vue模板_快捷键_07

标签:vue,vscode,生成,--,快捷键,模板
From: https://blog.51cto.com/u_16204378/7177266

相关文章

  • 在Vue3后台管理系统中使用watch和watcheffect
    ​ 1、watch在Vue3中的组合式API中,watch的作用和Vue2中的watch作用是一样的,他们都是用来监听响应式状态发生变化的,当响应式状态发生变化时,都会触发一个回调函数。constmessage=ref("test");watch(message,(newValue,oldValue)=>{console.log("新值:",ne......
  • Vue中key的作用
    1.虚拟Dom中key的作用:    key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】,    随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:2.对比规则:    (1).就虚拟DOM中找到了与新虚拟DOM相同的key:    ......
  • OpenTiny Vue 3.10.0 版本发布:组件 Demo 支持 Composition 写法,新增4个新组件
    我们非常高兴地宣布,2023年8月14日,OpenTinyVue发布了v3.10.0 ......
  • Vue3 toRef响应式失效问题排查
    父组件conststuRecordInfo=ref<any>({stuNum:11111})//接口请求返回stuRecordInfo.value.stuNum=22222<StuRecord:info="stuRecordInfo":pictureInfo="pictureInfo"/>子组件constinfo=toRef(props,'info')consts......
  • vue——debounce防抖函数无效
    参考:vue记录-vue中使用lodash_.debounce防抖不生效原因,解决方案https://blog.csdn.net/Delete_89x/article/details/122000444 问题代码:<el-inputv-model="slotProps.form.condition"placeholder="请输入"@input="inputChange"></el-......
  • vue中export default data()外面的数据如何通过$t获取动态值
    如果将数据放到外面的`const`中,而不是在Vue组件的`data`选项中,那么无法直接通过`$t`方法来获取翻译文件的值。因为`$t`方法是Vue-i18n插件提供的实例方法,需要在Vue组件中使用。如果你想在外部使用`$t`方法来获取翻译文件的值,可以将Vue-i18n的实例导出,并在外部文件中引入该实例来......
  • 在springboot项目中部署vue打包的dist以及刷新遇到404的解决方法
    一、在springboot项目中部署dist新建一个springboot项目,并将dist复制到resources目录下面,同时在application.yml添加配置即可,操作结果如下图所示: 添加的配置代码如下:spring:web:resources:static-locations:"classpath:/dist"二、部署好之后刷新遇到404......
  • 解决vueH5微信公众号扫一扫调用失败问题
    所使用的是importwxfrom'weixin-js-sdk'首先保证签名,域名配置等开发配置没有问题在开发工具当中显示没有问题一到真机测试就不行往下看      特别注意所需关键信息存在本地缓存中   ......
  • Vue 中请求同步执行解决方案
    有很多小伙伴在使用Vue的时候都会遇到一种情况,form表单修改回显时,某个下拉框里的内容回显乱码,这是因为Vue是的请求方法是异步请求:简单来说,form表单内容先获取了出来,而项目阶段的下拉框随后才获取出来//表单<el-col:span="12"> <el-form-item:label="$t('项目阶段')"prop=......
  • Web 国际化:新增越南语语系(vue i18n)
     前提:1.在src/locales文件夹中,新增vi.json文件背景:1.vue步骤:1.在main.js中,importVueI18nfrom'vue-i18n'Vue.use(VueI18n)consti18n=newVueI18n({locale:localStorage.getItem('lang')||'zh',messages:{ .........