전제
- nodejs 설치 완료
- npm 설치 완료
Npm module
- Vue-lib :
sudo npm install -g @vue/cli
Nvm install
vue를 써야하는데 nodejs 버전 때문에 문제가 된다면 아래 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 |