• vscode里使用.vue代码模板的方法


    1.设置.vue模板

    打开编辑器,点击文件 —— 首选项 —— 用户代码片段,会弹出来一个输入框。

    在输入框输入vue,回车,会打开一个vue.json文件。

    在里面复制以下代码:

    {
        "Print to console": {
            "prefix": "vue",
            "body": [
                "<!-- $1 -->",
                "<template>",
                "<div class='$2'>$5</div>",
                "</template>",
                "",
                "<script>",
                "//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)",
                "//例如:import 《组件名称》 from '《组件路径》';",
                "",
                "export default {",
                "//import引入的组件需要注入到对象中才能使用",
                "components: {},",
                "data() {",
                "//这里存放数据",
                "return {",
                "",
                "};",
                "},",
                "//监听属性 类似于data概念",
                "computed: {},",
                "//监控data中的数据变化",
                "watch: {},",
                "//方法集合",
                "methods: {",
                "",
                "},",
                "//生命周期 - 创建完成(可以访问当前this实例)",
                "created() {",
                "",
                "},",
                "//生命周期 - 挂载完成(可以访问DOM元素)",
                "mounted() {",
                "",
                "},",
                "beforeCreate() {}, //生命周期 - 创建之前",
                "beforeMount() {}, //生命周期 - 挂载之前",
                "beforeUpdate() {}, //生命周期 - 更新之前",
                "updated() {}, //生命周期 - 更新之后",
                "beforeDestroy() {}, //生命周期 - 销毁之前",
                "destroyed() {}, //生命周期 - 销毁完成",
                "activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发",
                "}",
                "</script>",
                "<style lang='scss' scoped>",
                "//@import url($3); 引入公共css类",
                "$4",
                "</style>"
            ],
            "description": "Log output to console"
        }
    }

     模板内容可按自己的喜好自行修改。

    然后新建一个.vue文件,输入vue然后按tab键。

    2.如果第一步没有成功

    如果第一步成功是最好的,万一按tab键没有成功生成模板,而是多了一个空格:

    步骤一:点击文件 —— 首选项 —— 设置,修改以下设置:

    "emmet.syntaxProfiles": {
      "vue-html": "html",
      "vue": "html"
    },
    "emmet.triggerExpansionOnTab": true

    步骤二:点击编辑器右下角笑脸左边的文件类型,选择配置文件关联,输入vue然后回车。右下角的文件类型就会从html变成vue。这时再用tab键就可以成功生成模板了~

  • 相关阅读:
    js/jquery键盘事件及keycode大全
    阿里巴巴首款商用字体免费开放:阿里巴巴普惠字体
    从kinit到kerberos安全机制
    react中dangerouslySetInnerHTML使用
    URLSearchParams
    React router的Route中component和render属性的使用
    SSH 命令的三种代理功能(-L/-R/-D)
    H5 直播的疯狂点赞动画是如何实现的?(附完整源码)
    CenterOS中安装Redis及开机启动设置
    使用require.context实现前端自动化
  • 原文地址:https://www.cnblogs.com/ertingbo/p/10599803.html
走看看 - 开发者的网上家园