Vue CLI 是 Vue.js 的官方命令行工具，它提供了快速生成 Vue.js 项目和组件的能力。以下是使用 Vue CLI 创建组件的基本步骤
Vue CLI 组件学习
安装 Vue CLI
首先，确保你已经安装了 Node.js 和 npm。然后，使用 npm 安装 Vue CLI：
npm install -g @vue/cli
创建一个新的 Vue.js 项目
使用 Vue CLI 创建一个新的项目：
vue create my-project
按照提示选择配置，或者直接使用默认配置。
进入项目目录
cd my-project
创建一个 Vue 组件
在 Vue CLI 项目中，你可以使用以下命令创建一个新的组件：
vue add ComponentName
这将在 src/components 目录下创建一个名为 ComponentName.vue 的新文件。
Vue 组件基础
一个基本的 Vue 组件通常包含三个部分：模板（template）、脚本（script）和样式（style）。
<template><div><h1>{{ message }}</h1></div>
</template><script>
export default {name: 'ComponentName',data() {return {message: 'Hello Vue!'}}
}
</script><style scoped>
h1 {color: red;
}
</style>
模板（Template）
模板是组件的 HTML 结构，使用 Vue 的模板语法。
脚本（Script）
脚本部分定义了组件的逻辑，包括数据、计算属性、方法等。
样式（Style）
样式定义了组件的外观。使用 scoped 属性可以确保样式只应用于当前组件。
使用组件
在 Vue 应用中使用组件，需要在父组件中导入并注册：
<template><div><component-name></component-name></div>
</template><script>
import ComponentName from './components/ComponentName.vue'export default {components: {ComponentName}
}
</script>
组件通信
Vue 提供了多种方式来实现父子组件之间的通信，包括 props、事件和 Vuex。
Props
父组件可以通过 props 向子组件传递数据：
<template><child-component :parent-message="message"></child-component>
</template><script>
import ChildComponent from './components/ChildComponent.vue'export default {components: {ChildComponent},data() {return {message: 'Hello from parent!'}}
}
</script>
子组件通过 props 接收数据：
<template><div>{{ parentMessage }}</div>
</template><script>
export default {props: ['parentMessage']
}
</script>
事件
子组件可以通过事件向父组件发送消息：
<template><button @click="notifyParent">Click me</button>
</template><script>
export default {methods: {notifyParent() {this.$emit('child-event', 'Hello from child!')}}
}
</script>
父组件监听事件：
<template><child-component @child-event="handleEvent"></child-component>
</template><script>
import ChildComponent from './components/ChildComponent.vue'export default {components: {ChildComponent},methods: {handleEvent(message) {console.log(message)}}
}
</script>
总结
通过 Vue CLI，你可以快速创建和管理 Vue.js 组件。了解组件的基本结构和通信方式，可以帮助你更好地构建 Vue 应用。
