标签:template ted div HERE stop UNC cursor connected vue
VSCode左下角设置图标 ==> 用户代码片段 ==> 搜索 vue.json ==> 回车
复制粘贴以下代码
{ // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are: // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the // same ids are connected. // Example: // "Print to console": { // "prefix": "log", // "body": [ // "console.log(‘$1‘);", // "$2" // ], // "description": "Log output to console" // } "Print to console": { "prefix": "vue", "body": [ "<template>" " <div>代码片段生成</div>" "</template>" "" "<script>" "export default {" " data: function() {" " return {}" " }," " methods: {}," " created() {}" "}" "</script>" "" "<style lang=‘less‘ scoped>" "</style>" "" ], "description": "vue模板一键生成" } }
保存
然后任何的vue 文件中都能通过 vue 指令 一键生成页面所需的vue模板
空页面第一次打没有提示的话, 是你的电脑速度不行, 等2s钟, 删除 从新打, 就会出 vue 提示
生成的模板如下
<template> <div>代码片段生成</div> </template> <script> export default { data: function() { return {}; }, methods: {}, created() {} }; </script> <style lang=‘less‘ scoped> </style>
style 需要注意以下, 如果项目中 生成的是 app.vue , 需要删除 scoped , 不然 定义的全局样式 不会生效 , 也可以通过 main.js 中单独引入一个css 文件
使用的预编译 是 less 如果需要写 原生的 css 代码, 请删除 lang = ‘less‘ , 不然 也会报错
关于 vue 格式化 函数前没有空格 , 函数结尾会生成 分号, 或者单双引号的问题, 请看
https://www.cnblogs.com/liuyuexue520/p/13099714.html
标签:template ted div HERE stop UNC cursor connected vue
原文地址:https://www.cnblogs.com/liuyuexue520/p/13292522.html