vue项目实践2——封装弹框模块

2019年9月14日 231次阅读来源: 孙慧丽

前言

本文承接前一篇文章vue项目实践1——构建项目，在构建项目的基础上进行弹框组件的封装。弹框组件强调js动态调用、异步处理用户交互事件。

另外，关于弹框模块实现上基础的网上有很多讲解，进阶的封装借鉴了C#的语法和Qt的弹窗，封装后使用方便，但封装的思想和实现不太好讲清楚。有兴趣的可以去看我的github：https://github.com/sunhuili/v…。

开发前配置

基于当前构建的项目，我们需要再进行一些配置，以便更便捷舒适的开发体验。当前项目目录结构如下：

《vue项目实践2——封装弹框模块》

配置资源文件路径别名

如下图所示：

《vue项目实践2——封装弹框模块》

配置

在webpack的配置文件webpack.base.conf.js中加入scss、assets、static三个文件的路径别名即可（重启项目后生效）。

使用

1、scss文件的引用

<style lang="scss" scoped="">
    @import '~scss/_variable.scss';
</style>

2、图片的引用
```
<img src="~static/images/loading.gif">
```

3、动态图片引用

data() {
  return {
    loadingSrc: require('static/images/loading.gif'),
  }
},

原理

1、static与assets的区别
assets：项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，编译后文件名会加上版本hash作为后缀。
static：不会被webpack处理、解析，会被直接复制到最终的打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这是通过config.js文件中的build.assetsPublicPath和build.assetsSubDirectory链接来确定的。任何放在static中的文件都需要以绝对路径的形式引用“/static/[filename]”。
综上：根据webpack的特性，总的来说就是static放不会变动的第三方文件，assets放可能会变动的文件。
2、动态加载和静态加载的区别
静态加载：直接在template标签内引用，直接按路径来就可以了。
动态绑定：script标签内的引用，因为webpack中图片资源是作为模块引入的，所以不能直接用路径。
3、配路径别名的重要性
更舒适的编程体验：使用别名后可以直接用绝对路径，不用一直../向上查找相对路径。
便于模块化处理：使用别名后便于迁移，不会因为换个路径就报一堆错。
可以配合基路由的配置：这个是最重要一点，前端项目编译后不一定有专门的前端服务器，很可能是前套在后端服务器的文件路径中，如http://192.168.3.10/qianduan/… ,其中‘qianduan’就是我们的基路由，这时候因为static文件夹下文件用绝对路径引用，就会导致开发和线上路径不一致，从而导致各种问题。而设置了路径别名后就不需要担心开发和线上路径不一致的问题了。