vscode中快速生成vue页面模板

简介: vscode中快速生成vue页面模板

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站点击跳转浏览。


1.安装插件Vetur


2,在搜索框内搜索vue.json文件,可能显示的是vue,点击进去


3,加入代码


{
  "Vue": {
    "prefix": "vue",  
     "body": [
     "<!-- $1 -->",
     "<template>",
     "<div></div>",
     "</template>",
     "",
     "<script>",
     "export default {",
     "data() {",
     "//这里存放数据",
     "return {",
     "",
     "}",
     "},",
     "components: {},",
     "",
     "//方法集合",
     "methods: {\n",
     "},",
     "//生命周期 - 创建完成(访问当前this实例)",
     "created() {",
     "",
     "},",
     "//生命周期 - 挂载完成(访问DOM元素)",
     "mounted() {",
     "",
     "}",
     "}",
     "</script>",
     "<style scoped>",
     "/* @import url(); 引入css类 */",
     "$4",
     "</style>"
     ],
     "description": "Log output to console"
   }
}


4,测试是否添加成功


测试方法: 新建vue后缀文件,输入vue,按下tab键,OK

相关文章
|
6天前
|
JavaScript
【vue】如何跳转路由到指定页面位置
【vue】如何跳转路由到指定页面位置
19 0
|
6天前
|
JavaScript
|
6天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue3——如何实现页面访问拦截
Vue3——如何实现页面访问拦截
|
5天前
|
前端开发 JavaScript 安全
如何给页面元素添加水印背景,在vue中怎么处理?
如何给页面元素添加水印背景,在vue中怎么处理?
|
5天前
|
JavaScript 数据可视化 UED
用Vue搭建一个大屏数据可视化页面实战二(Vue实战系列)
用Vue搭建一个大屏数据可视化页面实战二(Vue实战系列)
|
5天前
|
JavaScript 前端开发 数据可视化
用Vue搭建一个大屏数据可视化页面实战一(Vue实战系列)
用Vue搭建一个大屏数据可视化页面实战一(Vue实战系列)
|
6天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
12 0
|
6天前
|
数据采集 Web App开发 JavaScript
vscode跟踪vue代码方法
vscode跟踪vue代码方法
11 0
|
6天前
|
JavaScript
vue项目切换页面白屏的解决方案
vue项目切换页面白屏的解决方案
12 0
|
6天前
|
监控 JavaScript 前端开发
vue切换页面白屏问题怎么解决
vue切换页面白屏问题怎么解决
20 0