vue工作学习记录

1、nuxt 集成vue-awesome-swiper

package.json的dependencies加入

  "swiper": "^^5.2.0",
  "vue-awesome-swiper": "^4.1.1"

如：

  "dependencies": {
    "axios": "^0.19.2",
    "nuxt": "^2.0.0",
    "swiper": "^5.2.0",
    "vue-awesome-swiper": "^4.1.1"
  },

注意："vue-awesome-swiper": "^4.1.1" 对应的swiper是5.2.0版本，不同版本对应的不一样，具体看

https://github.com/surmon-china/vue-awesome-swiper/blob/master/package.json

plugins中新建文件nuxt-swiper-plugin.js   注意不同版面不一样

import Vue  from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
 
// import style
import 'swiper/swiper-bundle.css'

Vue.use (VueAwesomeSwiper)

nuxt.config.js中加入

  plugins: [    
    { src: '~/plugins/nuxt-swiper-plugin.js', ssr: false }
   ], 

2、vue-cli2 兼容ie8以上

（1）加入包

• babel-loader

• babel-polyfill

• babel-preset-es2015

• es6-promise

• qs

（2）main.js 加入以下代码

import 'babel-polyfill'
import promise from 'es6-promise'
import qs from 'qs'
promise.polyfill()

if (Number.parseInt === undefined) Number.parseInt = window.parseInt; if (Number.parseFloat === undefined) Number.parseFloat = window.parseFloat; 

（3）修改build\webpack.base.conf.js 

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: ['babel-polyfill', './src/main.js']
    // app: './src/main.js'
  },

.....

module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /vux.src.*?js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        },
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        },
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]

      },

（4）修改.babelrc文件 

{
  "presets": [
    ["env", {
      "modules": false,
      "useBuiltIns": "entry",//这个也是需要的
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "es2015",//这是新加的
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}

（5）有些插件版本过高导致报错，可以降低版本尝试。 或者在像（3） 中加入 resolve

以上应该有不需要设置的 

3、 集成font-awesome时打包后图标不显示问题

修改build\webpack.base.conf.js  rules下面找到下面的地方将limit变大

 {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }