vsCode Vue3配置

注node要最新版本，否则可能报错：

node -v

显示node版本：v22.12.0

一、新建项目：vue create web
二、依赖路由：npm install vue-router@4 

三、配置路由：

1./src/views/index.vue

2./src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import index from '../views/index.vue'
import about from '../views/about.vue'
const routes = [
    {
      path: '/',
      name: 'index',
      component: index
    },
    {
      path: '/about',
      name: 'about',
      component: about
    }
  ]
  
  const router = createRouter({
    history: createWebHistory(),
    routes
  })
  
  export default router

3./main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

createApp(App).use(router).mount('#app')

4/App.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'App',
  components: {
    
  }
}
</script>

<style>

</style>

安装naive-ui

npm i -D naive-ui

Vscode设置vue默认模板

文件–》首选项–》用户片段–》搜索vue–》找到vue.json–》粘贴这段代码

{
	"Print to console": {
		"prefix": "vue",
		"body": [
			"<template>",
			"  <div>",
			"  </div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"  name: '',",
			"  data () {",
			"    return {}",
			"  },",
			"  created () {},",
			"  methods: {},",
      "  mounted() {},",
      "  computed: {}",
			"}",
			"",
			"</script>",
			"<style scoped>",
			"</style>",
			""
		],
		"description": "Log output to console"
	}
}

新建一个vue文件，直接输入vue，点击回车