《vue3使用方法图解》

一、解决方案

Vue3作为一款优秀的前端框架，能帮助开发者快速构建用户界面。它采用组合式API等新特性，简化了组件的开发逻辑。对于初学者或者想要从Vue2迁移过来的开发者，掌握Vue3的使用方法是非常必要的。

二、创建Vue3项目并引入Vue

1. 使用Vue CLI创建

这是最常用的方式。确保安装了Node.js环境，然后通过命令行全局安装Vue CLI：
bash npm install -g @vue/cli
接着创建项目：
bash vue create my - project
在创建过程中可以根据提示选择相关配置，如是否使用vuex、vue - router等。创建完成后进入项目目录：
bash cd my-project
运行项目：
bash npm run serve

2. 使用CDN引入（适用于简单页面）

如果只是做简单的页面展示，不想搭建复杂的开发环境，可以直接在HTML文件中通过CDN引入Vue3。
```html

Vue3 CDN示例

const app = Vue.createApp({
data() {
return {
message: 'Hello Vue3!'
}
}
})
app.mount('#app')

</p>

<h2><h2>三、组件化开发</h2></h2>

<h3>1. 基础组件定义</h3>

<p>```javascript
// MyComponent.vue

  <div class="my - component">
    <p>{{ msg }}</p>
  </div>
</p>


export default {
  name: 'MyComponent',
  props: {
    msg: String
  }
}



.my-component {
  color: red;
}


<p><code>
在主应用中使用该组件：
javascript
import { createApp } from 'vue'
import App from './App.vue'
import MyComponent from './components/MyComponent.vue'

const app = createApp(App)
app.component('MyComponent', MyComponent)
app.mount('#app')