Vue basic with webstorm

1. 전제

• nodejs 설치 완료
• npm 설치 완료

2. Npm module

• Vue-lib : sudo npm install -g @vue/cli

3. Nvm install

vue를 써야하는데 nodejs 버전 때문에 문제가 된다면 아래 nvm을 사용 하는게 좋다(?).

https://github.com/nvm-sh/nvm

아래는 mac을 기준으로 처리한 내용인데,

주의 할 것은 .bash_profile이 존재하는 곳에서 아래 행위를 해야한다.

시작하기전에 cd ~ 로 홈으로 오자.

만약에 .bash_profile이 없다면 touch .bash_profile로 만들어 주기만 해도 된다.

stevenucBookPro:~ steven$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 13226  100 13226    0     0  37442      0 --:--:-- --:--:-- --:--:-- 37361
=> nvm is already installed in /Users/steven/.nvm, trying to update using git
=> => Compressing and cleaning up git repository

=> nvm source string already in /Users/steven/.bash_profile
=> bash_completion source string already in /Users/steven/.bash_profile
=> Close and reopen your terminal to start using nvm or run the following to use it now:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
stevenucBookPro:~ steven$ nvm
-bash: nvm: command not found

nvm 사용법

stevenucBookPro:~ steven$ nvm install 6.14.4
Downloading and installing node v6.14.4...
Downloading https://nodejs.org/dist/v6.14.4/node-v6.14.4-darwin-x64.tar.gz...
######################################################################## 100.0%
Computing checksum with shasum -a 256
Checksums matched!
Now using node v6.14.4 (npm v3.10.10)
Creating default alias: default -> 6.14.4 (-> v6.14.4)
stevenucBookPro:~ steven$ node -v
v6.14.4
stevenucBookPro:~ steven$ nvm install 10.10.0
Downloading and installing node v10.10.0...
Downloading https://nodejs.org/dist/v10.10.0/node-v10.10.0-darwin-x64.tar.gz...
######################################################################## 100.0%
Computing checksum with shasum -a 256
Checksums matched!
Now using node v10.10.0 (npm v6.4.1)
stevenucBookPro:~ steven$ node -v
v10.10.0
stevenucBookPro:~ steven$ nvm use 6
Now using node v6.14.4 (npm v3.10.10)
stevenucBookPro:~ steven$ nvm which 10
/Users/steven/.nvm/versions/node/v10.10.0/bin/node

4. webstorm

Create project

• webstorm 실행
• 왼쪽 vue.js 프로젝트 선택
• 오른쪽 프로젝트 위치, nodejs 버전, vue cli 선택 : 이중에 하나라도 안나오면 node나 vue가 잘못 인스톨 되어있는 거니까 node 다 삭제하고 처음부터 다시 하는게 편할 수 있습니다.
• wepack project 선택
• preset default 선택
  • babel : ecma6script를 ecma5script로 변형 시키는 목적
  • eslint : code quality

프로젝트 init

• webstrom project open 됨

• npm install

• npm run serve

  stevenui-MacBookPro:vuetutorial steven$ nvm use 10
  Now using node v10.10.0 (npm v6.4.1)
  stevenui-MacBookPro:vuetutorial steven$ node --version
  v10.10.0
  stevenui-MacBookPro:vuetutorial steven$ npm run serve
  
  > vuetutorial@0.1.0 serve /Users/steven/WebstormProjects/vuetutorial
  > vue-cli-service serve
  
   INFO  Starting development server...
   98% after emitting CopyPlugin                                                   
  
   DONE  Compiled successfully in 3051ms                                                                                                                                                                                          9:18:16 PM
  
    App running at:
    - Local:   http://localhost:8080/ 
    - Network: http://192.168.0.114:8080/
  
    Note that the development build is not optimized.
    To create a production build, run npm run build.
  

• 브라우저에서 http://localhost:8080/ 입력 시 정상적으로 뷰 화면이 표시 되면 기본 셋팅은 완료 된것임

5. Vue 구조

vue에 대해서 잘나온 문서는 많으니까, 그냥 내부 보면서 이런저런 내용을 남기는 걸 목적으로 한다.

(이글을 쓸때는 잘나온 문서를 아직 보기 전이다. 공식 문서와 다르면 이해 부탁...)

• vue는 typescript로 작성 되어 있다.

vue

Vue 기본 구조

export interface Vue {
  readonly $el: Element;
  readonly $options: ComponentOptions<Vue>;
  readonly $parent: Vue;
  readonly $root: Vue;
  readonly $children: Vue[];
  readonly $refs: { [key: string]: Vue | Element | Vue[] | Element[] };
  readonly $slots: { [key: string]: VNode[] | undefined };
  readonly $scopedSlots: { [key: string]: NormalizedScopedSlot | undefined };
  readonly $isServer: boolean;
  readonly $data: Record<string, any>;
  readonly $props: Record<string, any>;
  readonly $ssrContext: any;
  readonly $vnode: VNode;
  readonly $attrs: Record<string, string>;
  readonly $listeners: Record<string, Function | Function[]>;

  $mount(elementOrSelector?: Element | string, hydrating?: boolean): this;
  $forceUpdate(): void;
  $destroy(): void;
  $set: typeof Vue.set;
  $delete: typeof Vue.delete;
  $watch(
    expOrFn: string,
    callback: (this: this, n: any, o: any) => void,
    options?: WatchOptions
  ): (() => void);
  $watch<T>(
    expOrFn: (this: this) => T,
    callback: (this: this, n: T, o: T) => void,
    options?: WatchOptions
  ): (() => void);
  $on(event: string | string[], callback: Function): this;
  $once(event: string | string[], callback: Function): this;
  $off(event?: string | string[], callback?: Function): this;
  $emit(event: string, ...args: any[]): this;
  $nextTick(callback: (this: this) => void): void;
  $nextTick(): Promise<void>;
  $createElement: CreateElement;
}

options

plugin

Node