【VUE基础】VUE3小技巧（持续更新）

一键快速生成自定义vue3模板代码

根据上图打开配置用户代码片段

搜索vue.jsond打开

	"Print to console": {
		"prefix": "vue",
		"body": [
			"<!-- $0 -->",
			"<template>",
			"  <div></div>",
			"</template>",
			"",
			"<script lang='ts'>",
			"import { reactive,toRefs,onBeforeMount,onMounted} from 'vue'",
			"interface DataProps {}",
	   
			"export default {",
			"    name: '',",
			"      setup() {",
			"          console.log('1-开始创建组件-setup')",
			"          const data: DataProps = reactive({",
			"",
			"          })",
			"          onBeforeMount(() => {",
			"              console.log('2.组件挂载页面之前执行----onBeforeMount')",
			"          })",
			"          onMounted(() => {",
			"              console.log('3.-组件挂载到页面之后执行-------onMounted')",
			"          })",
			"          const refData = toRefs(data);",
			"          return {",
			"              ...refData,",
			"          }",
			"",
			"      }",
			"  };",
			"</script>",
			"<style scoped>",
			"</style>"
		  ],
		"description": "a vue template"
	},
	"vue3模版代码":{
		"prefix": "vue3",
		"body": [
			"<!-- vue3代码 小C学安全 -->",
			"<template>",
			"  <div></div>",
			"</template>",
			"",
			"<script setup lang='ts'>",
			"import { ref,reactive} from 'vue'",
			"</script>",
			"<style scoped>",
			"</style>"
		  ],
		"description": "a vue3 template"
	}

}

将以上代码替换并保存
打开新的组件文件

浏览器自动打开

找到 package.json 配置文件!

 "scripts": {
  "dev": "vite --open",
  "build": "vue-tsc && vite build",
  "preview": "vite preview"
 },

vue3+ts错误：找不到模块“./App.vue”或其相应的类型声明。ts(2307)

1、在src文件夹找到 vite-env.d.ts 加入以下代码：

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  import type { DefineComponent } from 'vue'

  const vueComponent: DefineComponent<{}, {}, any>
  const vueComponent: DefineComponent<{}, {}, any>

  export default vueComponent
}

2、若无vite-env.d.ts文件，则在项目根目录创建 env.d.ts 文件（如果已有，则在文件中追加）以下代码：

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  import type { DefineComponent } from 'vue'

  const vueComponent: DefineComponent<{}, {}, any>
  const vueComponent: DefineComponent<{}, {}, any>

  export default vueComponent
}