55.Vue单文件组件

• 55.Vue单文件组件
  • 1.传统组件的问题和解决方案
  • 2.Vue单文件组件的基本用法
  • 3.webpack中配置vue组件的加载器

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

1.问题

1.全局定义的组件必须保证组件的名称不重复

2.字符串模板缺乏语法高亮, 在 HTML 有多行的时候, 需要用到丑陋的 \

3.不支持 CSS 意味着当 HTML 和 Javascript 组件化时, CSS明显被遗漏

4.没有构建步骤限制, 只能使用 HTML 和 ES5 Javascript, 而不能使用预处理器 (如: Babel)

2.解决方案

针对传统组件的问题, Vue 提供了一个解决方案 ---- 使用 Vue 单文件组件.

2.Vue单文件组件的基本用法

单文件组件的组成结构

• template 组件的模板区域
• script 业务逻辑区域
• style 样式区域

代码如下：

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

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

<style scoped>
    /*这里用于定义样式代码区域*/
</style>

补充：安装Vetur插件可以使得.vue文件中的代码高亮

3.webpack中配置vue组件的加载器

① 运行 npm i vue-loader vue-template-compiler -D 命令

② 在 webpack.config.js 配置文件中, 添加 vue-loader 的配置项如下:

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  module: {
    rules: [
      // ...其它规则
      { test: /\.vue$/, use:'vue-loader' }
    ]
  },
  plugins: [
    // ... 其它插件
    new VueLoaderPlugin()  // 请确保引入这个插件!
  ]
}