重庆自适应网站建设网站模板设计教程

 

安装 Node.js 与 Vue CLI‌

npm install -g @vue/cli  
vue create my-vue-project  
cd my-vue-project  
npm run serve  

通过 Vue CLI 可快速生成项目骨架，默认配置适合新手快速上手

目录结构‌

src/  
├── components/    # 存放组件文件  
│   └── HelloWorld.vue  
├── App.vue        # 根组件  
└── main.js        # 入口文件  

推荐按功能模块划分组件目录，提升可维护性

组件创建与注册

单文件组件（SFC）基础结构‌

<template>
  <div class="my-component">
    <h1>{{ title }}</h1>
    <button @click="handleClick">操作</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return { title: '组件标题' };
  },
  methods: {
    handleClick() { console.log('事件触发'); }
  }
};
</script>

<style scoped>
.my-component { color: #333; }
</style>

<template>定义结构，<script>处理逻辑，<style scoped>限定样式作用域

全局注册与局部注册‌

• ‌全局注册（适用于高频使用组件）‌;  

// main.js  
import MyComponent from '@/components/MyComponent.vue';
Vue.component('MyComponent', MyComponent);  

局部注册（适用于按需加载）‌

<script>
import MyComponent from '@/components/MyComponent.vue';
export default {
  components: { MyComponent }
};
</script>

全局注册后可在任意模板中调用，局部注册需在父组件中显式引入

组件通信

Props 数据传递（父→子）

<!-- 父组件 -->  
<ChildComponent :message="parentData" />  

<!-- 子组件 -->  
<script>
export default {
  props: {
    message: { type: String, required: true }
  }
};
</script>

自定义事件（子→父）‌

<!-- 子组件触发事件 -->  
<button @click="$emit('update-data', newData)">提交</button>  

<!-- 父组件监听事件 -->  
<ChildComponent @update-data="handleUpdate" />

进阶功能

插槽（Slot）实现内容分发‌

<!-- 父组件 -->  
<Modal>  
  <template v-slot:header>自定义标题</template>  
  <p>默认插槽内容</p>  
</Modal>  

<!-- 子组件 Modal.vue -->  
<div class="modal">  
  <slot name="header"></slot>  
  <slot></slot>  
</div>

生命周期钩子‌

export default {
  created() { console.log('组件实例已创建，数据未渲染'); },  
  mounted() { console.log('DOM 已挂载，可操作 DOM'); },  
  beforeDestroy() { console.log('组件销毁前清理资源'); }  
};

*常用钩子包括 created、mounted、updated 和 beforeDestroy

最佳实践

1. ‌组件设计原则‌

   • ‌单一职责‌：每个组件仅处理单一功能‌。
   • ‌可复用性‌：通过 props 和 events 解耦逻辑‌。
   • ‌模块化‌：拆分大型组件为多个子组件‌。

2. ‌样式隔离与复用‌

   • 使用 <style scoped> 避免样式污染‌。
   • 通过 @mixin 或 CSS 变量实现样式复用‌。

 提示：调试时可结合 Vue Devtools 查看组件层级与数据流‌

我用夸克网盘分享了「无需网络快速部署deepseek」。
链接：https://pan.quark.cn/s/1cc8de40d71b