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'
    },
複製代碼