(五)组件化开发

 <div id="app">
    <h2>{{message}}</h2>
  </div>
  
  <script>
    const app = Vue.createApp({
      data(){
        return {
          message: "Hello Vue"
        }
      },
    })

    //挂载
    app.mount("#app")
  </script>

 <script>
      // App根组件
      const App = {
        data() {
          return {
            message: "Hello Vue",
          };
        },
      };
      const app = Vue.createApp(App);

      //挂载
      app.mount("#app");
    </script>

全局组件和局部组件

真实开发中，通过后缀名为.vue的single-file components(SFC,单文件组件)来解决，并且可以使用webpack或者vite或者rollup等构建工具进行处理。处理成js对象。

想要使用SFC的.vue文件，常见的两种方式： 1，使用Vue CLI来创建项目，项目默认配置好所有的配置选项，可以在其中直接使用.vue文件

2，自己使用webpack或者rollup或vite这类打包工具，对其进行打包处理。

vue项目目录