vue3 cli

// Vue 3 CLI 示例代码

// 1. 创建一个 Vue 3 项目
// 打开终端并运行以下命令来创建一个新的 Vue 3 项目：
// npm install -g @vue/cli
// vue create my-vue3-project

// 2. 在 src/main.js 中配置 Vue 应用
import { createApp } from 'vue'
import App from './App.vue'

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

// 3. 创建一个简单的组件 (src/components/HelloWorld.vue)
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- 4. 在主应用文件中使用该组件 (src/App.vue) -->
<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

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

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

解释说明：

1. 创建 Vue 3 项目：首先需要全局安装 Vue CLI，然后使用 vue create 命令创建一个新的 Vue 3 项目。
2. 配置主应用文件：在 main.js 中，我们使用 createApp 函数来创建一个 Vue 实例，并将其挂载到 HTML 的 #app 元素上。
3. 创建组件：在 HelloWorld.vue 文件中，我们定义了一个简单的 Vue 组件，它接受一个 msg 属性并在模板中显示。
4. 使用组件：在 App.vue 中，我们导入并注册了 HelloWorld 组件，并在模板中使用它。

以上代码展示了如何使用 Vue CLI 创建和配置一个基本的 Vue 3 项目。