cdn vue.js 怎么创建和使用组件

CDN (内容分发网络) 是一种服务，它允许你将静态资源如Vue.js库分发到全球各地的服务器节点，用户可以从最近的节点加载内容，提高页面加载速度。要在项目中通过CDN引入Vue.js并创建和使用组件，你可以按照以下步骤操作：

1. **引入Vue.js**:
在HTML头部添加CDN链接，这样浏览器会在加载页面时自动从CDN获取Vue.js文件：

   <script src="https://cdn.jsdelivr.net/npm/vue@latest"></script>

或者指定特定版本（替换`latest`为你需要的版本号）。

2. **创建Vue实例**:
创建一个空的JavaScript文件，初始化Vue应用：

   // app.js 或 main.js
   new Vue({
     el: '#app', // 将应用挂载到id为'app'的元素上
   });

3. **创建组件**:
使用Vue的`components`选项注册自定义组件，例如创建一个名为`HelloWorld.vue`的组件文件：

   <!-- HelloWorld.vue -->
   <template>
     <div>Hello, {{ message }}!</div>
   </template>
   <script>
   export default {
     data() {
       return { message: 'Vue Component' };
     }
   };
   </script>

然后在主文件中导入并使用这个组件：

   import HelloWorld from './HelloWorld.vue';

   Vue.component('hello-world', HelloWorld);

   // 在模板中使用
   <hello-world></hello-world>

4. **动态组件**:
如果想动态加载组件，可以使用`is`属性结合计算属性或函数来判断：

   <button @click="activeComponent = 'hello-world'">切换组件</button>
   <component :is="activeComponent">
     <transition-group name="list">
       <template v-for="comp in components">
         <component :is="comp" v-if="activeComponent === comp"></component>
       </template>
     </transition-group>
   </component>

   data() {
     return {
       activeComponent: 'hello-world',
       components: ['hello-world', 'other-component']
     }
   }