Laravel과 Vue의 모범 사례를 생각합니다.

개요

괴로워하면서 Vue의 베스트 프랙티스를 추구한 나날을 기록하는 곳.
더 나은 방법이 있으면 매번 업데이트합니다.

전제

현재는 SPA로 하지 않는다(multi page application적인)
일부 화면 만 시험적으로 Vue를 도입하십시오

서버측은 Laravel 사용하고 있다

Laravel-mix 사용
HACK : Laravel-mix를 사용하지 않고 노드에서 넣고 싶고 HMR을 사용하고 싶습니다 (npm run watch-poll은 Mouyada)

Single File Components 사용

vuex 사용

vue-router 사용

実装してく中で不都合な真実はその都度修正する

디렉토리 구성

기능별로 디렉토리를 나눕니다.
기능 디렉토리 안에 컴포넌트와 store와 router와 app.js(vue의 선언)를 넣는다.

components

어떤 단위로 컴포넌트 나누는가요
그렇게 될 것 같기 때문에 atomic design에 따라 분리
hada는 여기를 참조했습니다.
htps : // m / My Poji / ms / b30 예 f0 d239 9039

templates와 pages의 차이는 어쩐지 어느 컴퍼넌트의 단위로부터 store에 액세스 하는 거야는, 하면서 생각한다

store

적극적으로 modules를 사용하고 싶은 소존
actions, getters, mutations, state는 나누고 싶은 여존
htps : // 이 m / 및 ck / ms / 2 68b99 0839df52200

컴파일 대상(public/js)

이미 원시 자바 스크립트 파일이 있고, vue를 컴파일 한 파일이 혼재하는 형태가되기 때문에 명시 적으로 나눕니다.

store(Vuex)

vuex는?
htps //w w. hyper xt kan dy. 코 m / ゔ えぁ 라 ​​ゔ ぇ l 토리 토리 ㄴ

vuex 사용할 때는 언젠가
htps : // 우세 r 푸 rst. 이큐. 이. jp / ent try / dashi g-o-o-a-an d-o x
- 부모와 자식 관계가 있는 구성 요소 간의 데이터 전달은 "Event Up, Props down"입니다.
- 부모와 자식이없는 구성 요소 간의 데이터 공유는 Vuex에서
- 컴포넌트의 고유 데이터는 컴포넌트의 로컬 상태(data)
- 글로벌 데이터는 Vuex

modules 안의 index에서는 state와 mutations와 actions와 getters를 받고 export한다.

assets/js/GMB/tag/store/modules/locations/index.js

import { state } from './state'
import { mutations } from './mutations'
import { actions } from './actions'
import { getters } from './getters'

export default {
    namespaced: true,
    state,
    getters,
    mutations,
    actions
}

store index에서 각 modules를 받습니다.

assets/js/GMB/tag/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

import location from './modules/locations/index'

Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {
        location
    }
})

export default store

vue-router

기본적으로 routes로 설정하는 component는 page 디렉토리 아래의 것

assets/js/GMB/tag/router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

export default new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            component: require('./components/pages/EditTag.vue'),
        },
    ]
})