【VueJS+yarn】Vue CLI를 사용하여 vue 프로젝트 생성하기

환경

vue-cli 설치

$ yarn global add @vue/cli
yarn global v1.15.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
warning Your current version of Yarn is out of date. The latest version is "1.16.0", while you're on "1.15.2".
info To upgrade, run the following command:
$ brew upgrade yarn
success Installed "@vue/[email protected]" with binaries:
      - vue
✨  Done in 21.92s.

vue 프로젝트 만들기

vue create sample-vue-project

Vue CLI v3.8.2
? Please pick a preset: 
  default (babel, eslint) 
❯ Manually select features 

? Check the features needed for your project: 
 ◉ Babel
 ◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◉ Unit Testing
❯◉ E2E Testing

? Use class-style component syntax? (Y/n) y

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? (Y/n) y

? Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n) y

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): 
  Sass/SCSS (with dart-sass) 
❯ Sass/SCSS (with node-sass) 
  Less 
  Stylus 

? Pick a linter / formatter config: (Use arrow keys)
❯ TSLint 
  ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier 

Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

? Pick a unit testing solution: 
❯ Mocha + Chai 
  Jest 

? Pick a E2E testing solution: 
❯ Cypress (Chrome only) 
  Nightwatch (Selenium-based) 

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? 
  In dedicated config files 
❯ In package.json 

? Save this as a preset for future projects? Yes
? Save preset as: sample_project

? Pick the package manager to use when installing dependencies: (Use arrow keys)

❯ Use Yarn 
  Use NPM 

Vue CLI v3.8.2
✨  Creating project in /Users/******/vscode/sample-vue-project.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

yarn install v1.15.2
info No lockfile found.
[1/4] 🔍  Resolving packages...



success Saved lockfile.
✨  Done in 59.59s.
🚀  Invoking generators...
📦  Installing additional dependencies...
[-/5] ⠁ waiting...
yarn install v1.15.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 19.53s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project sample-vue-project.
👉  Get started with the following commands:

 $ cd sample-vue-project
 $ yarn serve

테스트 실행

$ yarn serve
yarn run v1.15.2
$ vue-cli-service serve
 INFO  Starting development server...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
 98% after emitting CopyPlugin                                                    

 DONE  Compiled successfully in 2404ms                                                                                                                                                                                                                           15:04:13

Type checking and linting in progress...

  App running at:
  - Local:   http://localhost:8081/ 
  - Network: http://192.168.1.22:8081/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

No type errors found
No lint errors found
Version: typescript 3.5.1, tslint 5.17.0
Time: 2896ms

최종 Package.json

{
  "name": "sample-vue-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:e2e": "vue-cli-service test:e2e",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.1.0",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@types/chai": "^4.1.0",
    "@types/mocha": "^5.2.4",
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-plugin-e2e-cypress": "^3.8.0",
    "@vue/cli-plugin-typescript": "^3.8.0",
    "@vue/cli-plugin-unit-mocha": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "chai": "^4.1.2",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "typescript": "^3.4.3",
    "vue-template-compiler": "^2.6.10"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}