Vue3基础

项目创建

npm create 命令

使用 npm create 命令来创建 Vue 项目，通常是通过 Vite（Vue 官方推荐的构建工具）来创建 Vue 应用。
在 Vite 中，npm create 是用来执行脚手架工具（如 vite@latest）来快速生成一个新的项目模板。

npm create vite@latest <project-name> --template vue

npm create ：用于执行项目模板的命令，它会创建一个新的项目，并从给定的模板中初始化。
vite@latest ：vite 是创建 Vue 3 项目的工具，@latest 是指定使用最新版的 Vite，确保你创建的项目是基于最新版本的 Vite。如果没有 @latest，npm 会尝试使用当前安装的版本。
<project-name>：新创建项目的文件夹名称。命令会创建一个文件夹，并将模板代码放入其中。例如，运行 npm create vite@latest my-vue-app --template vue 会在当前目录下创建一个名为 my-vue-app 的文件夹，并将 Vue 项目的模板文件放入其中。
--template vue：--template vue 指定了要使用的模板类型。Vite 支持多种模板，vue 是专门为 Vue 3 提供的模板。还有其他模板，如 vanilla、react、svelte 等。

渲染过程

index.html (静态HTML)
    ↓
main.js (JavaScript入口)
    ↓
App.vue (Vue根组件)
    ↓
其他子组件 (HelloWorld等)

基础组件

Vue 单文件组件（Single File Component，简称 SFC）是 Vue.js 框架的文件格式，它允许开发者将 HTML、JavaScript 和 CSS 代码放在一个文件中，通常以 .vue 为文件后缀。单文件组件是一种可复用的代码组织形式，它将从属于同一个组件的 HTML、CSS 和 JavaScript 封装在使用 .vue 后缀的文件中。
创建 Vue 实例

#Demo1.vue
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Demo1!'
    }
  }
}
</script>

<style>
h1 {
  color: blue;
}
</style>

#Demo2.vue
<template>
  <div>
    <h2>{{ message }}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Demo2!'
    }
  }
}
</script>

<style>
h2 {
  color: red;
}
</style>

Demo1使用局部注册

#App.vue
<template>
  <div><Demo1 msg="demo1"/></div>
  <div><Demo2 msg="demo2"/></div>
</template>

<script>
import Demo1 from './components/Demo1.vue'

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

Demo2使用全局注册

import { createApp } from 'vue'
import App from './App.vue'
import Demo2 from './components/Demo2.vue'
import './index.css'

// 创建应用实例
const app = createApp(App)

app.component('Demo2', Demo2)  // 全局注册
app.mount('#app')

image.png

参考链接

https://www.runoob.com/vue3/