일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- ReactNative
- xcode
- build
- qunit
- jest
- 센토스
- androidstudio
- linux
- Android
- unittest
- node
- MachineLearning
- 리눅스
- 개발
- PYTHON
- IOS
- localserver
- 맥
- 네트워크
- webpack
- centos
- MAC
- react
- avds
- Chrome
- vsCode
- picker
- VirtualBox
- TensorFlow
- Today
- Total
목록Frontend/Vue (45)
로메오의 블로그
VUE.JS 목록 Vuetify 설치 ## vue 프로젝트 설치 $ vue create test-project ## 생성된 폴더로 진입 $ cd test-project ## vuetify 추가 $ vue add vuetify ## default로 설치 ? Choose a preset: (Use arrow keys) Configure (advanced) > Default (recommended) Vite Preview (Vuetify 3 + Vite) Prototype (rapid development) Vuetify 3 Preview (Vuetify 3) ## VSCode로 프로젝트 열기 $ code . ## 서버 구동 $ npm run serve Draggable 설치 $ npm install --sa..
VUE.JS 목록 jest 글로벌 설치 $ npm install -g jest jest 주입 $ npm i -D @types/jest $ npm i -D @vue/cli-plugin-unit-jest $ npm i -D @vue/test-utils@1 $ npm i -D @vue/vue2-jest $ npm i -D babel-jest $ npm i -D jest $ npm i -D ts-jest package.json { ... "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "test": "vue-cli-service test:unit" }, .....
VUE.JS 목록 RestApi 클래스 $ npm install axios .env VUE_APP_API_PUBLIC_URL='http://localhost:8888/v1/' VUE_APP_API_BASE_URL='http://localhost:8888/v1/' utils/restApi.ts import axios, { AxiosInstance, AxiosResponse } from 'axios' export enum ServiceUrl { BASE = process.env.VUE_APP_API_BASE_URL } export default abstract class HttpClient { public apiUrl?: string; protected readonly instance: AxiosInstan..
VUE.JS 목록 .env .env.local .env.development .env.production 파일을 만듭니다. .env VUE_APP_ALL=_ALL .env.local VUE_APP_LOCAL=_LOCAL .env.development VUE_APP_DEV=_DEVELOPMENT .env.production VUE_APP_PRODUCTION=_PRODUCTION package.json ... "scripts": { "serve": "vue-cli-service serve", "stg": "vue-cli-service serve --mode production", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, ... ..
VUE.JS 목록 $ mkdir src/store $ touch src/store/store.ts import Vue from 'vue'; import Vuex, {StoreOptions} from 'vuex'; import moduleA from './moduleA.store'; import moduleB from './moduleB.store'; Vue.use(Vuex); export interface RootState { data: string; } const store: StoreOptions = { modules: { moduleA, moduleB, }, state: { data: 'root', }, mutations: { setData(state, data: string) { state.dat..
VUE.JS 목록 Vuex Store의 기본 형식 입니다. $ touch src/store.ts store.ts 파일을 생성하고 아래와 같이 코딩 합니다. import Vue from 'vue'; import Vuex, {ActionContext, StoreOptions} from 'vuex'; Vue.use(Vuex); interface State { count: number; } const store: StoreOptions = { state: { count: 0, }, mutations: { setCount(state: State, count: number) { state.count = count; }, }, actions: { increase({state, commit}: ActionContext..
VUE.JS 목록 $ touch src/components/MyMixins.vue MyMixins.vue를 생성하고 아래와 같이 코딩합니다. $ touch src/components/Screen1.vue Screen1.vue을 생성하고 아래와 같이 코딩합니다. 버튼 안녕 src/component/Home.vue console창에 myShow 함수와 show 변수를 확인 할 수 있습니다. 버튼도 잘 작동합니다. $ touch src/components/Screen2.vue Screen2.vue도 생성하고 아래와 같이 코딩합니다. 버튼2 안녕2 /src/component/Home.vue를 아래와 같이 수정합니다. VUE.JS 목록