Vue单文件组件

Snake8859 2/18/2020

组件是Vue.js的一大特色，体现封装，复用等重要思想。组件能让我们将应用模块抽取独立可用，几乎任意类型的应用的界面都可以抽象为一个组件树。

components-tree

一般组件可分为非单组件文件和单组件文件。

非单组件文件：一个文件包含n个组件
单组件文件：一个文件包含1个组件

在Vue的项目里，我们使用Vue.componet来注册全局组件，或者在Vue实例对象汇中注册局部组件。这种方式在中小规模的项目中能够很好使用，能将视图内容用JavaScript来负责。但是在前端完全由JavaScript驱动的时候，会有以下几个问题：

全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug (formerly Jade) 和 Babel

于是乎.vue文件(Vue单文件组件)的出现解决以上的问题。

# Vue单文件组件结构

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

<script>
//这里用于定义Vue组件的业务逻辑
export default {
    data:function(){ //私有数据
        return{

        }
    },
    methods:{ //处理函数

    }
    //其他业务逻辑
}
</script>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

每一个单文件组件的组成构成主要分为三个部分：

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

于是乎，使用单文件组件，我们就可以获得：

# Webpack项目中使用单文件组件

Vue单文件组件不能直接解析，需要结合webpack项目，并使用vue-loader加载器来打包Vue单文件组件。

# webpack配置vue组件的加载器

运行npm i vue-loader vue-template-complier -D命令安装环境，在webpack.config.js配置文件中vue-loader加载器。

const path = require('path')

//实例化vue-loader加载器
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const vueLoaderPlugin = new VueLoaderPlugin()

module.exports = {
    mode:'development', //mode 用来指定构建模式
    entry:path.join(__dirname,'./src/index.js'), //打包入口文件路径
    output:{
        path:path.join(__dirname,'./dist'),//输出文件的存放路径
        filename:'bundle.js' //输出文件名称
    },
    //plugins数组为打包期间用到的插件列表
    plugins:[
        htmlPlugin,
        //vue-loader插件
        vueLoaderPlugin
    ], 
    //所有loader加载器的匹配规则
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:'url-loader?limit=16940'},
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
            //vue-loader加载器匹配规则
            {test:/\.vue$/,loader:'vue-loader'}
        ]
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# webpack项目中使用vue

运行npm i vue -S命令，安装vue，然后在src/index.js入口文件中，通过import Vue from 'vue'来导入vue，接着实例化vue对象，并指定控制的el区域，最后render函数渲染App根节点。

import Vue from 'vue'
import App from './components/App.vue'

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

1
2
3
4
5
6
7

Vue非单文件组件 Vue CLI