美文网首页
vscode快速新建vue页面模板

vscode快速新建vue页面模板

作者: 糖心儿的记录 | 来源:发表于2021-03-30 14:01 被阅读0次

    1.需要一个插件来识别vue文件

    插件库中输入vuter,install下载

    2.设置自己的代码片段

    3.输入以下代码
    打开“文件”File —— “首选项Preferences ”——“户代码片段User Snippets”, 输入 vue,选择 vue.json ==> 在vue.json文件里填入:(注意: "prefix": "v",为自己设置的快捷键)

    {

      "Print to console": {

          "prefix": "v",

          "body": [

              "<!-- $1 -->",

              "<template>",

              "<div class='$2'>$5</div>",

              "</template>",

              "",

              "<script>",

              "//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)",

              "//例如:import 《组件名称》 from '《组件路径》';",

              "",

              "export default {",

              "components: {},",

              "data() {",

              "//这里存放数据",

              "return {",

              "",

              "};",

              "},",

              "computed: {},",

              "watch: {},",

              "//方法集合",

              "methods: {",

              "",

              "},",

              "created() {",

              "",

              "},",

              "mounted() {",

              "",

              "},",

              "}",

              "</script>",

              "<style lang='less' scoped>",

              "//@import url($3); 引入公共css类",

              "$4",

              "</style>"

          ],

          "description": "Log output to console"

      }

    }

    相关文章

      网友评论

          本文标题:vscode快速新建vue页面模板

          本文链接:https://www.haomeiwen.com/subject/rqpwhltx.html