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

boonya

已于 2024-09-06 11:21:07 修改

阅读量365

点赞数

分类专栏： # VueJs 文章标签： JavaScript VueJS

于 2019-10-25 11:57:31 首次发布

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

版权

VueJs 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍如何在Vue项目中实现全局CSS样式应用，包括初始化CSS、引入Swiper轮播库、jQuery库及animate.css动画库的方法，并详细讲解了在Vue脚手架中集成Bootstrap的步骤。

摘要由CSDN通过智能技术生成

原文链接：vue脚手架引入:公有CSS、swiper、jQuery、animate、bootstrap_vue 项目引入boostrap,swiper,wow.js+animate.css-CSDN博客

公有化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"
    })
]