vue工程化之（组件导出与组件导入、插件的引入【swiper,jQuery,animate,bootstrap】、项目打包压缩）

（1）组件导出与组件导入

1.组件导出可以用export default
组件导出export default单次限制：
在组件模块中，只能使用export default向外暴露一次
2.组件导入

区别：
①执行时机：require 是运行时才执行， import 是编译时执行；
②导入位置：require可以理解为一个全局方法，所以它可以在任何地方导入组件模块，而import必须写在文件的顶部；
③性能：require的性能相对于import稍低，因为require是在运行时才引入模块并且还赋值给某个变量；而import只需要依据import中的接口在编译时引入指定模块，所以性能稍高。
注意：
①避免在代码中同时使用两种，否则容易造成混淆。
②日常开发时，组件模板导入推荐使用import … from …
3.组件导入步骤
①在基础组件文件夹下新建单文件组件BannerComponent.vue

②设置轮播图组件模块的数据、方法、样式，并导出

③设置轮播图组件模块的数据、方法、样式，并导出

④组件选项引入：导入成功后，组件在模板的使用需要通过components选项

⑤引用组件：最后组件元素想显示到页面上，需要在HTML中引用组件标签，之后便组件模块引入使用完毕。
组件标签格式分两种
1.标签对

2.单个标签

⑥组件引用标签命名
有时为了区分明显，一般在使用时在前面加上v-，对引用标签命名前加v-，所以可以对上面做下改动

组件导出与组件导入的总结
（1）export default导出
（2）import … from …导入
（3）components组件选项命名引入
（4）template模板通过标签引用

(2)vue工程化之插件的引入

1.vue工程化之公有CSS初始化
公有化CSS文件：
CSS初始化需要在每个页面引用
方法：
在src下面新建public.css，然后在main.js中引入进来 import ‘@/public.css’,这样所有页面中都会使用这个样式了。

public.css里存放公有CSS样式设置，一般为初始化CSS设置

2.安装swiper：
①安装swiper：
②在需要使用swiper的组件引入swiper和相关样式文件，之后初始化swiper（初始化一般放在mounted里）

3.安装jQuery依赖包：
①安装jQuery：
②在main.js入口文件引入

③在需要用jquery的页面直接使用jquery语法，此时会看到语法报错

④注意：因为jQuery放到npm后package.json没有设置好相关配置，所以需要额外手动设置，配置好后需要重启项目
修改webpack.base.conf.js
1.加入var webpack=require(‘webpack’);

2.module.exports的里面加入插件配置

plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]

⑤因为在项目很多组件里都用到jQuery语法，所以直接将其放到main.js入口文件引入，这样便可以在全局使用，任意组件模块都可以使用了

⑥重启项目，检验jQuery引入成功与否

4.安装animate.css

①安装animate.css依赖包

②在main.js入口文件引入，此时便可以在全局模块使用

③在需要使用的模块直接编写测试

5.安装bootstrap

①安装bootstrap依赖包

②入口文件main.js中引入bootstrap

③此时会发现报错（popper.js为bootstrap里面扩展功能要用到的插件）

④报错分析（因为bootstrap.js不仅依赖jquery还有popper.js，所以安装popper.js）

⑤webpack.base.conf.js加入配置，然后重启

Popper: ['popper.js', 'default']

⑥在需要使用的组件进行编写测试

版本限定
下载特定版本依赖包
npm一般默认下载最新包，如果不想使用bootstrap4.0版本的话，可以下载v3.3.7稳定版
语法：只需要在组件的后面加上@2.8.1版本号即可
例如下载3.3.7版本的bootstrap

（3）打包项目-打包

①项目打包执行cnpm run build指令，进行代码丑化

②打包成功后在根目录下会多出一个dist文件夹

③点击index.html，通过浏览器运行，出现以下报错，如图：

④方案

⑤重新打包压缩
重新打包后，dist目录会先删除后打包更新，再次点击index.html可以发现，此时页面可以浏览了。但出现新 问题：即图片加载失败， 在JS里动态绑定路径的图片，在打包后加载失败
⑥解决方案
将JS数据路径改为./或者直接写
或

打包项目-刷新报错

文件：src/router/index.js

这种情况是因为路由模式设置为history，此时在工程化项目没问题，但打包后页面无法刷新，所以router路由的mode模式一般默认hash即可。

图片使用注意：

（1）template中使用…/…/static/xxx或者static/xxx
（2）script的data数据里使用static/xxx或者./static/xxx
（3）style的css背景图使用…/…/static/xxx