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