项目创建
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
