Vue basic with webstorm

전제

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

Npm module

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

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

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/ 입력 시 정상적으로 뷰 화면이 표시 되면 기본 셋팅은 완료 된것임

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
728x90
반응형

'Web' 카테고리의 다른 글

Web Components Callback Methods & lifecycle  (0) 2021.08.14
Web component (Custom Elements, Shadow DOM, Template)  (0) 2021.08.14
Gradle's dependency cache may be corrupt  (1) 2021.05.21
webpack basic with webstorm  (0) 2020.03.27
javascript object merge  (0) 2020.03.27