项目工程化

在开发Vue项目时，我们可以采取工程化的视角，通过搭建脚手架和使用适当的开发模板来实现快速开发和规范化的项目管理。

搭建脚手架

通常我们可以使用vue-cli或npm init vite来搭建一个Vue项目的脚手架，以快速创建项目基础结构和配置文件。其中，vue-cli是一个全局安装的命令行工具，而npm init vite是通过npm包管理器来初始化项目。

# 使用vue-cli
$ vue create

# 使用npm init vite
$ npm init vite

这样就可以创建一个基本的Vue项目，包含了一些默认的目录结构和配置文件。

项目的开发模板

使用vue-cli或npm init vite创建项目后，会生成一个开发模板，其中包括了一些常用的文件和目录，如：

src目录：存放源代码文件
public目录：存放公共资源文件
package.json：项目的配置文件，包含了项目的依赖、脚本等信息

安装依赖并运行项目

在项目目录下，可以通过以下命令安装项目所需的依赖包：

$ npm install

安装完成后，可以使用以下命令来运行项目：

$ npm run dev

这样就可以在开发环境下启动项目，并通过浏览器访问相应的地址进行预览和调试。

组件思想

Vue的核心思想之一就是组件化，通过将页面拆分为独立的组件来实现代码的复用和管理。下面介绍一些与组件相关的概念和技术。

组件的创建和使用

以点亮星星为例

vue项目组件概念

在Vue中，我们可以创建一个组件，将其封装为一个单独的.vue文件。例如，我们可以创建一个名为Rate的组件：

<script setup>
import {defineProps, computed} from 'vue';
// 父子组件信任通信
// 外界传输的参数对象
 let props=defineProps({
    value:Number,
    theme:{
        type:String,
        default:'orange'
    }
})
// 计算属性，data/props 再计算一下 总价
let rate = computed(()=>"★★★★★☆☆☆☆☆".slice(5-props.value,10-props.value))
let fontStyle = computed(()=>`color:${props.theme};`)
</script>

<template>
<div :style="fontStyle">Rate{{rate}}</div>
</template>

<style scoped>
</style>

然后，在其他组件或页面中使用该组件，只需引入并在模板中添加相应的标签即可。

<script setup>
// vue 主要工作开发组件
// 响应式思想
// vue3语法  ref响应式
import {ref} from 'vue';  //分数变了自动更新
// 组件化思想
import Rate from './components/Rate.vue'
let score = ref(3) //data
setTimeout(()=>{
  // 组件 = UI + 数据状态
  //状态的改变
  score.value = 4
},2000)
</script>

<template>
<!--   评分，五颗星星，点亮 组件思维-->
<Rate :value="score" />
<Rate :value="score" theme="red" />
</template>

<style scoped>

</style>

template里写的非html标签，组件可以复用，同事之间复用，项目之间可以复用<Rate />。
这样就可以在父组件中使用Rate组件，并实现代码的复用。

父子组件通信

在Vue中，父子组件之间的通信可以通过props和事件来实现。

父组件向子组件传递数据：通过props将父组件的数据传递给子组件。

<template>
  <div>
    <ChildComponent :value="score" />
  </div>
</template>

<script>
import ChildComponent from './components/ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      score: 3
    }
  },
  // 其他代码
}
</script>

子组件向父组件发送事件：子组件可以通过$emit方法触发一个自定义事件，然后父组件监听该事件并处理相应的逻辑。

<!-- ChildComponent.vue -->
<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('custom-event', data)
    }
  },
  // 其他代码
}
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent @custom-event="handleEvent" />
  </div>
</template>

<script>
import ChildComponent from './components/ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(data) {
      // 处理事件的逻辑
    }
  },
  // 其他代码
}
</script>

数据的响应式

在Vue中，数据是响应式的，也就是说当数据发生变化时，页面会自动更新。

例如，在组件中定义一个状态数据：

<script>
import { ref } from 'vue'

export default {
  setup() {
    const score = ref(3)

    // 其他代码

    return {
      score
    }
  },
  // 其他代码
}
</script>

在模板中使用这个状态数据：

<template>
  <div>
    <p>{{ score }}</p>
    <button @click="changeScore">Change Score</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const score = ref(3)

    const changeScore = () => {
      score.value = 4
    }

    return {
      score,
      changeScore
    }
  },
  // 其他代码
}
</script>

当点击按钮改变score的值时，页面上显示的数据会自动更新。

数据类型和单向数据绑定

在Vue中，我们可以通过data、props和computed来定义数据的类型和进行数据绑定。

data用于定义组件自身的数据，可以设置默认值和类型。

<script>
export default {
  data() {
    return {
      count: 0, // 默认值为0
      message: '', // 默认为空字符串
      isActive: false, // 默认为false
      scores: [] // 默认为空数组
    }
  },
  // 其他代码
}
</script>

props用于接收父组件传递的数据，也可以设置默认值和类型。

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: ''
    },
    isActive: {
      type: Boolean,
      default: false
    },
    scores: {
      type: Array,
      default: () => []
    }
  },
  // 其他代码
}
</script>

computed用于定义计算属性，可以根据已有的数据计算出新的数据。

<script>
export default {
  computed: {
    doubleCount() {
      return this.count * 2
    },
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  },
  // 其他代码
}
</script>

数据绑定

在Vue中，我们可以使用双花括号语法({{}})来进行数据绑定，实现动态数据渲染。

<template>
  <div>
    <p>{{ value }}</p>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  // 其他代码
}
</script>

上述代码中，value是一个props属性，通过双花括号语法将其绑定到模板中，当value的值发生改变时，模板中的数据也会相应更新。

原文链接：https://juejin.cn/post/7316968305465589811 作者：挖稀泥的工人