Puppy's paw

[vue-composition-api] must call Vue.use(plugin) before using any function.

observable객체 reactive, ref등은
반드시 setup 메서드 안에서 불러야 한다.

vuex첨 쓰다 바보짓으로 한참 해맸다.

new Vuex.store({})

로 생성했다.

Store인데...
typescript면 대소문자 다 잡아주는데 그냥 js하려니 이런 삽질로 시간을 많이 보낸다 ㅜㅜ

나 같은 사람들이 은근히 있는 것 같다.

https://laracasts.com/discuss/channels/vue/vuex-store-is-not-a-constructor

ref에 있는 값을 옵저빙하고 싶어서

[$refs.component.data]() {}

같은 걸 해봤으나 택도 없다.

하나 의 템플릿 안에서 메서드로 jsx를 리턴하면 circular structure에 걸린다.

vue의 구조 잘못인지 trade off 개념으로 선택된건지 좀 파보고 싶다.

jsx는 render함수로 구현 되어어 한다.

즉 jsx를 쓰면 다르 템플릿과 같이 쓸 수 없다. (?)

vue-if는 rendering자체가 안되고

vue-show 는 display: none으로 감춘다.

vue-style-loader@4 부터 es6 module을 사용한다.

그래서 babel없이 import를 할 수 없다.

ts-loader@^2.3.7

은 webpack4에서 사용 할 수없다.

// ts-loader 2.3.7
function getLoaderOptions(loader) {
    // differentiate the TypeScript instance based on the webpack instance
    var webpackIndex = webpackInstances.indexOf(loader._compiler);
    if (webpackIndex === -1) {
        webpackIndex = webpackInstances.push(loader._compiler) - 1;
    }
    var loaderOptions = loaderUtils.getOptions(loader) || {};
    var configFileOptions = loader.options.ts || {};
    var instanceName = webpackIndex + '_' + (loaderOptions.instance || configFileOptions.instance || 'default');
    if (utils_1.hasOwnProperty(loaderOptionsCache, instanceName)) {
        return loaderOptionsCache[instanceName];
    }
    validateLoaderOptions(loaderOptions);
    var options = makeLoaderOptions(instanceName, configFileOptions, loaderOptions);
    loaderOptionsCache[instanceName] = options;
    return options;
}

loader 에서 getLoaderOptions(this)로 부르는데 options가 없어서 undefined에 접근하는 오류가 발생한다.
ts-loader version 4 이상을 써야 한다.

webpack4 이상에서 vue-loader 12.0.3 또한 안된다.
위와 마찬가지로 options가 없다.
vue-loader version 15 이상을 써야 한다.
참조: https://vue-loader.vuejs.org/migrating.html#notable-breaking-changes

webpack V4 update하면

ts-loader도 update해줘야 한다.

module.exports = {
    mode: "development",
    entry: {
        app: "./main.ts"
    },
    resolve: {
        extensions: ["vue", "ts", "js", "json"],
        alias: {
            "vue$": path.join(distRoot, "vue.esm.js"),
            // "@": "./"
        }
    },
    externals: {
        'vue': {
            commonjs: 'vue',
            commonjs2: 'vue',
            amd: 'vue',
            root: 'Vue'
        },
    },

    output: {
        path: distRoot,
        filename: `[name]-dist`.ts
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
              },
              {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
                options: {
                  appendTsSuffixTo: [/\.vue$/],
                }
              },
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

.vue 파일은 js가 아니므로 loader가 필요 하다.
bash npm i vue-loader
vue-loader를 쓰려면 vue-template-compiler가 필요하다.

vue와 vue-template-compiler는 버전이 같아야 한다.
bash npm i vue-loader
vue-loader를 webpack에서 쓰려면 VueLoaderPlugin이 필요하다.
const {VueLoaderPlugin} = require("vue-loader")
선언하고 plugins에 추가한다.

현재 vscode에서 vue module을 찾지 못한다.
vue-shim.d.ts 파일에 추가한다. 없으면 만든다.

declare module "*.vue"
{
    import Vue from "vue"
    export default Vue
}

이렇게 해도

Module not found: Error: Can't resolve 'vue' in

라는 에러가 뜬다.

externals: {
  'vue': {
    commonjs:  'vue',
    commonjs2:  'vue',
    amd:  'vue',
    root:  'Vue'
  }
}

webpack에 추가한다.
vue는 react보다 typescript와 webpack에서 지원을 잘 안해준다.

A gradient is not color but image.

If you animate gradients, use a trick which animate position.