vue & element ui

[xgqfrms]

vue & element ui

https://github.com/ElemeFE/element

https://element.eleme.io/#/en-US

https://www.npmjs.com/package/element-ui

https://github.com/ElementUI/vue-cli-plugin-element

---

https://madewithvuejs.com/

https://madewithreactjs.com/

[xgqfrms]

vs code & code snippets

vue.json

{
    "JavaScript ES6 Vue Template": {
        "prefix": "js6v",
        "body": [
            "\"use strict\";",
            "",
            "/**",
            " * ",
            " * @author xgqfrms",
            " * @license MIT",
            " * @copyright xgqfrms",
            " * @created 2018.10.0$1",
            " * @modified 2018.10.0$1",
            " * ",
            " * @description $2",
            " * @augments $3",
            " * @example $4",
            " * ",
            " */",
            "",
            "const $2Generator = ($5datas = [], debug = false) => {",
            "    let result = ``;",
            "    // do something...",
            "    return $7result;",
            "};",
            "",
            "",
            "",
            "export default $2;",
            "",
            "export {",
            "    $2,",
            "};",
            ""
        ],
        "description": "JavaScript ES6 Vue Template & code snippets!"
    }
}

css

{
    "CSS3 Template": {
        "prefix": "c3t",
        "body": [
            "@charset \"UTf-8\";",
            "",
            "/**",
            " * ",
            " * @author xgqfrms",
            " * @license MIT",
            " * @copyright xgqfrms",
            " * ",
            " * @description $1.css",
            " * ",
            " */",
            "",
            ":root {",
            "   --cololr: #000;",
            "   --default-cololr: #fff;",
            "   --new-cololr: #0f0;",
            "}"
        ],
        "description": "CSS3 Template & code snippets!"
    }
}

styled css

{
    "Styled CSS3 Template": {
        "prefix": "sc3t",
        "body": [
            "@charset \"UTf-8\";",
            "",
            "/**",
            " * ",
            " * @author xgqfrms",
            " * @license MIT",
            " * @copyright xgqfrms",
            " * ",
            " * @description $1.scss",
            " * ",
            " */",
            "",
            ":root {",
            "   --cololr: #000;",
            "   --default-cololr: #fff;",
            "   --new-cololr: #0f0;",
            "}"
        ],
        "description": "Styled CSS3 Template & code snippets!"
    }
}

[xgqfrms]

vue components @import css

not support css3 @import

vuejs/vue-loader#138 (comment)

@charset "UTf-8";

/**
 * 
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * 
 * @description links.css
 * 
 */

a {
    text-decoration: none;
    color: #0f0;
}

<style>
    @import "./links.css";
    /* global css*/ 
    a {
        text-decoration: none;
    }
</style>

<style scoped lang="scss">
    /* local css */ 
</style>

solutions

https://vuejs.org/v2/guide/single-file-components.html#What-About-Separation-of-Concerns
https://forum.vuejs.org/t/help-imported-css-styles-conflict-between-components/5687/4

<style src="./links.css">

<style src="./links.css">
    /* global css*/ 
    a {
        text-decoration: none;
    }
</style>

<style scoped lang="scss">
    /* local css */ 
</style>

css in js

<script>
    // css in js
    import "./links.css";
    export default {
        name: 'links',
    }
</script>

<style>
    /* @import "./links.css"; */
    /* global css */
    a {
        text-decoration: none;
    }
</style>

<style scoped lang="scss">
    /* local css */ 
</style>

---

$ style src

what fuck tricks ???

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src
https://www.w3.org/TR/html401/present/styles.html
https://www.w3schools.com/TAGs/tag_style.asp
https://www.w3schools.com/TAGs/ref_standardattributes.asp

[xgqfrms]

// 将设置放入此文件中以覆盖默认设置
{
    "files.exclude": {
        "**/.git": true,
        "**/.DS_Store": true,
        "**/jspm_packages": true,
        "**/node_modules": true,
        "**/.zip": true,
        "**/.sh": true
    },
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true
    },
    "files.watcherExclude": {
        "**/.git/objects/**": true,
        "**/.git/subtree-cache/**": true,
        "**/node_modules/*/**": true
    },
    "editor.formatOnSave": false,
    "editor.formatOnPaste": false,
    "editor.renderWhitespace": "all",
    "editor.fontSize": 16,
    "editor.tabSize": 4,
    "editor.multiCursorModifier": "alt",
    "editor.wordWrap": "on",
    "editor.insertSpaces": true,
    "editor.accessibilitySupport": "off",
    "files.encoding": "utf8",
    "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
    "[typescript]": {
        "editor.formatOnSave": false,
        "editor.formatOnPaste": false
    },
    "[javascript]": {
        "editor.formatOnSave": false,
        "editor.formatOnPaste": false,
        "editor.renderWhitespace": "all",
        "editor.foldingStrategy": "indentation",
        // "editor.foldingStrategy": "auto"
        "editor.getOutliningSpans": ""
    },
    "[javascriptreact]": {
        "editor.formatOnSave": false,
        "editor.formatOnPaste": false,
        "editor.renderWhitespace": "all",
        "editor.foldingStrategy": "indentation"
    },
    "[markdown]": {
        "editor.formatOnSave": true,
        "editor.renderWhitespace": "all",
        "editor.acceptSuggestionOnEnter": "off"
    },
    "[html]": {
        "editor.formatOnSave": false,
        "editor.formatOnPaste": false,
        "editor.renderWhitespace": "all",
        "editor.acceptSuggestionOnEnter": "off"
    },
    "files.associations": {
        "*.jsx": "javascriptreact",
        "*.js": "javascriptreact"
    },
    "editor.snippetSuggestions": "top",
    // When enabled, typing /** triggers documentation automatically.
    "docthis.automaticForBlockComments": true,
    // When enabled, type information is added to comment tags.
    "docthis.includeTypes": true,
    // When enabled, memberOf information is added to comment tags on class members.
    "docthis.includeMemberOfOnClassMembers": true,
    // When enabled, memberOf information is added to comment tags on interface members.
    "docthis.includeMemberOfOnInterfaceMembers": true,
    // When enabled, JSDoc comments for functions and methods will include @description.
    "docthis.includeDescriptionTag": true,
    // When enabled, hungarian notation will be used as a type hint.
    "docthis.enableHungarianNotationEvaluation": true,
    // When enabled, will use names of params & methods as type hints.
    "docthis.inferTypesFromNames": true,
    // When enabled, will add the @author tag.
    "docthis.includeAuthorTag": true,
    // When docthis.includeAuthorTag is enabled, will add @author tag with this value.
    "docthis.authorName": "xgqfrms",
    // HTML & overwrite User settings.json
    "html.format.extraLiners": "",
    "html.format.enable": false,
    "html.format.contentUnformatted": "body, div, section, script, pre,code,textarea"
}

[xgqfrms]

css & import

global css bug

[xgqfrms]

https://vuejs.org/v2/guide/single-file-components.html

https://vuejs.org/v2/guide/typescript.html#Class-Style-Vue-Components

https://vue-loader.vuejs.org/guide/scoped-css.html

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>

[xgqfrms]

https://element.eleme.io/#/en-US/component/select#select-attributes

[xgqfrms]

https://router.vuejs.org/guide/#javascript

[xgqfrms]

swagger-ui & enum & select

decodeURIComponent(http://127.0.0.1:8188/user/getUserInfos?status=true&roleIds=1%2C2&keyWordType=UserName&keyWord=ad);
"http://127.0.0.1:8188/user/getUserInfos?status=true&roleIds=1,2&keyWordType=UserName&keyWord=ad"