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

左手的ㄟ右手 2023-06-09 15:28 142阅读 0赞

原文链接：[https://blog.csdn.net/woshichengce/article/details/98211332][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)

![在这里插入图片描述][2019080216431464.png]

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：

![在这里插入图片描述][20190802165626780.png]  
（2）在需要使用swiper的组件引入swiper和相关样式文件，之后初始化swiper（初始化一般放在mounted里）

## ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpY2hlbmdjZQ_size_16_color_FFFFFF_t_70]   jQuery ##

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

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

![在这里插入图片描述][20190802165937993.png]

（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"
        })
    ]

## ![在这里插入图片描述][20190802170149894.png]   animate ##

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

![在这里插入图片描述][20190802170416268.png]

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

## ![在这里插入图片描述][20190802170441726.png]   bootstrap ##

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

![在这里插入图片描述][20190802170601994.png]

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

![在这里插入图片描述][20190802170625893.png]

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

![在这里插入图片描述][20190802170709427.png]

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

## ![在这里插入图片描述][20190802170734141.png]   版本限定 ##

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

![在这里插入图片描述][20190802170838262.png]

[https_blog.csdn.net_woshichengce_article_details_98211332]: https://blog.csdn.net/woshichengce/article/details/98211332
[2019080216431464.png]: /images/20230531/d4d729c13daf4edc8f786a9b0c2c6c59.png
[20190802165626780.png]: /images/20230531/d406ccb6a79b4ad483eefa5c8f12bb90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpY2hlbmdjZQ_size_16_color_FFFFFF_t_70]: /images/20230531/d64a5123794b414cb184470fc9de583e.png
[20190802165937993.png]: /images/20230531/7e2186ac61274212b4fa6455501f5609.png
[20190802170149894.png]: /images/20230531/81e064d664e54db3b23126dfca29ceb1.png
[20190802170416268.png]: /images/20230531/f72253d0cb8747cba79daf095faf1224.png
[20190802170441726.png]: /images/20230531/4146faee59f6457ca4981a9488b4db31.png
[20190802170601994.png]: /images/20230531/941c9ac366844f97b0ae96b2be65292b.png
[20190802170625893.png]: /images/20230531/ae70d9e9110a4d06a8f2eed8efb0a356.png
[20190802170709427.png]: /images/20230531/d6832b1a0de74eb6ad89a17d5f024911.png
[20190802170734141.png]: /images/20230531/eb5ec380831842a49d378d889dabf8fd.png
[20190802170838262.png]: /images/20230531/36b2d1b3cd5e4b11ab056c2fe2e24f6e.png