前端常用 npm 包

87 阅读 0 评论 58 点赞

我是靠谱客的博主香蕉丝袜，这篇文章主要介绍前端常用 npm 包，现在分享给大家，希望可以做个参考。

npm i codemirror：代码编辑器插件
实现效果
npm i mavon-editor：markdown编辑器
实现效果
移动端自适应包
https://blog.csdn.net/lily2016n/article/details/88350799
npm i mobx && mobx-react && @babel/plugin-proposal-decorators：react 仓库，需要在package.json 的 babel 里配置

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
"babel": {
    "plugins": [
        [
            "@babel/plugin-proposal-decorators",
            {
                "legacy": true
            }
        ]
    ],
    "presets": [
        "react-app"
    ]
}

npm i qrcode.react：生成二维码，并且可以点击下载二维码图片

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const QRCode = require('qrcode.react');
export default class ProductANDClickDownload extends React.Component{
    constructor(props){
        this.state={
            Content:'www.baidu.com'
        }
    }
    ClickDownLoad=()=>{
      var Qr=document.getElementById('qrid');  
      let image = new Image();
      image.src = Qr.toDataURL("image/png");
      var a_link=document.getElementById('aId');
      a_link.href=image.src;
      a_link.download=id;//好像这一行可以不写，，你可以尝试一下
    }
    render(){
         <a download id='aId' title="点我下载！">
             <QRCode id='qrid' value={this.state.Content} onClick={this.ClickDownLoad} size={240} /> 
         </a>
    }
}

npm i swiper

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.min.css'
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
</div>
.swiper-container {
    width: 100%;
    height: 260px;
    .swiper-wrapper {
        width: 100%;
        height: 260px;
        .swiper-slide {
            width: 100%;
            height: 260px;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}