单文件组件

单文件组件，即每个组件单独一个文件（后缀.vue），按需导入。

这样做的好处：业务区分更加明显，能够更好的维护，不用在一个文件中写所有代码，在团队开发时可以很好的分工完成。

前面我们在html文件中通过src外部导入Vue.js框架，今天我们不再这样，我们直接下载Vue的包导入到项目中，直接在vue的代码环境中写项目 。

我们在小黑窗通过npm i vue/cli -S下载官方脚手架，webpack它会帮我们将我们写在.vue后缀的组件解析为一个对象。

在下载完成后，我们找到vue.config.js文件，这是vue的打包配置文件，我们将严格模式关闭，否则非常不利于我们写代码：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false//关闭严格模式
})

在src下创建一个后缀为vue的文件开始创建一个组件吧

<template>
    <div>
        <h1>111</h1>
        <h2>222</h2>
        <h3>{{ num }}</h3>
        <button @click="change">点击改变333</button>
    </div>

</template>

<script>

export default {
    data() {
        return {
            num: 333
        }
    },
    methods: {
        change() {
            this.num = 444
        }
    },
}
</script>

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

特别注意：每一个组件内部即template中只能有一个根元素 ，不要在根元素上写v-for 循环超过2次就会出现多个根元素。

这时当我们需要使用它时，再另一个App.vue文件中导入注册组件，在vue中导入文件时，@代表了src目录的意思，如：

<template>
 <div>
    <first></first>
 </div>
</template>

<script>
import first from "@/first.vue"
export default {
  components:{
    //注册first组件
    first
  }
}
</script>

<style>

</style>

最后再入口文件main.js中导入App.vue

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

终端运行npm run serve,在浏览器看看效果

 即单文件组件的创建和使用已经基本了解，还需要了解注意点：

1、注册的组件名不能跟vue中的和原生DOM的重名,注册的名字是驼峰 使用时就用连字符

2、style可以写多个

3、（重点）如果.vue的script注释了  在打包的时候 vue的打包环境 会帮我们把这个文件解析为一个对象 然后给这个对象添加一个template属性  值为解析的template页面模板字符串
也就是说 .vue文件中 可以不要<style>和<script> 但是不能不写<template>

关于项目的资源打包问题

.vue文件在webpack的环境下被打包，通过import或者在标签中src请求，资源都会打包处理；但是将资源地址写在data中，标签来获取时webpack不会打包，data中的数据时浏览器执行来调用，他不认识字符串资源是什么会导致资源无法正常显示。