为什么需要单文件组件

在之前的实例中,我们都是通过 Vue.component 或者 components 属性的方式来定义组件,这种方式在很多中小规模的项目中还好,但在复杂的项目中,下面这些缺点就非常明显了:

字符串模板:缺乏高亮,书写麻烦,特别是 HTML 多行的时候,虽然可以将模板写在 html 文件中,但是侵入性太强,不利于组件解耦分离。
不支持CSS:意味着当 HTML 和 JavaScript 组件化时,CSS明显被遗漏了
没有构建步骤:限制只能使用 HTML 和 ES5 JavaScript,而不能使用预处理器。

Vuejs 提供的扩展名为 .vue 的 单文件组件 为以上所有问题提供了解决方案。

初识单文件组件

还是利用 工欲善其事必先利其器 中的源码,在 src 目录下创建 hello.vue 文件,内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
<h2>{{ msg }}</h2>
</template>
<script>
export default {
data () {
return {
msg: 'Hello Vue.js 单文件组件~'
}
}
}
</script>
<style>
h2 {
color: green;
}
</style>

然后在 app.js 中引入使用:

1
2
3
4
5
6
7
8
9
10
11
// ES6 引入模块语法
import Vue from 'vue';
import hello from './hello.vue'; new Vue({
el: "#app",
template: '<hello/>',
components: {
hello
}
});

此时项目是没法运行的,因为 .vue 文件 webpack 是没法是别的,它需要对应的 vue-loader 来处理才行,而且细心的朋友会发现 hello.vue 中用到了 ES6 语法,此时就需要用到相应的语法转化 loader 将 ES6 转化成主流浏览器兼容的 ES5 语法,这里就需要用到官方推荐的 babel 工具了。先安装需要的 loader:

1
2
# hello.vue 文件中使用了 css,所以需要 css-loader 来处理,vue-loader 会自动调用
npm install vue-loader css-loader babel-loader babel-core babel-preset-env --save-dev

有的人疑惑只是使用 babel-loader 为什么还需要安装后面这么多工具呢,这是因为很多工具都是独立的,loader 只是为了配合 webpack 使用的桥梁,而这里 babel-core和 babel-preset-env 才是实现 ES6 到 ES5 的核心。

我们再修改 webpack.config.js 配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
// ...
module: {
// 这里用来配置处理不同后缀文件所使用的loader
rules: [
{
test: /.vue$/,
loader: 'vue-loader'
},
{
test: /.js$/,
loader: 'babel-loader'
}
]
}
}

对于 babel 的配置,我们还需在项目根目录下刚创建 .babelrc 文件来配置 Babel presets 和 其他相关插件,内容如下:

1
2
3
{
"presets": [ "env" ]
}

但是虽然虽然都配置好了,项目还是还是会报错,报如下错误:

1
2
ERROR in ./src/hello.vue
Module build failed: Error: Cannot find module 'vue-template-compiler'

有人就不高兴了,明明是按照官方提示安装了依赖,并正确的进行配置,为什么还是会报错呢?遇到错误不要怕,先阅读下错误是什么,很容易发现,是因为 Cannot find module 'vue-template-compiler',这是因为 vue-loader 在处理 .vue 文件时,还需要依赖 vue-template-compiler 工具来处理。

刚开始我不知道官方为什么没有直接告诉用户需要安装这个依赖,通过阅读 vue-loader 才明白其 package.json 文件中是将 vue-template-compiler 和 css-loader 作为 peerDependencies,而 peerDependencies 在安装的时候,并不会自动安装(npm@3.0+),只会给出相关警告,所以这个需要我们手动安装的,当然在 .vue 文件中如果需要写 CSS,也必须用到 css-loader,这个也是在 peerDependencies 中。相关讨论:https://github.com/vuejs/vue-loader/issues/1158

知道问题了,直接安装下就可以了:

1
npm install vue-template-compiler css-loader --save-dev

再次运行项目,页面中出现了我们的内容,并没报错,ok,大功告成~

使用预处理器

我们已经学会在 .vue 中写 css 了,那么如果使用 sass 预处理器呢?首先安装上篇文章中提到的模块:

1
npm install sass-loader node-sass --save-dev

配置只需两步:

  1. 修改 webpack.config.js 中 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
    module.exports = {
    // ...
    module: {
    // 这里用来配置处理不同后缀文件所使用的loader
    rules: [
    {
    test: /.vue$/,
    loader: 'vue-loader',
    options: {
    loaders: {
    // 这里也可以使用连写方式,但是不利于自定义话参数配置
    // scss: 'vue-style-loader!css-loader!sass-loader'
    scss: [
    {
    loader: 'vue-style-loader'
    },
    {
    loader: 'css-loader'
    },
    {
    loader: 'sass-loader'
    }
    ]
    }
    }
    },
    // ...
    ]
    }
    }
  2. 给 .vue 文件中的 style 标签,添加 lang="scss" 属性。

配置完后,就可以再 .vue 文件中,愉快地编写 sass 语法了。

加载全局设置文件

实际开发中,我们在编写 sass 文件时,经常会将全局的 scss 变量提取出来,放到一个单独的文件中,但是这样就有个问题,每个需要用到的组件,都需要手动 @import './styles/_var.scss' 进来,非常不友好。插件 sass-resources-loader 就很好地帮我们解决这个问题,先安装一下:

1
npm install sass-resources-loader --save-dev

然后修改 webpack.config.js 文件中 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
// ...
{
test: /.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: [
{
loader: 'vue-style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
},
// 看这里,看这里,看这里
{
loader: 'sass-resources-loader',
options: {
// 这里的resources 属性是个数组,可以放多个想全局引用的文件
resources: [resolve('./src/styles/_var.scss')]
}
}
]
}
}
}
// ...

配置就完成了,我们再来测试下。

在 src 目录下分别创建 hello1.vue 和 hello2.vue 文件:

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
32
33
34
35
36
37
38
39
<!-- hello1.vue -->
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default {
name: 'hello1',
data () {
return {
msg: 'Hello Vue.js 单文件组件~'
}
}
}
</script>
<style lang="scss">
h1 {
color: $green;
}
</style> <!-- hello2.vue -->
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default {
name: 'hello2',
data () {
return {
msg: 'Hello Vue.js 单文件组件~'
}
}
}
</script>
<style lang="scss">
h1 {
color: $red;
}
</style>

然后创建一个 styles 目录,并在其中新建存放全局变量的文件 _var.scss:

1
2
$green: rgb(41, 209, 41);
$red: rgb(177, 28, 28);

接下来,在 app.js 中引用两个组件:

1
2
3
4
5
6
7
8
9
10
11
12
import Vue from 'vue';
import hello1 from './hello1.vue';
import hello2 from './hello2.vue'; new Vue({
el: "#app",
template: '<div><hello1/><hello2/></div>',
components: {
hello1,
hello2
}
});

重新运行项目就可以了。

有作用域的 style

单文件组件中为我们提供了一个非常便利的功能,就是当 style 标签添加 scoped 属性时,标签内的样式将只作用于当前组件中的元素。

接着上面的例子,运行后会发现 hello1.vue 中的 h1 颜色并不是想要的 $green 色,而是被 hello2.vue 中的样式覆盖了。于是分别在 hello1.vue 和 hello2.vue 的 style标签上添加 scoped 属性,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- hello1.vue -->
<style lang="scss" scoped>
h1 {
color: $green;
}
</style> <!-- hello2.vue -->
<style lang="scss" scoped>
h1 {
color: $red;
}
</style>

这样一来我们的两个 h1 标签颜色都显示正常了。

自定义块

在编写某些开源组件时,有时候我们需要同时维护多个组件和组件说明,但是每次修改就要同时修改 .vue 和 .md 文件,相当麻烦。.vue 文件的 自定义语言块 功能,就允许我们将 markdown 说明同时写进 .vue 文件中,然后通过插件将其说明部分单独提取到相应的 .md 文件中,这样就可以同时维护说明文档和组件功能了。

比如我们将 hello1.vue 文件修改如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<docs>
# 标题
这是标题内容,[仓库地址](https://github.com/yugasun/You-May-Not-Know-Vuejs)
## 子标题
这是子标题内容
</docs>
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default {
name: 'hello1',
data () {
return {
msg: 'Hello Vue.js 单文件组件~'
}
}
}
</script>
<style lang="scss" scoped>
h1 {
color: $green;
}
</style>

然后修改 webpack.config.js 配置:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
const path = require('path');
// 引入相关插件
const ExtractTextPlugin = require('extract-text-webpack-plugin'); function resolve(dir) {
return path.resolve(__dirname, dir);
} module.exports = {
// 入口文件
entry: './src/app.js',
// 编译输出文件
output: {
path: resolve('./'),
filename: 'build.js'
},
resolve: {
alias: {
// 因为我们这里用的是 require 引入方式,所以应该使用vue.common.js/vue.js/vue.min.js
'vue$': 'vue/dist/vue.common.js'
}
},
devServer: {
// 这里定义 webpack-dev-server 开启的web服务的根目录
contentBase: resolve('./')
},
module: {
// 这里用来配置处理不同后缀文件所使用的loader
rules: [
{
test: /.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: [
{
loader: 'vue-style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
},
{
loader: 'sass-resources-loader',
options: {
resources: [resolve('./src/styles/_var.scss')]
}
}
],
docs: ExtractTextPlugin.extract('raw-loader')
}
}
},
{
test: /.js$/,
loader: 'babel-loader'
}
]
},
plugins: [
new ExtractTextPlugin('docs.md')
]
}

这里用到了 extract-text-webpack-plugin 导出 text 插件,和 raw-loader,分别都安装下就行。

然后运行构建命令 npm run build,等运行结束,根目录下会同时生成一个 docs.md 文件,这就是我们想编写的说明文档。

Vuejs - 单文件组件的更多相关文章

  1. vuejs 单文件组件.vue 文件

    vuejs 自定义了一种.vue文件,可以把html, css, js 写到一个文件中,从而实现了对一个组件的封装, 一个.vue 文件就是一个单独的组件.由于.vue文件是自定义的,浏览器不认识,所 ...

  2. 一丢丢学习之webpack4 + Vue单文件组件的应用

    之前刚学了一些Vue的皮毛于是写了一个本地播放器https://github.com/liwenchi123000/Local-Music-Player,如果觉得ok的朋友可以给个star. 就是很简 ...

  3. 10: vue-router和单文件组件

    1.1 vue-router路由基本使用 官网: https://router.vuejs.org/zh/api/#router-link 1.安装vue-router bower info vue- ...

  4. webpack入坑之旅(五)加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  5. vue单文件组件的构建

    在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件 ...

  6. Vue单文件组件基础模板

    背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点, ...

  7. 【原】vue单文件组件互相通讯

    在vue中,我们可以把一个页面各个部分单独封装起来,做成各种小组件,然后加载,这样的好处是代码维护起来比较容易,重复的代码多处调用! 在一个vue项目中,单文件组件以.vue形式文件命名 每个组件之间 ...

  8. vue 单文件组件中样式加载

    在写单文件组件时,一般都是把标签.脚本.样式写到一起,这样写个人感觉有点不够简洁,所以就想着把样式分离出去. 采用import加载样式 在局部作用域(scoped)采用@import加载进来的样式文件 ...

  9. Vue单文件组件

    前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...

随机推荐

  1. hustoj题目标准xml格式

    具体格式可见google code. 分析了一下发现像<time_limit></time_limit><memory_limit></memory_limi ...

  2. scrapy(1)——scrapy介绍

    Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中.所谓网络爬虫,就是一个在网上到处或定向抓取数据的程序,当然,这种说 ...

  3. centos7 下pycharm无法输入中文问题解决方案

    作者使用的pycharm是2017.2 在pycharm.sh脚本的如下行(大约在201行): # -------------------------------------------------- ...

  4. django为model设置表名

    class redis_data(models.Model):     class Meta:         db_table='redis_data'     key=models.CharFie ...

  5. Qt MetaObject System详解

    网上的资源比较乱,该文章整理自地址:http://www.xuebuyuan.com/735789.html Qt meta-object系统基于三个方面: 1.QObject提供一个基类,方便派生类 ...

  6. opencv2.4.0版本不支持Mat的大小自动调整?

    在opencv2.4.9中,resize(img,img,Size(850,550))是没问题的.到了2.4.0中,要新声明一个变量Mat img1;resize(img,img1,Size(850, ...

  7. Python35 升级 pip

    使用pip安装插件的时候报错: You are using pip version 8.1.1, however version 9.0.1 is available.You should consi ...

  8. md5和base64加密解密

    import java.io.IOException; import java.security.MessageDigest; import sun.misc.BASE64Encoder; impor ...

  9. IOI 98 (POJ 1179)Polygon(区间DP)

    很容易想到枚举第一步切掉的边,然后再计算能够产生的最大值. 联想到区间DP,令dp[i][l][r]为第一步切掉第i条边后从第i个顶点起区间[l,r]能够生成的最大值是多少. 但是状态不好转移,因为操 ...

  10. [洛谷P5048][Ynoi2019模拟赛]Yuno loves sqrt technology III

    题目大意:有$n(n\leqslant5\times10^5)$个数,$m(m\leqslant5\times10^5)$个询问,每个询问问区间$[l,r]$中众数的出现次数 题解:分块,设块大小为$ ...