Vue全家桶：单文件组件

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

问题

1. 全局定义的组件必须保证组件的名称不重复
2. 字符串模板缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
3. 不支持 CSS 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
4. 没有构建步骤限制，只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器（如：Babel）

解决方案

• 针对传统组件的问题，Vue 提供了一个解决方案:
  使用 Vue 单文件组件。

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

单文件组件的组成结构

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

<template>

    组件代码区域

</template>

<script>

    js代码区域

</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");
      const vuePlugin = new VueLoaderPlugin();
      module.exports = {
          ......
          plugins:[ htmlPlugin, vuePlugin  ],
          module : {
              rules:[
                  ...//其他规则
                  { 
                      test:/\.vue$/,
                      loader:"vue-loader",
  
                  }
              ]
          }
      }
  

4. 在 webpack 项目中使用 vue

上一节我们安装处理了vue单文件组件的加载器，想要让vue单文件组件能够使用，我们必须要安装vue 并使用vue来引用vue单文件组件。

• ① 安装Vue:
  运行 npm i vue –S 安装 vue
• ② 在index.js中引入vue:
  在 src -> index.js 入口文件中，通过 import Vue from 'vue' 来导入 vue 构造函数
• ③ 创建Vue实例对象并指定el，最后使用render函数渲染单文件组件:

      const vm = new Vue({
          el:"#first",
          render:h=>h(app)
      })
  

• ④ 通过 render 函数渲染 App 根组件

5. webpack 打包发布

• 上线之前需要通过webpack将应用进行整体打包，可以通过 package.json 文件配置打包命令：

   "scripts":{
          "dev":"webpack-dev-server",
          "build":"webpack -p"
  }
  

• 在项目打包之前，可以将dist目录删除，生成全新的dist目录