当前位置:首页 > vue > 正文内容

vscode使用vue代码模板

xi4年前 (2022-02-27)vue1488

1、vscode中打开:文件>首选项>用户片段>输入vue按下回车
2、复制下面代码并保存。

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  <div class=''></div>",
            "</template>",
            "",
            "<script>",
            "import xxx from './xxx';",
            "",
            "export default {",
            "  //父组件通过 props 向下传递数据给子组件",
            "  props:{},",
            "  //import引入的组件需要注入此处能使用",
            "  components: {},",
            "  //此处存放数据",
            "  data() {",
            "    return {};",
            "  },",
            "  //计算属性",
            "  computed: {},",
            "  //监听data中数据变化",
            "  watch: {},",
            "  //方法集合",
            "  methods: {},",
            "  created() {}, //生命周期 - 创建完成",
            "  mounted() {}, //生命周期 - 挂载完成",
            "  beforeCreate() {}, //生命周期 - 创建之前",
            "  beforeMount() {}, //生命周期 - 挂载之前",
            "  beforeUpdate() {}, //生命周期 - 更新之前",
            "  updated() {}, //生命周期 - 更新之后",
            "  beforeDestroy() {}, //生命周期 - 销毁之前",
            "  destroyed() {}, //生命周期 - 销毁完成",
            "  activated() {}, //若页面有keep-alive缓存,此函数会触发",
            "}",
            "</script>",
            "<style scoped>",
            "</style>"
        ],
        "description": "Log output to console"
    }
}

3、新建vue文件后直接输入vue按下回车:

扫描二维码推送至手机访问。

版权声明:本文由曦的博客发布,如需转载请注明出处。

本文链接:http://xiblogs.top:1111/?id=20

“vscode使用vue代码模板” 的相关文章

vue打包后dist的使用

vue打包后dist的使用

发现问题vue项目完成打包出dist后准备打开index.html,发现居然页面是一片空白,f12一片报红。 分析问题经过多次网上查询后发现这是由于vue打包时,脚手架会帮你配置好大量参数,但其中路径publicPath被配置为了”/“,需要手动修改。 解决办法1、将vue.config.js中...

DataV兼容vue3的方法

DataV兼容vue3的方法

发现问题在使用vue开发大屏时,发现了一个很好用的可视化组件库DataV(http://datav.jiaminghi.com/ ),不是阿里那个DataV哈,用vue2开发时都一切顺利,直到有一天升级项目到vue3时,发现一堆报错,后面查了下,好像是DataV不兼容vue3,而vue3版本的Dat...

数据看板可视化

数据看板可视化

前言这段时间一直在做可视化,在我的项目中有一部分是电力巡检的数据可视化。其中的数据看板比较简单,我将其单独抽离出来形成一个demo,为保密demo中数据非真实数据。先看效果。 具体效果 链接相关 浏览链接:https://xiblogs.top/original/bigScreen/29/in...

纯前端实现图片验证码

前言之前业务系统中验证码一直是由后端返回base64与一个验证码的字符串来实现的,想了下,前端其实可以直接canvas实现,减轻服务器压力。 实现子组件,允许自定义图片尺寸(默认尺寸为100 * 40)与验证码刷新时间(默认时间为60秒)。同时暴露绘制验证码方法drawPic(),允许父组件直接调...

pinia的使用

pinia的使用

前言最近新开了个项目,以前老项目都是vue2+vuex开发的,都说用vue3+pinia爽得多,那新项目就vue3+pinia吧。这里记录一下pinia的使用。 使用方法 安装pinia: npm i piniamain.js中引入pinia: //main.js import { cre...

前端使用xlsx模板导出表格

前端使用xlsx模板导出表格

前言前端导出表格有很多种方案,但是表格样式一旦复杂了,那么就得用代码写excel的样式,还是比较麻烦的。每次样式不一样,就得重新写,这时使用表格模板的优势就体现出来了,想导出不同样式的表格直接修改表格模板即可。 方案我找了两种方案:1、使用xlsx-template,利用模板语法在xlsx中占位填...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。