カセイちゃんの動物園

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

I am working on a Vue project with Webpack 4 and Babel 7.

At the point of writing this post, they are Webpack 4.12.0 and Babel 7.0.0-rc.1.

When setting up Mocha with @vue/test-util, I have encountered a number of bugs.

After a number of rounds try, my test script in package.json becomes:

"scripts": {
    "test": "cross-env NODE_ENV=test nyc mocha-webpack --full-trace --recursive --require @babel/register --require ignore-styles --require test/setup.js test/**/*.spec.js"
}

Is it necessary or overkill? Will all the additional flags be the solution to problems, or the cause of new errors?

Probably yes.

0x00: SCSS Variables

In a Vue template file, say sample.vue, I can define variables in the scss styles. In this way, I can reuse it across the scss in this template file:

<template>
    <!-- my virtual DOMs -->
</template>
<style lang="scss">
    $my-color: #fcfcfc;
    .my-class{
        color: $my-color;
    }
</style>
<script>
    // my JavaScript
</script>

The Table component from Element (el-table) is very versatile in displaying tabulated data, with advanced functions such as fixed columns and expandable rows. However, the two don’t seem work well together.

It is very convenient to use filters in Vue. Custom filters can be defined in the filters, as below in the export default of a Vue single file component:

export default{
    data () {
        return {
        }
    },

    filters: {
        //my filters
    },

    methods: {
    },
}