Vue CLI
Vue CLI

Vue CLI

Creator
Creator
Seonglae ChoSeonglae Cho
Created
Created
2021 Feb 25 13:50
Editor
Edited
Edited
2023 May 5 16:24
Refs
Refs

Get Started


 
2. download yarn
 
 
3. download Vue CLI
 
 

Make Project


1. Create Project
notion image
  • Vue cli default project contains babel and eslint
  • just select default
 
 
 
 
2. change directory to project and add packages (optional)
 
  • Difference between vue cli and npm / yarn about adding packages
vue cli add packages like npm, yarn - but they also do import and make config file for us
 
 
 

Build and Serve


Serve

  • command
 
notion image
  • serve at 8080 port for test static page or serve
notion image
 
 
 

build

  • build static files (html, css, js) for distribution for front page
notion image
 
 
 
 

Project Structure


notion image
  • babel.config.js
    • config babel config - do not have to
  • package.json
    • vue cli eslint config is in here and project settings
 

dist folder

  • object file for distribution made by babel, vue

public folder

  • for meta tag, image edit

src folder

  • assets folder
    • files which vue components uses
  • components
    • diverse vue template components
  • App.vue
    • root vue component which will inserted to #app in index.html
  • main.js
    • subject file who mount vue to index.html
 
 
 
 
 
 

How To Use Vue


 

Scripts (optional)


🎫
vue cli babel
 

Packages (optional)


notion image
 
 
 

Recommendations