vicore

Usage

//main.js
import Vue from 'vue';!
import App from './app';!
import store from './store';!
import router from './router';!
import { whiteList } from './router/index';!
import i18n from './lang/index';!
import settings from './settings';
import ViCore from 'vicore';!
import './styles/index.scss';!

Vue.use(ViCore, {
    Vue,
    store,
    settings,
    i18n,
    router,
    whiteList,
    currentClientId: process.env.VUE_APP_CLIENT_ID,
    env: process.env
});!

Vue.config.productionTip = false;
new Vue({
    el: '#app',
    router,
    store,
    i18n,
    render: h => h(App),
});!

Conventional

//.env
ENV = 'development'!
NODE_ENV = 'development'!
VUE_CLI_BABEL_TRANSPILE_MODULES = true

VUE_APP_CLIENT_ID = 'Windivi'!
VUE_APP_CLIENT_SECRET = '123456'!

VUE_APP_BASE_PROXY = '/base-proxy'!
VUE_APP_BASE_SERVER = http://192.168.1.226:8002!
VUE_APP_BASE_LOGIN_URL = http://localhost:8081/#/login!
VUE_APP_BASE_SOCKET_PROXY = '/base-websocket'
VUE_APP_BASE_SOCKET = 150.223.10.116:83

VUE_APP_PROXY = '/proxy'
VUE_APP_SERVER = http://150.223.10.116:83
VUE_APP_SOCKET_PROXY = '/websocket'
VUE_APP_SOCKET = 150.223.10.116:83

VUE_APP_RTMP_PROXY = '/rtmp-proxy'
VUE_APP_RTMP_SERVER = http://192.168.1.107:10810

VUE_APP_MEETING_PROXY = '/meeting-proxy'
VUE_APP_MEETING_SERVER = 'https://www.cloudroom.com'
VUE_APP_MEETING_SOCKET_PROXY = '/meeting-websocket'
VUE_APP_MEETING_SOCKET_SERVER = 'wss://59.110.14.207:13100/'

// vue.config.js
const port = 9527;
module.exports = {
        devServer: {
        host: '10.0.75.1',!
        port: port,!
        open: false,
        https: true,!
        disableHostCheck: true,!
        proxy: {
            [process.env.VUE_APP_PROXY]: {
                target: `${process.env.VUE_APP_SERVER}`,
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    ['^' + process.env.VUE_APP_PROXY]: ''
                }
            },
            [process.env.VUE_APP_BASE_PROXY]: {
                target: `${process.env.VUE_APP_BASE_SERVER}`,
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    ['^' + process.env.VUE_APP_BASE_PROXY]: ''
                }
            },!
            [process.env.VUE_APP_RTMP_PROXY]: {
                target: `${process.env.VUE_APP_RTMP_SERVER}`,
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    ['^' + process.env.VUE_APP_RTMP_PROXY]: ''
                }
            },
            [process.env.VUE_APP_MEETING_PROXY]: {
                target: `${process.env.VUE_APP_MEETING_SERVER}`,
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    ['^' + process.env.VUE_APP_MEETING_PROXY]: ''
                }
            }
        },
        before: app => { }
        // after: require('./mock/mock-server.js')
    },
};

//app.vue
<template>
    <div id="app">!
        <router-view />
    </div>
</template>

<script>
export default {
    name: 'App',
};
</script>

###index.scss
@import './element-variables.scss';!
@import '~vicore/dist/vicore.css';!

###element-variables.scss
/**
* I think element-ui's default theme color is too light for long-term use.
* So I modified the default color and you can modify it to your liking.
**/

/* theme color */
$--color-primary: #1890ff;
$--color-success: #13ce66;
$--color-warning: #FFBA00;
$--color-danger: #ff4949;
// $--color-info: #1E1E1E;

$--button-font-weight: 400;

// $--color-text-regular: #1f2d3d;

$--border-color-light: #dfe4ed;
$--border-color-lighter: #e6ebf5;

$--table-border:1px solid#dfe6ec;

/* icon font path, required */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
  theme: $--color-primary;
}

API

Installation

npm install vicore -S