공식적으로 Vue를 설치하는 방법에는 크게 세 가지가 있다.
1. 직접 script에 추가하는 CDN
2. NPM을 이용한 설치
3. 단일 페이지 애플리케이션을 빠르게 구축할 수 있는 CLI
각각의 방법으로 직접 설치하여 비교해 보았다.
참고) package version
node v16.17.0
npm v8.15.0
vue/cli v5.0.8
CDN
CDN의 경우에는 직접 HTML에 script 한 줄을 추가하여 간편하게 Vue를 사용할 수 있다.
<!-- develop -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- production -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>학습 목적으로 사용할 때는 위의 첫 번째 코드로 최신 버전을 사용할 수 있고, 프로덕션 환경인 경우에는 두 번째 코드처럼 특정 버전의 빌드 파일을 받을 수 있다.
적용하면 다음과 같이 script 내에서 Vue를 사용할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'hi'
}
});
</script>
</body>
</html>
NPM
공식 문서에 따르면, Vue를 사용하여 대규모 애플리케이션을 구축할 때는 이 NPM을 이용한 설치를 권장하고 있다. NPM으로 설치하면 build tool로 Vite를 사용하고 있어 Vite로 vue를 시작하는 것과 어떤 점이 다를지 비교해 보았다.
# npm으로 시작
npm init vue@2
# or npm create vue@2
# vite로 시작
npm create vite@latest [project-name] -- --template vue두 방법 모두 가장 기본적인 설정만 해주었다.
먼저 npm으로 설치한 Vue의 package.json을 보았다.
{
"name": "install-npm",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 4173"
},
"dependencies": {
"vue": "^2.7.7"
},
"devDependencies": {
"@vitejs/plugin-legacy": "^2.0.0",
"@vitejs/plugin-vue2": "^1.1.2",
"terser": "^5.14.2",
"vite": "^3.0.2"
}
}설치 시, vue@2로 version을 명시해 주었기 때문에 2.x.x 대의 버전으로 설치된 것을 확인할 수 있었다.
Vite의 경우에는 자동으로 Vue3으로 설치된다.
{
"name": "install-vite",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.47"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.1.0",
"vite": "^4.3.2"
}
}npm으로 설치해도 기본적으로 Vite를 사용하기 때문에 Vue 버전 이외에 크게 다른 점은 못 찾았다.
두 방법 모두 기본적으로는 Composition API로 작성되어 있다.
Vite로 설치하는 방법 또한 중간 -- 옵션을 없애면 npm으로 설치할 때처럼 다양한 옵션을 적용할 수 있다.
npm create vite@latest [project-name] --template vue
CLI
Vue.js는 단일 페이지 애플리케이션을 빠르게 구축할 수 있는 공식 CLI를 제공한다.
CLI는 Node.js 및 관련 빌드 도구에 대한 사전 지식을 전제로 하고 있습니다. Vue 또는 프런트엔드 빌드 도구를 처음 사용하는 경우 CLI를 사용하기 전에 빌드 도구 없이 가이드를 읽어 보시기 바랍니다.
CLI는 CLI를 먼저 설치한 후, 사용할 수 있다.
npm install -g @vue/cli
# vue/cli 설치 후
vue create [project-name]🔨🔨🔨
다만, CLI github를 보면 현재 Vue CLI는 maintenance mode로,
create-vue 또는 Vite를 사용하기를 권장하고 있다.
설치 후, package.json을 보면 Create React App처럼 webpack을 기본으로 하기 때문인지 뭔가 많은 것이 설정되어 있다.
{
"name": "install-cli",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}CLI로 설치한 경우에는 Options API로 쓰여있다.
사실 api는 어떻게 사용하냐의 차이이기 때문에 api 차이보다는
Vue를 입문하여 학습용으로 사용할 때는 CDN
대규모 애플리케이션을 구축할 때 NPM
webpack 등 직접 빌드 도구를 선택할 경우는 CLI
처럼 프로젝트의 규모나 빌드 도구 종류, 공식 페이지에서 추천하는 방법 등 고려하여 사용하는 것이 좋을 것 같다.
'npm init vue@latest' VS 'vue create <projectName>' to generate a new project
I have noticed theese two methods for generating a new vue project: npm init vue@latest and vue create <projectName> Both seem to do the job, but very differently, they boundle very different
stackoverflow.com
https://vuejs.org/guide/quick-start.html#creating-a-vue-application
Quick Start | Vue.js
vuejs.org
https://vuejs.org/guide/introduction.html#api-styles
Introduction | Vue.js
vuejs.org
https://github.com/vuejs/vue-cli
GitHub - vuejs/vue-cli: 🛠️ webpack-based tooling for Vue.js Development
🛠️ webpack-based tooling for Vue.js Development. Contribute to vuejs/vue-cli development by creating an account on GitHub.
github.com
https://cli.vuejs.org/guide/cli-service.html
CLI Service | Vue CLI
CLI Service Using the Binary Inside a Vue CLI project, @vue/cli-service installs a binary named vue-cli-service. You can access the binary directly as vue-cli-service in npm scripts, or as ./node_modules/.bin/vue-cli-service from the terminal. This is what
cli.vuejs.org
'Study' 카테고리의 다른 글
| [Vue.js] Vue의 Instance와 속성 (0) | 2023.05.24 |
|---|---|
| [Vue.js] Vue에서의 Virtual DOM (0) | 2023.05.24 |
| [algorithm] Max Heap 구현하기 (0) | 2023.05.15 |
| [article] Deview2023 - 하나의 코드로 React, Vue, Svelte 등 모든 프레임워크를 지원할 수 있는 CFCs Reactive (0) | 2023.04.06 |
| [JavaScript] 이벤트 루프(Event Loop) (0) | 2023.03.20 |
