Swiper

vue脚手架中使用swiper实现轮播效果

方法一（npm安装swiper）：

        1、cd到项目文件下

        2、npm install swiper --save-dev
    （若成功项目中package.json文件中的”devDependencies“中会出现swiper及版本号）

        3、main.js文件中import引入
                  import Swiper from 'swiper';
                  import 'swiper/dist/css/swiper.min.css';

        4、在components模板中写轮播代码

             <template>：
                  <div class="swiper-wrapper">
                      <div class="swiper-slide">
                        <img src="../../../vue-cli-res/src/assets/logo.png"/>
                      </div>
                      <div class="swiper-slide">
                          <img src="../../../vue-cli-res/src/assets/logo.png"/>
                      </div>
                      <div class="swiper-slide">
                           <img src="../../../vue-cli-res/src/assets/logo.png"/>
                      </div>
                      <div class="swiper-slide">
                          <img src="../../../vue-cli-res/src/assets/logo.png"/>
                       </div>
                    </div>

              <script>：

             import Swiper from 'swiper';

                  mounted(){
                   var m = new Swiper('.swiper-container',{
                             //轮播参数         
               })
             }

方法二（引入swiper插件）：

   1、下载swiper的css和js插件（js放在static目录下，css放在assets目录下）

   2、终端安装runtime： npm install babel-runtime  

   3、修改.eslintrc.js文件如下：  

     // http://eslint.org/docs/user-guide/configuring 
     module.exports = {  
              root: true,  
              parser: 'babel-eslint',  
              parserOptions: {  
              sourceType: 'module'  
    },  
    env: {  
           browser: true,  
    },  
    // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style  
     extends: 'standard',  
     // required to lint *.vue files  
      plugins: [  
                  'html'  
       ],  
       // add your custom rules here  
       'rules': {  
                      // allow paren-less arrow functions  
                       'arrow-parens': 0,  
                        // allow async-await  
                       'generator-star-spacing': 0,  
                        // allow debugger during development  
                       'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0  
           },  
           'globals': {  
                        "Swiper": true  
            }   //这个地方是新加入的   全局注入  
       }  

  4、使用swiper轮播