Vue单文件组件

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

1.1 问题

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

1.2 解决方案

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

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

2.1 单文件组件的组成结构

template组件的模板区域

script 业务逻辑区域

style 样式区域

<template>
    <!-- 组件模板内容 -->
</template>
<script>
// 业务逻辑
    export default{
        data(){
            return{}
        },
        methods:{}
    }
</script>
<style scoped>
    /*   样式 */
</style>

 2.2 webpack配置vue组件加载器

(1) 运行npm i vue-loader vue-template-compiler -D,其中vue-template-compiler是vue-loader的内置依赖项。

(2) 在webpack.config.js配置文件中，添加vue-loader的配置项如下：

module.rules 允许你在 webpack 配置中指定多个 loader。 这是展示 loader 的一种简明方式，并且有助于使代码变得简洁。同时让你对各个 loader 有个全局概览。

const VueLoaderPlugin = require('vue-loader/lib/plugin')

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

2.3 在webpack项目中使用vue

(1) 运行 npm i vue -S 安装vue

(2) 在src->index.js入口文件中，通过import  Vue from 'vue'来导入vue构造函数

(3) 创建vue的实例对象，并指定要控制的el区域

(4) 通过render函数渲染App根组件

// 1.导入vue构造函数
impoet vue from 'vue'
// 2.导入App根组件
import App from './components/App/vue'
// 3.新建vue实例
new vue({
    // 4.指定实例要控制的页面区域到el中
    el: '#app',
    // 5.通过render函数，把指定的组件渲染到el区域中
    render: h => h(App)
})

2.4 webpack打包发布

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

// 在package.json文件中配置webpack打包命令
// 该命令默认加载项目根目录中的webpack.config.js配置文件
'scripts':{
    //用于打包的命令
    'build': 'webpack -p' 
}