vue 를 사용 하여 자동 건설 프로젝트 를 어떻게 구축 합 니까?
그동안 Jquery+Jquery-ui 로 이 프로젝트 를 해 왔 는데,그 때 는 디자인 원고 도 없고,프로젝트 수요 도 없고,보스 한 마디 로 이런 걸 해 야 되 는데,그 때 는...그래!인정 합 니 다.사실은 익숙 해 졌 습 니 다.괜 찮 습 니 다.
그 후에 한 동안 demo 를 만 들 었 습 니 다.BOSS 는 매우 만 족 스 러 웠 습 니 다.그 러 니 다음 에 천천히 하 세 요.두 세 달 차이 가 나 지 않 아 요.그냥 묵묵히 이것 을 했 습 니 다.나중에 프로젝트 가 출시 되 었 습 니 다.물론 제품 이 완선 되 지 않 아서 문제 가 생 겼 습 니 다!
그러나 기본적으로 회사 의 수 요 를 만족 시 킬 수 있 습 니 다.편집 할 수 있 는 것 은 모두 편집 할 수 있 습 니 다.구성 요소 의 background(배경 그림 포함)color border box-shadow margin padding width height 정렬 방식(글꼴 과 구성 요소 내부 요소)border-radius font(font-size/font-family)등 기본 적 인 것 은 마음대로 변경 할 수 있 습 니 다.물론 회사 의 사용 을 만족 시 키 지 못 할 수도 있 습 니 다.사용자 정의 스타일 의 기능 을 추 가 했 습 니 다.이것 은 전단 을 아 는 사람 만 사용 할 수 있 습 니 다.어 쩔 수 없습니다.수 요 는 영원히 변 화 를 따라 가지 못 합 니 다.이렇게 안전 합 니 다.모두 가 알 고 있 기 때문에 수요 의 만족 과 변경 은 기 존의 수요 보다 영원히 앞 선다.
이러한 기본 적 인 변경 가능 을 제외 하고 각 구성 요소 의 특유 한 변경 가능 한 기능 도 기본적으로 완비 되 어 있다.예 를 들 어 윤 방도 이미지 변경,윤 방 방식,윤 방 여 부 를 제어 하 는 등 기능 은 여기 서 일일이 소개 하지 않 는 다.
그 후에 구성 요소 내부 의 개별 요 소 를 수정 할 수 없 기 때문에[바 인 딩 수정]기능 도 추 가 했 습 니 다.바로 이 기능 이 선택 한 후에 보기 인터페이스 에서 수정 해 야 할 요 소 를 선택 하면 수정 할 수 있 습 니 다.이 기능 은 약간 재 미 있 습 니 다.
이렇게 많은 말 을 했 습 니 다.사실은 그 당시 에 급 하 게 해서 저장 할 때 HTML 을 저 장 했 습 니 다.여러분 들 이 무시 하지 마 세 요.이것 도 제 마음 속 의 줄거리 입 니 다.최근 에 보스 가 다시 생각 을 했 습 니 다.더 해 야 할 것 이 많 습 니 다.곰 곰 이 생각 한 후에 프로젝트 를 재 구성 하기 로 결 정 했 습 니 다.
vue 응답 식 과 기본 이 순수 데이터 조작 임 을 고려 하여 vue 를 사용 하여 이 프로젝트 를 재 구축 하기 로 결정 하 였 습 니 다.
개발 준비
1.vue-cli 를 사용 하여 설정 한 것 을 다운로드 합 니 다.
2.중간 에 끌 어 당 겨 서 구성 요 소 를 만 드 는 작업 이 걸 려 있 기 때문에 vuedraggable 과 sortablejs 를 사 용 했 습 니 다.
vuedraggable sortablejs 설치
npm install vuedraggable
npm install sortablejs3.vuex 를 설치 합 니 다.그 안에 대량의 데이터 상호작용 과 관련 되 기 때문에 많은 구성 요소 들 이 공용 데이터 가 필요 합 니 다.vuex 를 사용 하지 않 고 관리 하지 않 으 면 개발 에 더 많은 불필요 한 번 거 로 움 을 가 져 올 것 입 니 다.
vuex 설치
npm install --save vuex
element-ui 홈 페이지 주소
elememt 설치
npm install element-ui
// element-ui element? npm element ( ，0.0 ！！！)axios 설치
npm install --save axios프로젝트 시작
1.각종 파일 의 설정
->main.js 에서 파일 설정
그림 에 해석 이 있어 서 알 수 있 을 거 예요.
->사 이 드 바 드래그 구성 요소 데이터 설정
파일 이 너무 길 기 때문에 일부 삭 제 했 습 니 다.여 기 는 간단 한 형식 입 니 다.참고 만 하고 기준 으로 하지 않 습 니 다.
구성 요소 에 레이아웃 문제 가 존재 하기 때문에 레이아웃 구성 요소 가 있어 야 구성 요소 가 레이아웃 구성 에 넣 을 수 있 습 니 다.그래 야 더욱 유연 합 니 다.
->vuexjs 상태 관리 중인 js 설정
설명:
1.사용자 가 드래그 한 후에 실시 간 으로 session Storage 에 저장 해 야 하기 때문에 초기 에 session Stroage 에서 데 이 터 를 찾 아야 합 니 다.갑자기 페이지 를 새로 고침 하 는 것 을 방지 하고 데이터 베이스 에 저장 되 지 않 았 습 니 다.사용자 가 방금 편집 한 데 이 터 를 모두 잃 어 버 린 경우 입 니 다.
2.여기 서 설명 하 겠 습 니 다.이미 제출 한 데 이 터 를 고려 하여 사용자 가 창 을 닫 은 후에 다시 들 어 올 때 배경 에서 제 시 된 사용자 의 이전 데 이 터 를 결합 하여 session Storage 에 저장 해 야 합 니 다.이 점 을 믿 고 여러분 이 생각 하 실 것 입 니 다.여기 서 선의 로 0.0 을 알려 드 립 니 다.
3.저 는 여기 서 네 개의 인 자 를 잠시 놓 았 습 니 다.그림 에서 설명 이 있 습 니 다.저 는 주로 기본 편집 을 하나의 구성 요소 로 만 들 었 습 니 다.사용자 가 클릭 할 때 어떤 구성 요소 에 따라 데 이 터 를 편집 구성 요소 에 다시 렌 더 링 하여 클릭 한 구성 요소 에 실시 간 으로 대응 하여 편집 할 수 있 습 니 다.
4.editShow 의 역할 은 편집 구성 요소 의 표시 여 부 를 제어 하 는 것 입 니 다.주로 구성 요 소 를 삭제 할 때 편집 구성 요 소 를 숨 깁 니 다.다른 구성 요소 의 표 시 를 클릭 하 십시오.
기본 적 인 배 치 는 여기까지 입 니 다.다음은 진정한 개발 입 니 다.
2.프로젝트 개발 시작
->app.vue 파일 에 어떻게 써 야 하나 요?
<template>
<!-- element-ui-->
<el-container>
<el-aside>
<Draggable class="app-aside-drag" :options="dragOption">
<div class="app-aside-list"
v-for="(dragList,index) in dragData"
:type="dragList.type"
:key="dragList.type">
<div class="aside-item-body">
<i class="aside-item-ele"></i>
<span class="aside-item-ele">{{ list.title }}</span>
</div>
</div>
</Draggable>
<el-aside>
<el-main class="app-main">
<section class="app-phone">
<div class="app-phone-header">
<span class="phone-camera"></span>
<span class="phone-ls"></span>
</div>
<!-- view -->
<Sort class="app-phone-body"></Sort>
<div class="app-phone-footer">
<button class="app-phone-menu">RS</button>
</div>
</section>
</el-main>
<el-aside class="app-right">
<!-- -->
<BaseEdit></BaseEdit>
</el-aside>
</el-container>
</template>
<script>
import DragApi from "@/dragapi/dragapi.js";
import Draggable from "vuedraggable";
import Sort from "@/view/Sort";
import BaseEdit from "@/view/BaseEdit";
export default {
name: 'app',
data(){
return{
dragData: {},
dragOption: {
group: {
name: 'components', // ， name
pull: 'clone',
put: false
},
sort: false // true。 ，
}
}
},
components: {
Draggable,
Sort,
BaseEdit
},
created(){
//
// ，
this.dragData = DragApi.configList[1].content;
}
}
</script>
<template>
<Draggable :options="sortOption"
@sort="onSort"
@add="onAdd"
class="app-sort">
<!-- ui -->
<!-- ， vue -->
<div v-for="(appUi,index) in sortApi" //
:is="appUi.component" //
:content="appUi.content"
:oStyle="appUi.style"
:editPartShow="appUi.editPartShow"
:aIndex="index"
// ， @click.native
@click.native="getIndex(index)"
//key ，
:key="appUi.content.code">
</div>
</Draggable>
</template>
<script>
// vuex vuexjs
import { mapState,mapMutations } from 'vuex';
//
import Draggable from 'vuedraggable';
//
import Carousel from "@/components/Carousel.vue";
import Btn from "@/components/Btn.vue";
export default {
name: 'Sort',
components: {
Draggable,Btn,Carousel
},
data(){
return {
sortOption: {
group: {
name: 'components', // name, ， ，
pull: true,
put: true
},
sort: true,
animation: 300 // ，
}
}
},
computed:{
...mapState(['editIndex','sortApi']),
},
watch:{
sortApi:{
handler(newVal,oldVal){
window.sessionStorage.setItem('localData',JSON.stringify(newVal));
},
deep: true
}
},
methods:{
...mapMutations(['sortCp','addCp','setStyle','setCommon']),
onSort(res){ //
if(res.from === res.to){
this.sortCp(res);
}
},
onAdd(res){//
this.addCp(res);
},
getIndex(index){
this.setCommon({index: index,flag: true});
}
}
}
</script>
<template>
<transition name="slide-right">
<div v-if="sortApi.length > 0 && editShow === true">
//
<el-tabs v-model="activeName">
<el-tab-pane label=" " name="first">
<div v-for="(appUi,index) in sortApi"
:is="appUi.component+'Edit'"
:content="appUi.content"
:oStyle="appUi.style"
:editPartShow="appUi.editPartShow"
:aIndex="index"
:currentIndex="editIndex"
:key="appUi.content.code">
</div>
</el-tab-pane>
<el-tab-pane label=" " name="second">
//
<el-collapse v-model="colorPicker.name" class="base-edit" accordion>
<el-collapse-item class="tititt" :title="colorPicker.type" :name="colorPicker.type">
<el-form ref="form" :model="colorPicker" size="mini">
<el-form-item class="cui-inline-reset"
v-for="(item,index) in colorPicker.content"
:label="item.title"
:key="item.style">
<el-color-picker
// element-ui ， @change @active-change ， ，
// ， ， ，
//
// style
@active-change=" (value) => setStyle(value,item.style)"
v-model="sortApi[editIndex].style[item.style]"
show-alpha>
</el-color-picker>
<span class="black-text-shadow"
:style="{color: sortApi[editIndex].style[item.style]}">
{{ sortApi[editIndex].style[item.style] }}
</span>
</el-form-item>
</el-form>
</el-collapse-item>
</el-collapse>
</el-tab-pane>
</el-tabs>
</div>
</transition>
</template>
<script>
import { mapState,mapMutations } from 'vuex';
// ， ， ？
// ， ， ， dom ，
//
import BtnEdit from "@/components/BtnEdit.vue";
export default{
name: 'BaseEdit',
components: {
BtnEdit
},
data(){
return{
colorPicker: {
type: ' ',
name: 'Picker',
content:[
{
title: ' ',
style: 'background'
},
{
title: ' ',
style: 'color'
}
]
},
activeName: 'first'
}
},
computed:{
...mapState(['editIndex','sortApi','editShow'])
},
methods:{
setStyle(value,style){
// style ，
this.$set(this.sortApi[this.editIndex].style,style,value);
}
}
}
</script>
// ，
// ， ，
<template>
<div class="btn-box ui-sortable" :data-code="content.code">
<el-button class="ui-btn"
:style="oStyle">
{{ content.text }}
</el-button>
// ，
<DeleteCp :aIndex="aIndex"></DeleteCp>
</div>
</template>
<script>
import DeleteCp from "@/components/DeleteCp";
export default {
name: 'Btn',
props: { //
content: Object,
oStyle: Object,
aIndex: Number
},
components: {
DeleteCp
},
data(){
return{
btnModel: 'btn-model'
}
}
}
</script>
<template>
<div class="delete-compontent-box">
<div class="el-icon-delete remove-component" @click.stop="dailogStatu"></div>
<el-dialog
title=" "
:visible.sync="dialogVisible"
:append-to-body="appendToBody"
width="430px">
<div class="el-message-box__content">
<div class="el-message-box__status el-icon-warning"></div>
<div class="el-message-box__message dialog-message"> , ?</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" size="small"> </el-button>
<el-button type="primary" @click="onRemove(aIndex)" size="small"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { mapMutations } from "vuex";
export default {
name: 'oText',
props: {
aIndex: Number
},
data(){
return{
//
dialogVisible: false,
appendToBody: true
}
},
methods:{
...mapMutations(['deleteCp','setCommon']),
dailogStatu(){
// ，
this.dialogVisible = true;
this.setCommon({flag: true,index: this.aIndex})
},
onRemove(index){
//
let flag = false;
this.deleteCp(index);
this.dialogVisible = false;
this.$message({
message: ' !',
type: 'success'
});
this.setCommon({flag: false,index: 0})
}
}
}
</script>
효과 도 전시
종결 어
자,오늘 많이 썼 습 니 다.마지막 으로 생각 을 정리 하 겠 습 니 다.
1,우선 왼쪽 드래그 구성 요소 설정
2.vuex 의 데이터 설정
3.app.vue 설정
4.구성 요소 의 설정 편집
5.각종 데이터 의 전달 과 의존
사실 모든 프로젝트 는 뚜렷 한 노선 이 필요 합 니 다.그래 야 잘 개발 할 수 있 습 니 다.그래서 제 제안 은 프로젝트 를 받 을 때 한꺼번에 쓰 지 말고 어떻게 하 는 지,그리고 돌발 적 인 일이 발생 하 는 지(예 를 들 어 갑 작 스 러 운 수요 가 바 뀌 는 것)를 잘 생각해 야 합 니 다.그러면 우리 자신 도 편리 하고 나중에 지 키 는 사람 도 편리 합 니 다.불필요 한 번 거 로 움 도 막 았 습 니 다.
여러분 의 인내심 있 는 읽 기 에 감 사 드 립 니 다.이것 은 대략적인 소개 일 뿐 이 므 로 부족 한 점 이 많 을 것 입 니 다.만약 에 여러분 이 건의 가 있 으 면 댓 글 교 류 를 환영 하고 여러분 들 이 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
