VUE.JS 기반 모 바 일 프레임 Mint UI 사용
GitHub: github.com/ElemeFE/mint
프로젝트 홈 페이지:mint-ui.github.io/#
Demo: elemefe.github.io/mint-
문서:mint-ui.github.io/docs/#
배 고 프 세 요?6 월 초 개원 이후 지역 사회 와 팀 내부 의 피드백 에 따라 bug 를 복원 하고 일부 구성 요 소 를 추가 하여 이번 주 에 0.2.0 버 전 을 발표 했다.민 트 UI 를 사용 하 는 Vue 프로젝트 를 0 부터 구축 하 는 방법 을 소개 한다.
비계
Vue.js 의 신속 한 발전 에 따라 현재 Vue 프로젝트 의 비 계 를 구축 하 는 데 많은 선택 이 있 습 니 다.예 를 들 어 공식 적 으로 제공 하 는 vue-cli 를 사용 할 수 있 습 니 다.본 고 는 배 고 프 십 니까?자신의 구축 도구 cooking 을 사용 하여 이 임 무 를 완성 합 니까?
우선,전역 설치 cooking:
npm i cooking -g
새 항목 폴 더:
mkdir mint-ui-example
프로젝트 폴 더 에 들 어가 cooking 으로 구축:
cooking init vue
마지막 매개 변수 vue 는 Vue.js 기반 비 계 를 구축 한 것 을 나타 낸다.구축 과정 에서 cooking 은 다음 과 같은 인자 가 필요 합 니 다.
그 중에서'어떤 CSS 를 사용 하여 미리 처리 합 니까?'여기 서 선택 한 것 은 Salad 입 니 다.이것 은 PostCSS 를 바탕 으로 하 는 해결 방안 입 니 다.관심 이 있 는 학생 들 이 알 아 볼 수 있 습 니 다.물론 다른 프로세서 도 선택 할 수 있 습 니 다.
구축 완료 후 프로젝트 구 조 는 다음 과 같 습 니 다.
다음은 Mint UI 설치:
npm i mint-ui --save
Mint UI 도입자,그 후의 일 은 두 가지 상황 으로 나 눌 수 있 습 니 다.
1.모든 구성 요소 도입
만약 당신 의 프로젝트 가 Mint UI 에 비교적 많은 구성 요 소 를 사용 할 것 이 라면,가장 간단 한 방법 은 그것들 을 모두 도입 하 는 것 입 니 다.이 때 입구 파일 main.js 에서:
import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';
Vue.use(MintUI);
2.필요 에 따라 도입어떤 구성 요소 만 사용 하면 이 구성 요소 만 도입 할 수 있 습 니 다.Mint UI 는 코드 를 포장 할 때 이 구성 요소 와 무관 한 파일 이 최종 코드 에 나타 나 지 않도록 보장 합 니 다.예 를 들 어 Button 구성 요 소 를 도입 해 야 할 경우 main.js 에서:
import Button from 'mint-ui/lib/button';
import 'mint-ui/lib/button/style.css';
Vue.component(Button.name, Button);
위의 두 가지 도입 방법 모두 해당 CSS 파일 을 단독으로 도입 해 야 한 다 는 것 을 알 수 있다.특히 필요 에 따라 여러 구성 요 소 를 도입 할 때 불편 하 다.이 문 제 를 피하 기 위해 서 플러그 인 을 사용 할 수 있 습 니 다.우선 설치 해 야 합 니 다.
npm i babel-plugin-component -D
그리고.babelrc 에서 설정 합 니 다:
{
"plugins": ["other-plugin", ["component", [
{ "libraryName": "mint-ui", "style": true }
]]]
}
이렇게 하면 상술 한 두 가지 도입 방법 은 다음 과 같이 간소화 할 수 있다.
import MintUI from 'mint-ui';
Vue.use(MintUI);
화해시키다
import Button from 'mint-ui/lib/button';
Vue.component(Button.name, Button);
플러그 인 은 해당 CSS 파일 을 자동 으로 가 져 옵 니 다.쓰다
각 구성 요소 의 사용 방법 은 문 서 를 읽 으 십시오.여기 에는 작은 예 만 들 수 있 습 니 다.app.vue 에서:
<template>
<h1>mint-ui-example</h1>
<mt-button
type="primary"
@click="sheetVisible = true">
</mt-button>
<mt-actionsheet
cancel-text=""
:actions="actions"
:visible.sync="sheetVisible">
</mt-actionsheet>
</template>
<script>
import { Toast, MessageBox } from 'mint-ui';
export default {
name: 'app',
data() {
return {
sheetVisible: false,
actions: [{
name: ' Toast',
method: this.showToast
}, {
name: ' Message Box',
method: this.showMsgbox
}]
};
},
methods: {
showToast() {
Toast(' Toast');
},
showMsgbox() {
MessageBox(' ', ' Message Box');
}
}
};
</script>
다음 페이지 를 얻 을 수 있 습 니 다:예고
지금까지 민 트 UI 사용법 소개 입 니 다.사용 하 는 과정 에서 어떤 문제 가 발생 하거나 우리 에 게 조언 을 해 주 고 싶다 면babel-plugin-component에 가서 issue 를 제기 하 는 것 을 환영 합 니 다.
이 모 바 일 구성 요소 라 이브 러 리 외 에 배 고 프 세 요?데스크 톱 구성 요소 라 이브 러 리GitHub 창고도 있 습 니 다.현재 우 리 는 그것 을 재 구성 하고 있 는데 이번 에는 UED 의 개입 으로 전체적인 시각 이 크게 향상 되 었 다.완 료 된 후에 도 원본 을 열 고 두 가지 버 전이 있 는데 각각 vue 1.0.x 와 vue 2.0 을 지원 합 니 다.물론 민 트 UI 도 vue 2.0 지원 을 검토 한다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.