【DAY39】VUE项目初始化（脚手架学习）

package.json

{
  "name": "vue-project1",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

包管理

dependencies：运行时依赖

devDependencies：开发时依赖

vue.config.js  ：

脚手架的配置文件，规定项目的编译过程和运行过程

主键：

在 Vue 中，主键（key）是指用于唯一标识并区分各个列表项的属性，它通常用于优化列表渲染性能、减少不必要的 DOM 操作和提高应用的响应速度。

在列表渲染中，Vue 通过监听数据变化并重新渲染视图来实现界面的更新。当数据发生变化时，Vue 将重新渲染整个列表，并在新的列表中重新创建相应的 DOM 元素。如果没有主键的话，Vue 只能按照新增、更新、删除的顺序依次遍历新老列表中的每一项，然后进行对应的 DOM 操作，这种方式效率比较低下。

而如果设置了主键，Vue 就可以逐项比较新老列表的差异，并进行针对性的 DOM 操作，从而避免了不必要的重新渲染和 DOM 操作，提高了应用的性能。具体来说，通过主键 Vue 可以：

1. 更准确的识别出新创建、被修改和被删除的列表项
2. 避免冗余的 DOM 操作，提高应用的性能和响应速度

在 Vue 中给列表渲染添加主键，只需要为列表数据中的每一项增加一个唯一标识符属性，然后在列表渲染的元素上添加 v-bind:key 指令，并指定主键的属性名即可，例如：

<ul>
  <li v-for="item in items" v-bind:key="item.id">
    {{ item.title }}
  </li>
</ul>

在上述例子中，我们为列表项增加了一个 id 属性作为唯一标识符，然后在 v-for 循环指令中，使用 v-bind:key 指令把这个唯一标识符的值绑定为主键，这样 Vue 就可以管理列表项的状态并优化渲染逻辑。

组件：

在 Vue 中，组件（component）是指可复用、独立和具有特定功能的代码块，它们通常由模板、样式和行为组成，可以在一个 Vue 应用中被多次使用。Vue 中组件化的思想旨在让代码的可复用性更强，使得代码更加模块化、可维护性更强，并且降低了代码耦合度，提高了应用性能。

在 Vue 应用中，一个组件可以被看作是一个自定义元素，它们包含了一些属性和方法，以及数据、事件和生命周期等相关信息。通过定义一个组件，我们可以将这些相关信息封装在一个单独的作用域中，并且可以在应用中使用该组件，从而使得应用被划分为一个个独立的、可复用的组件。

Vue 中的组件可以分为两类：全局组件和局部组件。全局组件是指在应用中的任何地方都可以被引用和使用的组件，而局部组件是指只能在另一个组件内部使用的组件。

下面是一个 Vue 组件的示例：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ desc }}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    desc: {
      type: String,
      default: 'This is a component!'
    }
  }
}
</script>

<style scoped>
h1 {
  color: red;
}
</style>

在这个组件中，模板用于渲染视图，脚本用于定义组件的属性和行为，样式用于定义组件的样式。该组件定义了两个属性：title 和 desc，并在模板中使用它们渲染视图，同时设置了一些样式。

在一个 Vue 应用中使用该组件的代码如下：

<template>
  <div>
    <my-component title="Hello, Vue!" />
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    'my-component': MyComponent
  }
}
</script>

在应用的模板中，我们使用了自定义的 my-component 标签来引用该组件，同时通过 title 属性向组件传递数据