webStorm Vue3 页面模板

<template></template><script>
import {provide,markRaw,computed,watch,watchEffect,reactive,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》'
export default {name: "${COMPONENT_NAME}",components:{},props:{},//自定义事件父组件传递过来自定义事件名写在里面即自定义事件，没有写在里面即原生事件emits:[],/*** 声明周期 - 创建之前、完成（可以访问当前实例） 类似beforeCreate、create* @param 值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。* @param context 上下文对象*  attrs：值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于this.attrs。*  slots：收到的插槽内容，相当于this.slots。*  emit：分发自定义事件的函数，相当于this.emit*/setup(props,context){console.log('---setup---',props,context)/*** 源数据*/let data = reactive({})/*** 源方法：主要负责页面逻辑及事件函数*/let fun = markRaw(reactive({'init':'(()=>{})'}))/*** 自定义hook函数主要用于发送axios请求* hook*/let hooks = markRaw(reactive({'init':'引入js.导出方法'}))/*** 监视效应*/watchEffect(() => {})/*** 监视*/watch(data,(newValue,oldValue)=>{})/*** 计算属性*/data.author = computed({get(){},set(value){}})/*** 像孙组件传递数据*/provide('transferData',null);//通过组合式API的形式去使用生命周期钩子/*** 生命周期 - 挂载之前*/onBeforeMount(()=>{console.log('---onBeforeMount---')})/*** 声明周期 - 挂载完成（可以访问DOM元素）*/onMounted(()=>{console.log('---onMounted---')})/*** 生命周期 - 更新之前*/onBeforeUpdate(()=>{console.log('---onBeforeUpdate---')})/*** 生命周期 - 更新之后*/onUpdated(()=>{console.log('---onUpdated---')})/*** 生命周期 - 卸载之前*/onBeforeUnmount(()=>{console.log('---onBeforeUnmount---')})/*** 生命周期 - 卸载完成*/onUnmounted(()=>{console.log('---onUnmounted---')})/*** 返回一个对象（常用）*/return {data,fun,hooks}},}
</script><style scoped></style>

欢迎各位大佬指正不足之处~！

webStorm Vue3 页面模板相关推荐

Html第1集：WebStorm 安装、vue3.0 安装、npm安装
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/126379205 本文出自[赵彦军的博客] 文章目录 WebStorm vue3.0 ...
WebStorm配置eslint检查自动格式化(自动解决eslint问题\Vue3项目解决ESLint问题)
参考注意:需要修改一个地方才能ctrl + s保存,并且根据eslint的规则自动格式化(我一般都是按个空格,然后ctrl + s保存). 还可以设置:(未测试)
webstorm 不识别.config文件_webstorm好用的十款插件
1,CodeGlance 代码的缩略图,VScode,sublime编辑器都有这个功能 2,Rainbow Brackets 彩虹颜色的括号看着很舒服敲代码效率变高 https://plugins ...
【Vue】Docker + Nginx 部署 Vue3.0 项目
Docker + Nginx 部署 Vue3.0 项目 1.用指令 npm run build 打包vue.js项目(该项目是在WebStorm里面新建的Vue空项目). 打包成功后,会生成一个目录d ...
低代码平台，JeecgBoot v3.0版本发布—新里程牌开始，迎接VUE3版本到来
项目介绍 JeecgBoot是一款基于代码生成器的低代码平台!前后端分离架构 SpringBoot2.x,SpringCloud,Ant Design&Vue,Mybatis-plus,Shi ...
TypeScript及TypeScript在vue3.0项目中的基本使用
一. TypeScript是什么 TypeScript 是一种由微软开发的自由开源的编程语言,主要提供了类型系统和对 ES6的支持.它是JavaScript的一个超集,扩展了JavaScript的语 ...
springboot vue3 elementui plus小说阅读网站源码
开发环境及工具: 大等于jdk1.8,大于mysql5.5,nodejs,idea(eclipse),vscode(webstorm) 技术说明: springboot mybatis vue3 el ...
Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例
vue3-webchat 基于vue3.0.5开发的仿微信|QQ界面桌面端聊天实例. 运用vue3.x全家桶技术+element-plus+v3layer+v3scroll搭建的仿微信/QQ界面网页聊 ...
详解从零搭建企业级 vue3 + vite2+ ts4 框架全过程
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群本文不仅仅是搭建个脚手架这么简单,还会带你了解每一步.甚至每一个配置项的作用,和每个配置的知 ...

webStorm Vue3 页面模板

webStorm Vue3 页面模板

webStorm Vue3 页面模板相关推荐

最新文章

热门文章