Vue使用方法记录 & Echars 库使用方法记录:

Vue常用方法记录:

生命周期相关:

created ()  {
},

mounted :function(){
  this.$nextTick(function () {
  });
 },

updated () {
},

路由相关:

this.$router.push({ path: '/invite' , query:{
    qrUrl : this.qrUrl
}});

this.$router.replace({ path: '/invite' , query:{
    qrUrl : this.qrUrl
}});

this.$route.query.qrUrl;

beforeRouteEnter(to, from, next) {
        next(vm => {
            if (
                from.path == '/account/success' 
            ) {
                location.href = location.href.split('#')[0] + '#/account/apply-list';
            }
        })
},

// 动态路由：路由的路径是 /report/business-report/1234567 可以动态变化，但是跳转的文件只是一个vue文件，
{
    path: '/report/business-report/:id',
    meta: {
      title: '业务报表'
    },
    component: (resolve) => require(['@/views/report/business-report.vue'], resolve)
  }
// 在动态路由间切换时不会重新创建该vue文件（不会再走created 、mounted），想要知道路由切换需要监听路由变化：

watch: {
  '$route': function (newValue) {
      // 该方法只能监听动态路径间的变化， 第一次进入该页面不会走
   }
},

空页面:

组件内嵌套内容的方法：

// 子组件：（核心是使用 slot 标记子组件名称）


// 父组件 ：（核心是使用slot添加内容）

打包加速:

npm i -D happypack

npm install webpack-parallel-uglify-plugin --save

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })

// prod.conf.js 中
plugins: [
    new ParallelUglifyPlugin({
      cacheDir: '.cache/',
      uglifyJS: {
        output: {
          comments: false
        },
        compress: {
          warnings: false
        }
      }
    }),
  new HappyPack({
    // 用id来标识 happypack处理那里类文件
    id: 'happyBabel',
    // 如何处理  用法和loader 的配置一样
    loaders: [{
      loader: 'babel-loader?cacheDirectory=true'
    }],
    // 共享进程池
    threadPool: happyThreadPool,
    // 允许 HappyPack 输出日志
    verbose: true
  })
  ]

module: {
    rules: [{
      test: /\.js$/,
      // 把对.js 的文件处理交给id为happyBabel 的HappyPack 的实例执行
      loader: 'happypack/loader?id=happyBabel',
      // 排除node_modules 目录下的文件
      exclude: /node_modules/
    }]
  }

// 对应库可以去npm看下使用方法~

常用方法:

//过滤器
filters: {
},
//监听器
watch: {
    value: function (newValue) {

    },
}
//标签相关
v-for='(item, index) in array'
:class="{'charts-selected': chartSelectIndex === item.index, 'charts-unselected': chartSelectIndex !== item.index}"


this.$emit('clild-tell-me-something','回家吃饭')

this.outCallData.splice(index, 1, item) // 假装更改数组数据 强制更新dom

微信端vue项目跳转HTML文件时返回会不刷新vue界面方法（包括路由），这样会导致微信分享不受控制，该问题只出现于 iOS (webview返回层缓存导致)，解决方法：

var u = navigator.userAgent
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
if (isiOS) {
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      window.location.reload()
    }
  })
}

单页面引入