prostudy

웹서버에 완성된 nnxt.js 앱을 배포하는 방법? 직장에서, 나는 nuxtjs 개발에 대한 약간의 통찰력을 얻었고 그것에 매우 관심을 가지게 되었다.그래서 나는 조금씩 스스로 개발을 시작했지만, 지금은 완성된 프로젝트에서 벗어나지 못하고 있어. 개발을 위해 CLI에 "npm run dev"가 있는 로컬 서버를 스핀업한다.이 모든 것이 잘 된다. 그러나 홈 서버에서 nginx(또는 Windows Server 환경에서 실행되는 더 나은 대안이 있는가)와 같은 환경에서 실행하기 위해 현재 완료된 프로젝트를 어떻게 배포해야 하는가?내 CLI에 "npm run build"라는 말을 들었는데, 그 이상의 절차는 어떤가?그리고 그 명령도 옳은 방법인가? 나는 이 과에서 절대적으로 인기가 없다.내가 "생산 중"으로 ..

VueX 저장소 테스트 나는 VueX 매장의 여러 부분을 테스트하려고 한다.나는 돌연변이, 게터 등을 하나의 파일(index.js)에 보관하지만, 그 파일을 테스트 파일로 가져올 때 어떻게 해서든 작동하지 않는다.여기 내 VueX: Vue.use(Vuex); Index.js import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export default new Vuex.Store({ state: { pickedDates:[] }, mutations: { mutatePickedDates: (state, payload) => { state.pickedDates = payload; }, }) 자, 들어가!Store.spec.js테스트해 보고 싶음: i..

내 앱 없이 VueX를 사용하는 구성 요소도 VueX를 사용할 수 있는가? 내 Vue 앱에서 이 구성 요소를 사용하고 싶다. https://commbocc.github.io/hcflgov-vue-esri-search/docs/ 그러나 그것은 오류를 던지고 있다.TypeError: "t.$store is undefined" 원인은 VueX를 사용하지 않기 때문에 구성 요소가 찾고 있는 VueX 스토어를 초기화하지 못하고 있는 것 같다. 일반적으로 내 앱이 그렇지 않으면 VueX를 사용하는 구성 요소를 사용할 수 있는가?이 일을 해결할 방법이 없을까?나는 VueX를 통합하는 데 수반되는 노력이 너무 높을 것이라고 생각한다.네, 가능합니다.대부분의 경우 사람들은 vue-plugin을 만든다.그럴 때는 이렇게 ..

Vuex가 구성 요소를 업데이트하지 않음 나는 TypeScript에서 Vue와 Vuex로 사이트를 만들고 있다. (긴 코드 예에 대해 미안) 스토어 모듈('뮤직아트리스트') const actions: ActionTree = { getAllArtists({ commit }): any { Providers.musicArtists.getAll( (musicArtists: MusicArtist[]) => { console.log("MusicArtist!", musicArtists); commit("setArtists", musicArtists); }, (error: Error) => { console.log("Error!", error); }, ); }, }; const mutations: MutationTre..

Vuex 저장소의 페이지 지정 나는 https://github.com/vueschool/learn-vuex,에서 이 멋진 쇼핑 카트 레포를 복제했고, 다음과 같은 자료를 얻는다. ProductList.vue - {{product.name}} - {{product.price}} export default new Vuex.Store({ state: { products: {}, }, actions: { fetchProducts({commit},data) { axios.get(`api/product`).then((response) => { commit('updateProducts', response.data); }) }, mutations: { updateProducts (state, products) { st..

Vuex에서 동일한 구성 요소에 대해 양방향 데이터 바인딩을 구현하는 다양한 방법 주소 구성요소가 있는데 주소 양식은 이름, 거리, 도시, 주, 국가와 같은 세부사항으로 되어 있다.나는 그것을 소스와 목적지에 사용하고 있다. 샘플 템플릿 나는 (모듈과 함께) Vuex 액션을 사용하여 (주소 데이터를 반환하거나 반환하지 않을 수 있음) API에서 데이터를 가져와 내 스토어 상태에서 돌연변이를 일으킨다. 샘플 상태: Address:{ src:{ name:'', street:'', city:'', state:'', country:'', }, dest:{ name:'', street:'', city:'', state:'', country:'', } } 나는 돌연변이를 통해 내 상태와 주소 구성요소 사이의 양방향..

vuex에서 데이터의 초기 값을 설정하는 방법 내 목표는 사용자가 계정 데이터를 수정할 수 있도록 '계정 편집' 양식을 만드는 것이다.계정 데이터를 사용자 데이터(예: 사용자 이름, 이메일, 주소...)로 이미 채워진 형식으로 표시하려고 한다. 그런 다음 사용자는 양식의 데이터를 수정하고 사용자 정보를 업데이트하는 이 양식을 제출할 수 있다. v-model을 사용하여 데이터에서 accountInfo라는 개체에 양식 입력을 바인딩하고 있으며, 다음과 같이 표시됨: data() { return { accountInfo: { firstName: '' } } } 내 템플릿에 입력된 폼의 예는 다음과 같다. 개체의 키 값은 현재 비어 있는 문자열이지만 vuex의 상태 속성인 userProfile이라는 개체에서 가..

OIDC(vuejs + nodejs)를 사용하여 프런트엔드와 백엔드를 모두 인증하는 방법? 나는 Vuejs 프런트엔드와 Nodejs 백엔드로 단일 페이지 애플리케이션을 만들고 있다.싱글 사인온과 oidc에 대한 많은 정보를 읽고 프런트엔드에 Oidc를 사용하여 인증을 구현하는 데 성공했는데, 여기서 ID 제공자로부터 토큰을 받았다. 그러나 지금은 백엔드에 이 기능을 구현하는 방법과 언제 어디서 어떻게 구현하는지도 확실하지 않다. 따라서 현재 사용자가 페이지에 액세스할 때 내 router.js 파일에서 다음과 같은 현상이 발생한다. router.beforeEach(vuexOidcCreateRouterMiddleware(store)); 그 때 가게에서 이렇게 한다. Vue.use(vuex); const st..

Asyncdata와 Fetch의 차이 가져오기 데이터와 비동기 데이터의 정확한 차이점공식 문서에는 다음과 같이 되어 있다. 비동기 데이터 데이터를 가져와 서버 측에서 렌더링하십시오.Nuxt.js는 구성 요소 데이터를 설정하기 전에 비동기 작업을 처리할 수 있는 비동기 데이터 방법을 추가한다. 비동기 데이터는 구성요소를 로드하기 전에 매번 호출된다(페이지 구성요소에 한함).서버 측에서 호출하거나 해당 경로로 이동하기 전에 호출할 수 있다.이 방법은 컨텍스트 객체를 첫 번째 인수로 수신하며, 이 인수를 사용하여 일부 데이터를 가져오고 구성 요소 데이터를 반환할 수 있다. 가져오기 가져오기 방법은 페이지를 렌더링하기 전에 저장소를 채우는 데 사용되며, 구성 요소 데이터를 설정하지 않는다는 점을 제외하면 비동기..

경로가 변경될 때마다 저장하기 위해 돌연변이를 커밋하는 방법 수신 대기할 Vuex 플러그인을 사용하지 않고 경로가 변경될 때마다 저장할 돌연변이를 커밋할 수 있는 방법이 있는가?route/돌연변이? 사용.vuexnuxtvue-router+vue-router-sync. 편집: 스토어의 다른 조각에서 커밋하려고 하는 중이지.route일부분 이와는 반대되는 질문을 많이 보지만, 이것은 아니다. 중복으로 플래그를 지정할 때 주의하십시오;). 라우터에 수신기를 등록하고 거기서 돌연변이를 실행하면 된다. router.afterEach((to, from) => { store.commit('MY_MUTATION', ...) }) 나는 nuxt에 익숙하지 않지만, 이것은 효과가 있을지도 모른다. // plugins/sy..