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

最新推荐文章于 2022-12-30 15:41:49 发布

ChengCe

最新推荐文章于 2022-12-30 15:41:49 发布

阅读量872

点赞数

本文链接：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加入配置，然后重启