vicore


Usage

``javascript
//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
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/'

`

`javascript
// 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')
},
};
`

`javascript !
//app.vue



`
`scss !
###index.scss
@import './element-variables.scss';!
@import '~vicore/dist/vicore.css';!
`
`scss !
###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
``