All Projects → ShuangDa1018 → element-ui-s

ShuangDa1018 / element-ui-s

Licence: MIT license
🖖element-ui-s is a interesting component library 🦄https://shuangda1018.github.io/element-ui-s

Programming Languages

Vue
7211 projects
javascript
184084 projects - #8 most used programming language
SCSS
7915 projects

Projects that are alternatives of or similar to element-ui-s

Login
Vue + Vue-router + Vuex 实现前端页面及逻辑,Express 实现注册登录登出的RestFul API 。
Stars: ✭ 246 (+645.45%)
Mutual labels:  gulp, element-ui
Blog
大前端技术为主,读书笔记、随笔、理财为辅,做个终身学习者。
Stars: ✭ 3,179 (+9533.33%)
Mutual labels:  element-ui, vuepress
Admin-Frame-Vue3
基于Vue3 + Element-Plus + Vite 开发的中/后台管理系统
Stars: ✭ 181 (+448.48%)
Mutual labels:  element-ui
frontenso-11ty-starter
Production-ready 11ty+Gulp+Webpack Starter that features Nunjucks, SASS, TailwindCSS (with JIT complier), and ESNext.
Stars: ✭ 24 (-27.27%)
Mutual labels:  gulp
Shangchao-Website
(官网案例) - 上朝科技 - Vue 2.0 - SPA项目
Stars: ✭ 22 (-33.33%)
Mutual labels:  gulp
generator-fountain-react
Yeoman 'fountain' generator to start a webapp with React
Stars: ✭ 36 (+9.09%)
Mutual labels:  gulp
vuepress-theme-default-prefers-color-scheme
add prefers-color-scheme for vuepress default theme
Stars: ✭ 51 (+54.55%)
Mutual labels:  vuepress
slim-skeleton
Slim Framework skeleton application following MVC construction
Stars: ✭ 18 (-45.45%)
Mutual labels:  gulp
vuepress-theme-thindark
A dark theme for VuePress.
Stars: ✭ 26 (-21.21%)
Mutual labels:  vuepress
frontie
Frontie is a front-end boilerplate. Gulp | Twig.js | Sass | Autoprefixer | Browsersync | Bootstrap 4 Grid System & Responsive Breakpoints
Stars: ✭ 28 (-15.15%)
Mutual labels:  gulp
scss-gulp-boilerplate
Very Basic Sass(SCSS) based boilerplate.
Stars: ✭ 16 (-51.52%)
Mutual labels:  gulp
yak
Yak - REDAXO mit YDeploy, Developer, Gulp, Browserify, PostCSS und Yimmelyam
Stars: ✭ 21 (-36.36%)
Mutual labels:  gulp
branch
Branch Starter Theme - A WordPress starter theme based on Timber library and Bootstrap
Stars: ✭ 87 (+163.64%)
Mutual labels:  gulp
monsieurpress
A minimal & lightweight WordPress starter theme using gulp
Stars: ✭ 39 (+18.18%)
Mutual labels:  gulp
gulp-sort
Sort files in stream by path or any custom sort comparator
Stars: ✭ 22 (-33.33%)
Mutual labels:  gulp
microsoft-figma
Produce sass/less variables files from figma
Stars: ✭ 18 (-45.45%)
Mutual labels:  gulp
adfab-gulp-boilerplate
A boilerplate including Gulp, Less/SASS, BrowserSync.
Stars: ✭ 17 (-48.48%)
Mutual labels:  gulp
vue-login
基于vue2.0+koa2+mongodb实现注册登录
Stars: ✭ 90 (+172.73%)
Mutual labels:  element-ui
vuepress-plugin-meting
🍰 A simple plugin connect APlayer, Meting and VuePress.
Stars: ✭ 29 (-12.12%)
Mutual labels:  vuepress
eryajf.github.io
📝 大千世界,何其茫茫。谨此笔记,记录过往。凭君阅览,小站洛荒。如能收益,莫大奢望
Stars: ✭ 159 (+381.82%)
Mutual labels:  vuepress

element-ui-s 组件库

文档地址

https://shuangda1018.github.io/element-ui-s/

快速开始

1.安装组件库

    npm i element-ui-s 

2.引用组件库

完整引入

在 main.js 中写入以下内容:

// main.js 完整引入 
import Vue from 'vue';
import 'element-ui-s/lib/theme-chalk/index.css';
import ElementUiS from 'element-ui-s';
Vue.use(ElementUiS);
按需引入

首先,安装 babel-plugin-component,借助该插件,我们可以只引入需要的组件,以达到减小项目体积的目的。

npm install babel-plugin-component -D

然后,将 .babelrc 或 babel.config.json 文件 修改,.babelrc举例子(ps:element官网还不改这的代码,坑小白):

// .babelrc
{
  "presets": [["@babel/preset-env", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui-s", 
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

babel-plugin-component的作用为编译源码如下(彩蛋:某些时候你可能会想用下面方式引入哦~~~~~哈哈)

import { CountUp } form 'element-ui-s'
=> // 编译成下面这种
import CountUp from 'element-ui-s/lib/count-up.js'
require('element-ui-s/lib/theme-chalk/count-up.css')
// main.js 按需引入 (组件,方法,指令3种)
import Vue from 'vue';
import { CountUp,Print,Dialogdrag } from 'element-ui-s';
Vue.use(CountUp) // <els-countUp/>
Vue.prototype.$Print = Print // this.$Print('#app')
Vue.dreactive('dialogdrag',Dialogdrag) // v-dialogdrag
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].