01vue3学习-创建项目

1、创建项目

npm create vue@latest

按提示输入

2、安装依赖包

npm install

3、安装插件

TypeScript Vue Plugin (Volar)
Vue Language Features (Volar

 

 4、运行项目

npm run dev

 

5、安装vite-plugin-vue-setup-extend 插件，可以修改组件名称跟文件名不一样

npm i vite-plugin-vue-setup-extend -D

vite.config.ts里面个修改以下代码

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    VueSetupExtend(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

应用：

创建一个Person.vue

组件名称用：Person123

<template>
  <div>
    <h1>{{ name }}</h1>
    <p>{{ age }}</p>
  </div>
</template>

<script setup lang="ts" name="Person123">

   let name = 'John'
   let age = 30

</script>

调试的时候可以看到名称跟着变