Front-End (web)19 [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. jsp -> vueJs 전환 기록 많이 사용한 변환 몇가지만 정리.JSTL -> Vuejs 문법. 이라고 보면 될 듯. 속성명에 변수 사용. Jspcs Vue.jscs둘 다 같은 의미위에꺼가 약어인데 앞으로는 약어로 표현.반복문1 Jsp ${item.itemName}Colored by Color Scriptercs Vue.js{{item.itemName}}csv-for 사용속성에서는 위와 마찬가지로 v-bind 사용.html 내부에서 변수 참조시 {{변수명}}. 반복문2 Jsp array 내부 array 외부 Colored by Color Scriptercs Vue.js array 내부 array 외부 Colored by Color Scriptercs c:forEach -> v-forc:choose -> 삭제c:when -> v-ifc:.. 2018. 11. 6. [Vue] 상수 사용 // constants.jsexport default Object.freeze ({ HELLO: '안녕하세요.', BYE: '안녕히가세요.'})cs위와 같이 상수를 모아둔 파일을 만든다. import Constants from './constants'; export class Content extends Vue { private Constants: object = Constants;}Colored by Color ScriptercsConstants를 html 템플릿에서 알아보지 못해서위와 같이 private Constants 객체를 내부에 선언을 해주었다. {{Constants.HELLO}} Colored by Color Scriptercs html 템플릿에서는 위와 같이 사용한다.placeholder와.. 2018. 11. 1. Window Vue 개발환경 https://nodejs.org 에서 node.js LTS 버전으로 설치. 버전 확인$ node -v$ npm -vcs vue-cli 설치npm install vue-cli -gcs vue 프로젝트 생성vue init webpack [프로젝트 이름]cs 프로젝트 설정은 입맛대로 하면된다. package.json에 들어가면 실행 스크립트를 볼 수 있다.npm run [dev, start, unit, test, lint, build] 중 선택해서 실행하면 각 명령어에 맞는 스크립트가 실행된다. vue 웹 사이트를 띄워보려면 npm run start cs명령어를 이용한다. localhost:8080으로 접근하면 아래와 같은 화면 확인가능. 2018. 11. 1. 이전 1 2 3 4 다음
