• 单文件组件

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

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

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

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

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

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

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

    2.  
    3. <script>
    4.  
    5. export default {
    6.     data() {
    7.         return {
    8.             num: 333
    9.         }
    10.     },
    11.     methods: {
    12.         change() {
    13.             this.num = 444
    14.         }
    15.     },
    16. }
    17. script>
    18.  
    19. <style>
    20. h1 {
    21.     color: red;
    22. }
    23. style>

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

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

    2.  
    3. <script>
    4. import first from "@/first.vue"
    5. export default {
    6.   components:{
    7.     //注册first组件
    8.     first
    9.   }
    10. }
    11. script>
    12.  
    13. <style>
    14.  
    15. style>

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

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

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

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

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

    2、style可以写多个

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