Vue脚手架引入:公有CSS、swiper、jQuery、animate、bootstrap

原文链接：https://blog.csdn.net/woshichengce/article/details/98211332 

公有化CSS文件

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

// 引入并使用共有css文件
import PublicCss from '@/public.css'
Vue.use(PublicCss)

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

*{
  margin: 0;
  padding: 0;
}
li{
  list-style: none;
}
a{
  text-decoration: none;
}
table{
  border-collapse:collapse ;
  border-spacing: 0;
}
img{
  border: 0;
  vertical-align: middle;
}
textarea{
  resize: none;
}
input,button,select,textarea{
  outline: none;
}
input,img,select{
  vertical-align: middle;
}
body,button,input,select,textarea{
  font-size: 14px;
  line-height: 1.5;
  font-family: tahoma,arial,\5b8b\4f53,sans-serif;
}

swiper

vue脚手架引入swiper步骤
（1）安装swiper：

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

jQuery

vue脚手架引入jQuery步骤
（1）安装jQuery依赖包：

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

（3）注意：因为jQuery放到npm后package.json没有设置好相关配置，所以需要额外手动设置，配置好后需要重启项目
修改webpack.base.conf.js
①加入var webpack=require(‘webpack’);
②module.exports的里面加入插件配置

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

animate

vue脚手架引入animate.css动画库的步骤
（1）安装animate.css依赖包

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

bootstrap

vue脚手架引入bootstrap的步骤
（1）安装bootstrap依赖包

（2）入口文件main.js中引入bootstrap

（3）bootstrap.js不仅依赖jquery还有popper.js，所以安装popper.js

（4）webpack.base.conf.js加入配置，然后重启

版本限定

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