想象一下,在同一个文件中写入大量的组件时,这样在大型项目中运行时,我们在后期的维护中是很不便于管理的,同时在为组件命名上也注意每个组件的命名是否会重复造成报错,这种时候我们使用单文件组件,一组件一文件的写法可以相对的解决该困难.

单文件组件的创建: XXX.vue

在01文章中我们得知单文件组件用.vue结尾的文件进行创建.
一个组件就对应着一个文件,那么我们是如何在.vue中进行组件的写入的呢?

如何使用单文件组件:

• 1.加载完支持等项目中,直接建立XXX.vue文件

  
  
  嘻嘻.png

• 2.简单单件组件写法:它分为三部分分别是功能,结构,样式

<template>
<!-- 模板只有一个根元素 ,否则报错-->
    <div class="hello">
        <p>内容{{name}}</p>
    </div>
</template>

<script>
// 注意:写功能,开始它一定要输出一个对象,它相当于一个vue实例
    export default {
        data(){
            return {
                name:"我叫小花花"
            }
        },
        methods:{

        }
    }  
</script>

// 写css
<style lang='css'>
.hello {
    color: red;
}
</style>

• 3.将组件内容渲染到页面的指定位置：
  我使用webpack打包软件配合来进行使用的一下是在webpack.config.js的配置

我的转换打包源文件叫app.js

001.png

在app.js中做一下操作：

//1.下载vue.js文件并引入，命令：$ npm install vue。
import Vue from 'vue'

//2.引入写好的单文件组件
import hello from '../components/hello.vue'

//3. 创建个实例
new Vue(
    {
//确定组件使用范围
        el:'#app',
//将组件渲染入html中，render是个函数且有个参数是函数h，render函数会返回h，将要渲染组件放入h的函数参数中，它使得组件在指定的范围展示
        render:(h)=>{
            return h(hello)
        }
    }
)

• 4.添加webpack对单文件组件的支持：
  由于webpack并不支持转换vue类型的文件，如果需要支持要进行以下操作

• 1·下载：官网：https://vue-loader.vuejs.org/zh/guide/#%E6%89%8B%E5%8A%A8%E8%AE%BE%E7%BD%AE

• 2.配置：

// webpack.config.js
1.引入插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
------------------
module.exports={
module :{
//2.配置加载器
rules:[
  {
    test: /\.vue$/,
    loader: 'vue-loader'
},
      ]
}
----------------
//3.配置插件
plugins: [
    // 请确保引入这个插件来施展魔法
    new VueLoaderPlugin()
]
}

注意

常见错误：

如果我们用了html-webpack-plugin的时候，我们有自定义injuect文件注入位置的参数时

003.png

我们往往很容易出现一下的错误信息：

002.png

这是由于我们把转换后的文件放置在了头部的位置

004.png

使得js代码比body内写的代码，快一步解析，由于 id为app的div标签还没出现自然找不到该元素，因此使用时我们应该把
inject对象注释掉（inject参数默认为body）