vue-cli3.0笔记

normalize.css

1. A modern alternative to CSS resets

    npm install normalize.css --save
复制代码

2. main.js ( src/main.js )

    import 'normalize.css'
复制代码

animate.css

1. index.html create link css (cdn)

    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
复制代码

2. hello-world/src/login/Login.vue

    <!--template-->
    <transition
        name="custom-phone-transition"
        enter-active-class="animated fadeInDown"
        leave-active-class="animated fadeOutDown"
    >
        <p class="error-info" v-show="loginPhoneFlag">请输入11位手机号</p>
    </transition>
    
    <!--script-->
    handlePhoneBlur () {
        let regPhone = /^1[0-9]{10}$/;
        if (regPhone.test(this.loginPhone)) {
            this.loginPhoneFlag = false;
        } else {
            this.loginPhoneFlag = true;
        }
    },
复制代码

.env

1. .env # 在所有的环境中被载入 (hello-world/.env)

    VUE_APP_KEY = 'youareagoodboy'
    // VUE_APP_（必须按照这样开头定义常量）
复制代码

2. *.vue, *.js # 在任何位置的vue,js文件中获取

    process.env.VUE_APP_KEY   =>  youaeragoodboy
复制代码

通过webpack definePlugin 来设置全局变量

1. creat 'mapKey.js' (hello-world/src/utils/mapKey.js)

    const NODE_ENV = process.env.NODE_ENV;
    const config = {
        development: {
            title: 'dev',
            KEY: '198andhs1j1h1lx'
        },
        production: {
            title: 'pro',
            KEY: '10d99408add7127'
        },
        test: {
            title: 'test',
            KEY: '10d9u8192ahc91a'
        }
    }
    module.exports = config[NODE_ENV]
复制代码

2. vue.config.js

    const mapKey = require('./src/utils/mapKey')
    module.exports = {
        // add start
        chainWebpack: (config) => {
            config
                .plugin('define')
                .tap(args => {
                    args[0].MAPKEY = JSON.stringify(mapKey);
                    return args
                })
        }
        // add end
    }

复制代码

3. Home.vue (hello-world/src/views/Home.vue)

    console.log(MAPKEY)  
    =>  
    {
        title: 'dev',
        KEY: '198andhs1j1h1lx'
    },
复制代码

转载于:https://juejin.im/post/5c6e61926fb9a049c30bd6c1