Vue15 [Vue.js/Typescript] 4. Vue-router 말머리에 typescript를 적긴 했지만 이번에는 거의 vue와 관련 있는 내용이다. Vue-router 사용하기 npm install --save vue-routercs먼저 위 명령어로 vue-router 의존성을 추가함과 동시에 다운한다. /* src/components/Index/Index.html */ Colored by Color Scriptercs인덱스 컴포넌트 템플릿을 위와 같이 바꾼다.router-view는 경로에 따라 컴포넌트가 변경되는 곳이다. /* src/routes/index.ts */ import Vue from 'vue'import VueRouter from 'vue-router' // modulesimport Test1 from '../components/Test1';impo.. 2019. 3. 11. [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/Webpack] vue-html-webpack-plugin으로 임시 html 만들기 참고 : [Vue.js/Typescript/Webpack] 2. webpack-dev-server 설정 Colored by Color Scriptercs 웹팩 빌드 결과물을 확인하기 위해 index.html 이란 파일을 만들어서 빌드된 결과물을 코드로 직접 작성했다.이런 html 파일을 만들지 않고 결과물을 확인할 수 있게 해주는 플러그인이 htmlWebpackPlugin 이다. 위와 같이 직접 작성한 index.html 파일을 플러그인이 만들어준다. index.html 파일은 삭제해준다. npm install --save-dev vue-html-webpack-plugin의존성 추가. // webpack.config.js const HtmlWebpackPlugin = require('vue-html-we.. 2018. 12. 17. [Vue.js / Vuex] 전역상수 어디서나 참조할 수 있는 전역상수를 만들어보자. // src/constants.ts export default Object.freeze({ COUNTRY: "KOREA", NAME: "WITHHAM" }) cs 새로운 파일을 만들어서 위와 같이 작성한다. 위 파일에 상수들을 모아둔다. // src/index.ts import constants from "./constants"; let v = new Vue({ // 생략 template: ` {{CONSTANTS.COUNTRY}} // 추가 `, // 추가 data:{ CONSTANTS: constants } }); Colored by Color Scripter cs 루트 컴포넌트에서 data로 작성한 constants를 CONSTANTS 변수에 넣어준다.. 2018. 12. 3. [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 다음
