Vue太难啦！从入门到放弃day08——Vue前端工程化之Vue脚手架

一、Vue 单文件组件

1.1 传统组件的问题和解决方案

传统组件的缺陷：
    全局定义的组件不能重名，字符串模板缺乏语法高亮，不支持css(当html和js组件化时，css没有参与其中)
    没有构建步骤限制，只能使用H5和ES5，不能使用预处理器（babel）

解决方案：使用Vue单文件组件，每个单文件组件的后缀名都是.vue

1.2 Vue单文件组件的基本用法

每一个Vue单文件组件都由三部分组成
    template组件组成的模板区域
    script组成的业务逻辑区域
    style样式区域


<template>
	<!-- 这里用于定义Vue组件的模板内容 -->
</template>

<script>
// 这里用于定义Vue组件的业务逻辑
export default {
   
	data: () {
    return {
   } }, // 私有数据
	methods: {
   } // 处理函数
	// ... 其它业务逻辑
}
</script>

<style scoped>
	/* 这里用于定义组件的样式 */
</style>

1.3 webpack 中配置 vue 组件的加载器

① 运行 npm i vue-loader vue-template-compiler -D 命令 
② 在 webpack.config.js