4.vue-cli搭建工程

一、vue-cli

1. vue-cli是一个脚手架工具，用于搭建vue工程。
2. 它内部使用了webpack，并预置了诸多插件（plugin）和加载器（loader），以达到开箱即用的效果。
3. 除了基本的插件和加载器外，vue-cli还预置了：

• babel
• webpack-dev-server
• eslint
• postcss
• less-loader

二、SFC

1. 单文件组件，Single File Component，即一个文件就包含了一个组件所需的全部代码

<template>
	<!-- 组件模板代码 -->
</template>

<script>
export default {
  // 组件配置
}
</script>

<style>
	/* 组件样式 */
</style>

三、预编译

1. 当vue-cli进行打包时，会直接把组件中的模板转换为render函数，这叫做模板预编译。

2. 这样做的好处在于：

• 运行时就不再需要编译模板了，提高了运行效率
• 打包结果中不再需要vue的编译代码，减少了打包体积。
  

四、写一个头像组件avatar

// Avatar.vue
<template>
  <img
    class="avatar-img"
    :src="url"
    :style="{
      width: size + 'px',
      height: size + 'px',
    }"
  />
</template>

<script>
export default {
  props: {
    url: {
      type: String, // url属性必须是一个字符串
      required: true, // 属性必传
    },
    size: {
      type: Number,
    },
  },
};
</script>

<style scoped>
/* 带有作用域的样式 */
.avatar-img {
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
</style>
// App.vue
<template>
  <div>
    <h1>App组件</h1>
    <Avatar
      url="http://mdrs.yuanjin.tech/FgMwAPYq17So9nwVH44ltDHo7u3c"
      :size="150"
    />
    <Avatar
      url="https://qiheizhiya.oss-cn-shenzhen.aliyuncs.com/image/avatar8.jpg"
      :size="50"
    />
  </div>
</template>

<script>
import Avatar from "./components/Avatar";
export default {
  name: "App", // 如果组件没有在注册的时候指定名字，则使用该名字
  components: {
    Avatar,
  },
};
</script>

1. 在写组件时应该先确认组件需要传入什么属性。