npm install -D babel-plugin-transform-imports
npm install @illuminateeducation/ec-frontend-library
application setup
main.js
import Vue from 'vue'
import App from './App.vue'
import { Defaults, EcUpdateTheme, EcFrontendLibrary, EcFrontendVuetify, GetVuetifyInstance } from '@illuminateeducation/ec-frontend-library'
import '@illuminateeducation/ec-frontend-library/dist/ec-frontend-library.css'
Vue.use(EcFrontendLibrary, {
axios: {
withCredentials: true,
baseURL: process.env.VUE_APP_BASE_URI ? process.env.VUE_APP_BASE_URI.replace(/localhost/g, location.host) : ''
},
authx: 'auth-x.host.com',
})
Vue.use(EcFrontendVuetify)
let vuetify = GetVuetifyInstance({
options: {
customProperties: true
},
iconfont: 'fa',
theme: {
dark: false,
themes: Defaults.ecThemes
}
})
EcUpdateTheme(Defaults.ecThemes.light) // creates CSS variable equivalents of all variables for use in local components
// with something like the following: var(--fe-primary);
Vue.config.productionTip = false
Vue.prototype.$vuetify = vuetify
new Vue({
vuetify,
render: h => h(App),
}).$mount('#app')
Axios and Auth-x are optional
.npmrc
@illuminateeducation:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=${NPM_TOKEN}
.babel.config.js
module.exports = {
presets: [
'@vue/app'
],
"plugins": [
[
"transform-imports",
{
"vuetify": {
"transform": "vuetify/es5/components/${member}", // eslint-disable-line no-template-curly-in-string
"preventFullImport": true
}
}
]
]
}
To add CSS to entire project, add class ec-fe-lib to <body>.
To add CSS only to imported CL components, add class ec-fe-lib to <div> surrounding the imported component.
npm install
npm run build
npm run test
npm run lint
Only if authorized to do so
- Make sure branch builds
npm run buildand review the dist directory - Update version in
package.jsonandpackage-lock.json - Commit and push your branch
- Create a PR, have it reviewed and merged
- tag and release https://help.github.com/en/articles/creating-releases.
make sure to follow semantic versioning 0.1.0 (breaking).(feature).(patch or bugs)
actual names if using npm version ... is major.minor.patch