어떻게 모듈 화 된 방식 으로 vuejs 를 쓰 는 지 상세 하 게 설명 하 다

도입부
vuejs 는 입문 이 간단 한 프레임 워 크 로 사용 이 간단 하고 확장 이 편리 하 다 는 특징 을 가지 고 있다.웹 팩 이 유행 하면 서 vuejs 도 자신의 load,vue-loader 를 출시 하여 편리 한 포장 코드 를 만 들 었 습 니 다.최근 에 json viewer-ac 를 썼 는데 vue-loader 가 가 져 온 모듈 화 특성 을 완전히 사용 하여 즐겁게 썼 고 많은 경험 을 얻 었 습 니 다.여기 기록 해 봐.
파일 구조

 <template>
  <div>
   <app-header></app-header>
  </div>
</template>
<style>
...
</style>
<script>
  import AppHeader from './AppHeader.vue'
  export default {
   name:'app',
   props:['data']
   data() {
    return {}
    },
   methods: {
    handleClick() {}
   },
   components: {
    AppHeader
   }
  }
</script>

template 안 은 템 플 릿 코드 입 니 다.여 기 는 일반적으로 닫 힌 html 태그 입 니 다.예 를 들 어 div 입 니 다.
style 에 서 는 css 코드 입 니 다.이 코드 는 전체 페이지 에 작용 합 니 다.현재 템 플 릿 에 만 작용 하려 면 scoped 속성 을 사용 해 야 합 니 다.

 <style scoped> 

css 프 리 프로세서,예 를 들 어 sas 를 사용 하려 면 lang 만 설명 하고 vue-loader 는 자동 으로 불 러 옵 니 다.물론,전 제 는 해당 하 는 sas-loader 가 설치 되 어 있 습 니 다.

 <style lang="sass">

script 여기 서 사용 하 는 것 은 es6 의 코드 입 니 다.저 는 babel 을 사용 하여 컴 파일 하기 때문에 당연히 babel,es6 의 preset 을 설치 하고 루트 디 렉 터 리 에서 자체 적 으로'babelrc 파일'을 만들어 야 합 니 다.구체 적 으로 제 ac 를 참고 하거나 공식 vue-cli 로 프로젝트 를 초기 화 할 수 있 습 니 다.
보이 지 않 는 태그 만 들 기
template 는 템 플 릿 의 가장 바깥 에 있 는 태그 일 뿐만 아니 라 일반적인 태그 로 도 사용 할 수 있 습 니 다.예 를 들 어 일부 지역 의 표시 와 숨 김 을 v-if 로 제어 해 야 할 때 이렇게 할 수 있 습 니 다.

 <template>
  <template v-if="valid">
    <div></div>
  </template>
  <template v-else>
   <div></div>
  </template>
</template> 

그리고 template 는 과장 되 지 않 기 때문에 최종 dom 구조 에 영향 을 주지 않 습 니 다.
메모:v-show 는 template 와 함께 사용 할 수 없습니다.
flux
실제 개발 할 때 원시 적 인 데이터 관리 모델 이 비교적 혼 란 스 러 워 서 임시 데이터,지속 적 인 데이터,사용자 데이터,백 엔 드 데 이 터 를 구분 하기 어렵다.이때 flux 를 도입 하 는 것 이 가장 적합 하 다.
만약 잠시 다른 lib 를 도입 하고 싶 지 않다 면,스스로 하 나 를 실현 하려 고 시도 할 수 있 지만,사실은 매우 간단 하 다.store.js 준비 해 주세요.

 let trim = str => {
 return str.replace(/(^[\s\t]+)|([\s\t]+$)/g, '');
}
export const state = {
  jsons: []
}

export const actions = {
  parse(jsonStr) {
    if(!trim(jsonStr)) return

    let jsonObj = null
    try{  
      jsonObj = JSON.parse(jsonStr)
    }catch(err){
      state.jsons.push({err: jsonStr + '', valid: false })

    }
    if(jsonObj){
      state.jsons.push({obj:jsonObj, valid: true})
    }
  }
}

모든 보기 의 데 이 터 는 state 에서 나온다.모든 수정 은 actions 를 통 해 이 루어 져 야 합 니 다.하위 구성 요소 에서 데이터 에 대한 수정 은 부모 구성 요소 에 영향 을 주지 않 기 때문에 vuejs 의 양 방향 연결 기능 을 안심 하고 사용 할 수 있 습 니 다.
그리고 app 의 루트 구성 요소 에 state 와 actions 를 도입 한 다음 필요 에 따라 하위 구성 요소 에 전달 할 수 있 습 니 다.
 

import { state, actions } from '../store' data() {
  return {
   state,
   actions
  }
 }, 

<child :state="state" :handleClick="actions.update"></child> 

import 공공 css
페이지 에서 자주 사용 하 는 style 변 수 를 common.sas 와 같은 공공 파일 에 저장 하면

 $width: 80%;
$height: 100%;
$moli-green:#CCF3E4;
$moli-white:#f8f8f8; 

그리고 구성 요소 의 style 에 도입 하면 편리 하고 강력 하지 않 습 니까?
그러나 유감스럽게도 나 는 이것 이 어떻게 실현 되 어야 할 지 아직 모른다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.