어떻게 vue 3 를 사용 하여 재료 고 를 만 듭 니까?

왜 재료 고 를 만들어 야 합 니까?
우 리 는 로그 인 페이지 를 많이 썼 다.모든 로그 인 페이지 는 배경 그림 과 색상 을 제외 하고 주체 구 조 는 거의 일치 하 며 몇 가지 유형 만 있 습 니 다.만약 에 로그 인 페이지 의 코드 를 관리 해 줄 수 있 는 곳 이 있다 면 다음 에 제 가 로그 인 할 때 화면 을 직접 만 들 고 논 리 를 바 꾸 면 됩 니 다.
로그 인 페이지 를 저장 하기 위해 login.txt 를 만 들 수도 있 습 니 다.그러나 저장 하고 싶 은 코드 세 션 이 점점 많아 지면 서 파일 의 이름 에 따라 이 코드 세 션 의 구체 적 인 표현 형식 을 알 기 어렵 습 니 다.이것 은 우리 가 토론 하고 자 하 는 화 제 를 불 러 일 으 켰 습 니 다.재료 라 이브 러 리 를 구축 하여 중복 사용 할 수 있 는 코드 세 션 을 어떻게 관리 하 는 지 알 수 있 습 니 다.
재료 가 뭐 예요?
재 료 는 재 활용 가능 한 코드 세 션 입 니 다.
재 활용 하면 왜 구성 요 소 를 부 르 지 않 느 냐 고 물 을 수도 있 습 니 다.재료 와 구성 요 소 는 본질 적 인 차이 가 있 기 때문에 재 료 는 코드 일 뿐 props,event,slot 등 속성 이 존재 하지 않 습 니 다.
재 료 는 입도 의 차이 로 나 눌 수 있다.
부품 급 재료
블록 급 재료
페이지 급 재료
재료 의 유별
하나의 단 추 를 예 로 들 면.예 를 들 어 UI 라 이브 러 리 의 버튼 원 각 은 6px 이 고 디자이너 가 요구 하 는 버튼 은 원 각 이 없다.우 리 는 이러한 코드 세 션 을 완성 할 수 있다.

<!--       -->
<el-button style="border-radius:0"></el-button>

이 코드 세 션 을 구성 요소 급 재료 로 저장 합 니 다.원 각 이 없 는 단 추 를 사용 하려 면 이 코드 세 션 을 빠르게 얻 을 수 있 습 니 다.
당신 은 의심 할 지도 모 르 지만 속성 을 추가 하지 않 았 습 니까?왜 재료 로 만 들 었 습 니까?제 가 직접 쓰 면 됩 니 다.이 예 를 들 어 나 는 가장 간단 한 방식 으로 너 에 게 구성 요소 급 재료 가 무엇 인지 알려 주 고 싶다.만약 에 원 각 만 수정 하면 너 는 당연히 하나의 재료 로 저장 할 필요 가 없다.
일반적으로 백 스테이지 관리 시스템 을 개발 할 때 대부분의 목록 은 페이지 에 따라 표 가 함께 나타난다.우 리 는 표 와 페이지 를 조합 한 코드 세 션 을 블록 급 재료 라 고 부 릅 니 다.예 를 들 어:

<!--       -->
<el-table />
<el-pagination  />

마찬가지 로 서로 다른 항목 에서 로그 인 하면 등록 페이지 의 스타일 이 같 으 면 전체 페이지 를 페이지 급 의 재료 로 할 수 있 습 니 다.예 를 들 어:

<!--       -->
<el-input  placeholder="      "></el-input>
<el-input  placeholder="     "></el-input>
<el-button>  </el-button>
<a href="#" rel="external nofollow"  >    ?</a>

fuep,vue 3 기반 재료 창고
fuep,코드 세 션 을 관리 하 는 데 도움 을 주 는 도구 입 니 다.글 끝 에 온라인 체험 주소 가 있 습 니 다.
만약 에 날 아 다 니 는 얼음 을 사용 한 적 이 있다 면 재료 에 대한 개념 은 거의 날 아 다 니 는 얼음 과 일치 하 는 것 을 발견 할 수 있 을 것 이다.날 아 다 니 는 얼음 과 달리 fuep 의 재료 운반 체 는 파일 이 아니 라 시각 화 된 구조 도구 이다.시각 화 된 레이아웃 도 구 를 재료 로 하 는 캐리어 는 침입 성,vue 와 구체 적 인 ui 라 이브 러 리 와 연결 되 어 있 습 니 다.현재,당신 은 element plus 와 vant 3 를 기반 으로 한 재료 창고 만 만 만 들 수 있 습 니 다.그러나 만약 에 element plus 와 vant 의 사용자 라면 시각 화 된 구 조 를 사용 하여 재 료 를 만 드 는 데 많은 장점 을 가 져 올 수 있 습 니 다.
4.567917.실시 간 미리보기 로 재료 의 전시 효 과 를 기대 에 부 응 하도록 한다4.567917.구조 와 디 테 일 을 편리 하 게 수정 할 수 있 습 니 다.
재료 간 에 마음대로 배합 할 수 있다.
빠 른 레이아웃
다음 에 제 가 그 중의 재 료 를 보 여 드 리 겠 습 니 다.시각 화 된 레이아웃 에서 다음 구성 요 소 를 이렇게 배열 하 십시오.

생 성 된 코드 는 이 렇 습 니 다.

    <el-row type="flex" justify="start" align="middle">
        <el-col :span="12">
            <h3 class="mb-4 px-4 text-cool-gray-800 text-4xl">Free up engineer productivity</h3>
            <p class="px-4 text-base text-gray-500 text-justify">Fuep focuses on improving the efficiency of engineers, using visual layout to quickly generate highly maintainable code. Compared with traditional visualization tools, it does not require row and col to be nested in each other.</p>
            <el-row type="flex" justify="start" align="middle">
                <el-button type="primary" class="ml-4 mt-4 px-8">Live Demo</el-button>
                <el-button class="ml-4 mt-4 px-8">Get Started</el-button>
            </el-row>
        </el-col>
        <el-col :span="12">
            <el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" :fit="cover" class="" fit="scale-down"></el-image>
        </el-col>
    </el-row>

코드 를 통 해 보 여 주 는 화면 은 다음 과 같 습 니 다.

너 는 이 재 료 를 바탕 으로 구조 나 세부 적 인 수정 을 해서 새로운 재료 로 보존 할 수 있다.
어떻게 시작 해 야 할 지 모 르 면 왼쪽 아래 에 있 는 안내 나 소 개 를 클릭 하여 fuep 의 작업 체 제 를 알 수 있 습 니 다.
fuep 온라인 체험
이상 은 vue 3 를 어떻게 사용 하여 재료 라 이브 러 리 를 만 드 는 지 에 대한 상세 한 내용 입 니 다.vue 가 재료 라 이브 러 리 를 만 드 는 데 관 한 자 료 는 우리 의 다른 관련 글 에 관심 을 가 져 주 십시오!