css js写在一起 vue_写给女朋友的vue教程（三）

前言

5月18日带着女朋友去参加我哥的婚礼，也把我谈了5年的女朋友第一次带到我爸妈面前，颇为羞愧。看的出来，爸妈很喜欢她，她也给我爸妈准了些许小礼物，晚上带着我妈一起去吃了宵夜，能看出来我妈很拘谨。女朋友也收敛很多，我心里最重要的两个人第一次成功在孝感会晤，我作为举办方，表示很欣慰。参加这次婚礼感受良多。今年为了给女朋友一份安定，举全家之力，在盘龙城买了一套两居室的窝，为了不让她远嫁，所以选址在离她家8公里的一个小区(买不起她家旁边的)，房子解决了，安身立命之所有了，在就应该想着怎么娶她到家了。参加了这次婚礼，对以后的目标也越来越清晰，希望以后也能给她一个像样的婚礼，风光的娶她进门。加油吧！

开始正题

上个星期看了一下公司的前端项目，发现我还是太LOWB了，隔行如隔山，如今的前端远不是我在学校学的那些前端知识了，所以这篇文章不能以偏概全的去讲所有了，那么今天我先看看单文件组件以及Vue Loader的概念，不涉及到底层原理

单文件组件

先来说一下什么是组件吧，组件我理解的应该是一个界面上面的一个可以即插即用的一个模版，比如搜索，按钮，表格，分页等类似控件，根据项目整体风格，提供了统一化的样式，以及功能

这里我就不说官网上面集成到每个页面里面的组件了，这样不够灵活，应该整个项目的组件一个统一管理，统一调用，降低耦合，使其具有更高的可维护性

Vue单文件组件是一以.vue后缀结尾的文件，可以吧html，css，js写到一个文件中，实现对组件的一个封装

一般我们用vue-cli构建的项目自带一个components文件夹，可以将项目中频繁使用到的组件进行封装到单个vue文件里面，在项目中重复使用

一般在项目中会将组件封装成一个单独的文件，然后在需要的页面去import就好了，在使用的时候，需要在components属性中注册

import ComponentA from './ComponentA'import ComponentC from './ComponentC'export default { components: { ComponentA, ComponentC }, // ...}

Vue-Loader

Vue-loader是一个webpack的load，可以将vue文件转换为js模块

因为.vue是一个自定义的文件类型，用类html语法来写一个Vue组件，每个Vue文件包含三种类型的语言

 //html

即模版，脚本，样式。

Vue-Loader会去提取这些内容，然后组成js文件

这个是Vue-Loader的文档

https://vue-loader.vuejs.org/zh/

总结

其实这篇文章很水，关于Vue的东西这段时间不打算在写了，前端的东西涉及太广泛，我说出来的只是皮毛，以免误人子弟，前两篇文章只是基础中的基础，我根据公司的前端项目慢慢研究得来。如有错误，请指正！后期还是将重心放到Java上来。

最后

后面我会讲一些关于Java方面的学习心得，都是自己的看法，感受，经验，不会有很多理论。将重点放到工作中所需要用到的技术以及技巧上来。