vue生成html页面,前端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": [""

"

代码片段生成

"

""

""

"

"export default {"

" data: function() {"

" return {}"

" },"

" methods: {},"

" created() {}"

"}"

""

""

"

""

""],"description": "vue模板一键生成"}

}

保存

然后任何的vue 文件中都能通过 vue 指令 一键生成页面所需的vue模板

空页面第一次打没有提示的话, 是你的电脑速度不行, 等2s钟, 删除 从新打, 就会出 vue 提示

生成的模板如下

代码片段生成

data:function() {return{};

},

methods: {},

created() {}

};

style 需要注意以下, 如果项目中 生成的是 app.vue , 需要删除 scoped , 不然 定义的全局样式 不会生效 , 也可以通过 main.js 中单独引入一个css 文件

使用的预编译 是 less 如果需要写 原生的 css 代码, 请删除 lang = ‘less‘ , 不然 也会报错

关于 vue 格式化 函数前没有空格 , 函数结尾会生成 分号, 或者单双引号的问题, 请看

原文：https://www.cnblogs.com/liuyuexue520/p/13292522.html