TypeScript15 [Vue.js/Typescript] 3. Vuex - State, Getter 데이터가 특정 컴포넌트에 종속되지 않고 다른 컴포넌트에서도 사용되는 데이터라면 vuex를 사용하여 공통 저장소에 저장하는게 좋다.(부모, 자식 컴포넌트간 데이터 교환이라면 props, events로 해도 되긴한다.) Vuex 사용하기 npm i --save vuexcsvuex를 사용하려면 먼저 의존성에 vuex를 추가한다. // src/store/index.ts import Vue from "vue";import Vuex from "vuex"; Vue.use(Vuex); export const store = new Vuex.Store({ state:{ // data }});Colored by Color Scriptercs그 후 src/store 폴더를 만들고 index.ts 파일을 만듭니다.그리고 위와 .. 2019. 1. 26. [Vue.js/Typescript/Webpack] 2. webpack-dev-server 설정 npm install webpack-dev-server --save-devcswebpack-dev-server를 devDependencies에 추가한다. // webpack.config.jsdevServer: { historyApiFallback: true, // noInfo: true port: 8081},csnoInfo는 스크립트 실행결과를 확인하기 위해 주석처리 해주었다.port는 8080에는 젠킨스가 떠있어서 8081로 했다. // index.html Colored by Color Scriptercs 기존에 dist/index.html 파일을 루트 폴더 위치로 옮기고 script build.js도 변경한다.이렇게 하면 dev server가 켜지면서 위 파일을 참고하게 될 것이다. // packag.. 2018. 11. 26. [Vue.js/Typescript/Webpack] 1. 프로젝트 생성 참고 : Microsoft/TypeScript-Vue-Starter 프로젝트 폴더 생성$ mkdir [projectName] // 프로젝트 폴더 생성$ cd [projectName] // 프로젝트 폴더로 이동cs 프로젝트 구조 잡기[projectName]├─ assets/├─ dist/└─ src/ └─ components/csassests : css, js, img, font 등의 자료를 넣을 폴더dist : src가 webpack에 의해 번들된 결과물이 저장될 폴더src : 소스코드(.ts) 저장소src-components : Vue 컴포넌트 위치. 프로젝트 폴더의 npm 패키지화$ npm init // 폴더의 npm package This utility will walk you through cre.. 2018. 11. 21. 이전 1 2 3 다음
