分享一个自己的vscode中vue自定义模板

简介: 分享一个自己的vscode中vue自定义模板

因为在公司都是用scss 规范化的代码,这里写一个自己的vue模板方便以后自己或者他人使用

一、ctrl + shift + p 在vscode打开弹窗输入snippets然后点击再输入vue点击会进入vue.json文件

二、编辑如下代码

"Print to console": {
    "prefix": "vue",
    "body": [
      "<template>",
      "  <div class=\"\">$0</div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  components:{},",
      "  data(){",
      "    return {",
      "    }",
      "  },",
      "  created(){},",
      "  mounted(){},",
      "  watch:{},",
      "  computed:{},",
      "  methods:{},",
      "}",
      "</script>",
      "<style lang=\"scss\" scoped>",
      "</style>"
    ],
    "description": "A vue file template"
  }

三、新建一个.vue文件,直接输入vue回车

相关文章
|
6天前
|
JavaScript
【实用模板】Vue代码文件常用弹窗页面组件
【实用模板】Vue代码文件常用弹窗页面组件
|
6天前
|
JavaScript
【实用模板】Vue代码文件常用创建或编辑抽屉
【实用模板】Vue代码文件常用创建或编辑抽屉
|
6天前
|
JavaScript API 开发者
Vue3自定义hooks
Vue3自定义hooks
8 0
|
6天前
|
移动开发 JavaScript 前端开发
ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
11 1
|
6天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
12 0
|
6天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable的自定义业务撤回申请组件的升级修改
ruoyi-nbcio-plus基于vue3的flowable的自定义业务撤回申请组件的升级修改
13 2
|
6天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable的自定义业务单表例子的升级修改
ruoyi-nbcio-plus基于vue3的flowable的自定义业务单表例子的升级修改
11 0
|
6天前
|
数据采集 Web App开发 JavaScript
vscode跟踪vue代码方法
vscode跟踪vue代码方法
11 0
|
6天前
|
JavaScript 前端开发
vue怎么自定义底部导航
vue怎么自定义底部导航
27 10
|
6天前
|
JavaScript API
vue 模板引用
vue 模板引用