File Structures ./Styles/ElementUi/*
NOTE:
If We Do Intend to use Element UI We Need to Move All This Files to Their Counter Part File Name in Our Main App
I Have Added Here Remarks On What is Changed Based on the Original App Files
Style/ElementUi
- theme
- index.css // <!-- This Holds Our Theme CSS
- views
- errors
- 404.vue // <!-- Uses Element Ui Tags
// You Can Add Other Error Pages Here
- Layouts
- partials
- AppFooter.vue <!-- Uses Element Ui Tags
- AppHeader.vue <!-- Uses Element Ui Tags
- main.vue // <!-- Our Main Layout Uses Element Ui Tags
- pages
- home.vue // <!-- Our Home Layout Uses Element Ui Tags
- app.js // <!-- Same as The Main App , No Need to replace
- bootstrap.js // <!-- Holds Our Element Ui Themes
- package.json // <!-- Hold All Dependencies for Element Ui
- routes.js // <!-- linkActiveClass set for Element Ui
- webpack.mix.js <!-- Add webpackConfig style-loader and css-loader
Counter Part File Structure We need to Replace
App Folder
- webpack.mix.js
- package.json
- resources
- assets
- js
- views
- errors
- 404.vue
- Layouts
- partials
- AppFooter.vue
- AppHeader.vue
- main.vue
- pages
- home.vue
- themes
- index.css // element-ui default index.css Already Added in Our Main App
- app.js // Same as app.js in element ui folder no Need to replace
- bootstrap.js
- routes.js
- sass
- app.scss // <!-- This File is Empty
Here are the List of ElementUI Files and Corresponding Counter Part in Our Main App We Need to replace
-
./Styles/ElementUi/bootstrap.js --> ./resources/assets/js/bootstrap.js
-
./Styles/ElementUi/routes.js --> ./resources/assets/js/routes.js
-
./Styles/ElementUi/theme/index.css --> ./resources/assets/js/theme/index.css
Same Structure As Our Main App Structure Located @ resources/assets/js/views/*
Lists Of Layout Files
Replace ./package.json by ./Styles/ElementUi/package.json
From Main App folder Type
mv Styles/ElementUi/package.json package.json
Edit and Remove all Commented Lines Using Text Editor
vim package.json or code package.json
Install All Dependencies Using NPM
npm install
or use Yarn
rm yarn.lock
yarn install
All Commands Are Listed on ./package.json
npm run dev - this will compile your app for dev
npm run hot - enable hot reloading
npm run production - compile for production all minification are added here
npm run watch - if you enable browsersync this is command to run
npm run watch poll - if you the app is a bit sluggish you may need to run this instead of watch.
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)npm install babel-plugin-component -D
edit .babelrc file
{
"presets": ["es2015", "stage-2"],
"plugins": [["syntax-async-functions","transform-regenerator","component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]]
}in your .bootstrap.js
import { Button, Select } from 'element-ui'
Vue.use(Button)
Vue.use(Select)For Complete List of Component Check This Guide
For Full Import Just these line in your .bootstrap.js
import locale from 'element-ui/lib/locale/lang/en'
Vue.use(ElementUI, { locale })For Import On Demand Element Ui
import Vue from 'vue'
import { Button, Select } from 'element-ui'
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'
// configure language
locale.use(lang)
// import components
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)For More Info About Internationalization Visit Click Here
npm i element-theme -g
# from npm
npm i element-theme-default -D
# from GitHub
npm i https://github.com/ElementUI/theme-default -D
After successfully installing the above packages, a command named et is available in CLI (if the packages are installed locally, use node_modules/.bin/et instead). Run -i to initialize the variable file which outputs to element-variables.css by default.
et -i [custom output file] // We can Output it At ./resources/assets/js/theme/
> ✔ Generator variables file
Run this Command
et -i ./resources/assets/js/theme/element-variables.css
This will Out This File
./resources/assets/js/theme/element-variables.css
In element-variables.css you can find all the variables we used to style Element and they are defined in CSS4 style:
:root {
/* Colors
-------------------------- */
--color-primary: #20a0ff;
--color-success: #13ce66;
--color-warning: #f7ba2a;
--color-danger: #ff4949;
--color-info: #50BFFF;
--color-blue: #2e90fe;
--color-blue-light: #5da9ff;
--color-blue-lighter: rgba(var(--color-blue), 0.12);
--color-white: #fff;
--color-black: #000;
--color-grey: #C0CCDA;Just edit element-variables.css, e.g. changing the theme color to red:
--color-primary: red;After saving the variable file, use et to build your theme. You can activate watch mode by adding a parameter -w. And if you customized the variable file's output, you need to add a parameter -c and variable file's name: You can specify its output directory with parameter -o
et
> ✔ build theme font
> ✔ build element theme
By default the build theme file is placed inside ./theme. You can specify its output directory with parameter -o. Importing your own theme is just like importing the default theme, only this time you import the file you just built:
Run this Command to Build element-variables.css to index.css
We can Specify the output of file using -o flag
et -o ./resources/assets/js/theme/index.css
import './theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'
Vue.use(ElementUI)
If you are using babel-plugin-component for on-demand import, just modify .babelrc and specify styleLibraryName to the path where your custom theme is located relative to .babelrc. Note that ~ is required:
{
"presets": ["es2015", "stage-2"],
"plugins": [["syntax-async-functions","transform-regenerator","component", [
{
"libraryName": "element-ui",
"styleLibraryName": "~theme"
}
]]]
}