balm ui
1.0.0
Vue.js용 차세대 머티리얼 UI
BalmUI는 Vue 3용 모듈식 및 사용자 정의 가능한 머티리얼 디자인 UI 라이브러리입니다.
balm-ui@8Vue 2를 지원합니다.
balm init vue my-project
cd my-projectbalm-ui 설치 yarn add balm-ui
# OR
npm install --save balm-ui balm.config.js 업데이트
다운로드하지 않고 머티리얼 아이콘 얻기(또는 my-project/app/fonts 에 다운로드 및 추출)
const api = ( mix ) => {
if ( mix . env . isDev ) {
mix . copy ( 'node_modules/balm-ui/fonts/*' , 'app/fonts' ) ;
}
} ; Dart Sass를 사용하기 위해 my-project/config/balmrc.js 편집하세요.
module . exports = {
styles : {
extname : 'scss'
}
// Other Options...
} ; my-project/app/styles/global/_vendors.scss 편집하세요.
/* import BalmUI styles */
@use ' balm-ui/dist/balm-ui ' ;
/path/to/project-name/styles/_vendors.scss에서 Sass를 사용하는 것이 좋습니다. BalmUI의 고급 스타일 사용법을 사용할 수 있습니다.
my-project/app/scripts/main.js 편집
import { createApp } from 'vue' ;
import App from '@/views/layouts/app' ;
import BalmUI from 'balm-ui' ; // Official Google Material Components
import BalmUIPlus from 'balm-ui/dist/balm-ui-plus' ; // BalmJS Team Material Components
const app = createApp ( App ) ;
app . use ( BalmUI ) ; // Mandatory
app . use ( BalmUIPlus ) ; // Optional
app . mount ( '#app' ) ; my-project/app/styles/global/_vendors.scss 편집하세요.
@use ' balm-ui/components/core ' ;
@use ' balm-ui/components/button/button ' ;
@use ' balm-ui/components/icon/icon ' ;
@use ' balm-ui/components/dialog/dialog ' ;
@use ' balm-ui/plugins/alert/alert ' ; my-project/app/scripts/main.js 편집
import { createApp } from 'vue' ;
import App from '@/views/layouts/app' ;
import UiButton from 'balm-ui/components/button' ;
import $alert from 'balm-ui/plugins/alert' ;
const app = createApp ( App ) ;
app . use ( UiButton ) ;
app . use ( $alert ) ;
app . mount ( '#app' ) ; npm run dev Vue 구성 요소 편집: my-project/app/scripts/views/components/hello.vue
< template >
< div class =" hello " >
...
<!-- Add a test button -->
< ui-button @click =" $alert('Hello BalmUI') " > Click Me </ ui-button >
</ div >
</ template > npm run prod vue-cli
vue create my-project
cd my-project vite
# npm 6.x
npm init @vitejs/app my-project --template vue
# npm 7+, extra double-dash is needed:
npm init @vitejs/app my-project -- --template vue
# yarn
yarn create @vitejs/app my-project --template vue
cd my-projectbalm-ui 설치 yarn add balm-ui
# OR
npm install --save balm-ui vue-cli
// vue.config.js
module . exports = {
runtimeCompiler : true ,
// NOTE: set alias via `configureWebpack` or `chainWebpack`
configureWebpack : {
resolve : {
alias : {
'balm-ui-plus' : 'balm-ui/dist/balm-ui-plus.js' ,
'balm-ui-css' : 'balm-ui/dist/balm-ui.css'
}
}
}
// chainWebpack: (config) => {
// config.resolve.alias
// .set('balm-ui-plus', 'balm-ui/dist/balm-ui-plus.js')
// .set('balm-ui-css', 'balm-ui/dist/balm-ui.css');
// }
} ; vite
// vite.config.js
import { defineConfig } from 'vite' ;
import vue from '@vitejs/plugin-vue' ;
export default defineConfig ( {
plugins : [ vue ( ) ] ,
resolve : {
alias : {
vue : 'vue/dist/vue.esm-bundler.js' ,
'balm-ui-plus' : 'balm-ui/dist/balm-ui-plus.esm.js' ,
'balm-ui-css' : 'balm-ui/dist/balm-ui.css'
}
}
} ) ; my-project/src/main.js 편집하세요.
import { createApp } from 'vue' ;
import App from './App.vue' ;
import BalmUI from 'balm-ui' ; // Official Google Material Components
import BalmUIPlus from 'balm-ui-plus' ; // BalmJS Team Material Components
import 'balm-ui-css' ;
const app = createApp ( App ) ;
app . use ( BalmUI ) ;
app . use ( BalmUIPlus ) ;
app . mount ( '#app' ) ;<script> 의 경우 <!DOCTYPE html >
< html lang =" en " >
< head >
< meta charset =" UTF-8 " />
< meta name =" viewport " content =" width=device-width, initial-scale=1.0 " />
< title > Hello BalmUI </ title >
< link rel =" stylesheet " href =" https://unpkg.com/balm-ui/dist/balm-ui.css " />
</ head >
< body >
< div id =" app " >
< ui-button icon =" add " @click =" $alert(message) " > SayHi </ ui-button >
</ div >
< script src =" https://unpkg.com/vue " > </ script >
< script src =" https://unpkg.com/balm-ui " > </ script >
< script src =" https://unpkg.com/balm-ui/dist/balm-ui-plus.js " > </ script >
< script >
const app = Vue . createApp ( {
setup ( ) {
var message = 'Hello BalmUI' ;
return {
message
} ;
}
} ) ;
app . use ( BalmUI ) ;
app . use ( BalmUIPlus ) ;
app . mount ( '#app' ) ;
</ script >
</ body >
</ html >즐기다 ?
여러분이 지금보다 더 나은 BalmUI를 만드는데 기여하고 싶습니다! 끌어오기 요청을 하기 전에 기여 가이드를 꼭 읽어보세요. 어떤 아이디어라도 끌어오기 요청이나 GitHub 문제로 제출할 수 있습니다.
우리는 모든 주요 브라우저의 마지막 두 버전을 공식적으로 지원합니다. 특히 다음 브라우저에서 테스트합니다.
