vue-cli

설치

c:\dev/vuework>npm install --global @vue/cli 
         또는  npm i -g @vue/cli

프로젝트 생성

c:\work>vue create todo

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

Vue CLI v5.0.8
✨  Creating project in C:\Users\admin\todo.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...  

...

🎉  Successfully created project todo.
👉  Get started with the following commands:

 $ cd todo
 $ npm run serve

프로젝트 실행

c:\dev/vuework>cd todo
c:\dev/vuework>npm run serve

> front-quiz@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...

 DONE  Compiled successfully in 3405ms 

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

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

vue-router

router란
- Vue에서 Router는 Vue 컴포넌트와 웹 경로를 연결.
수동 설치
- vue-router 설치 (node_modules 폴더에 vue-router 설치)
- Vue Router를 연동하기 위한 링크와 Vue Router 생성 (router/index.js)
- Vue Router 연동을 위한 샘플 Vue 컴포넌트 생성 (About.vue, Home.vue)
- App.vue의
- main.js에 Vue Router 사용 처리 (use(router))
vue-router 설치
- npm install vue-router@next
Vue Router 생성
- RouterecordRaw의 배열로서 URL과 component의 관계를 정의
- routes 옵션과 함께 router 인스턴스 생성

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  { path: '/',                         redirect: '/profile' },
  { path: '/profile', name: 'profile', component: Profile },
  { path: '/:catchAll(.*)+',           component: NotFound },
]
const router = createRouter({
  history: createWebHistory(),
  linkActiveClass: 'active',
  routes,
})
export default router

App.vue에 route-view, router-link 추가
- 현재 라우트와 일치할 때 자동으로 .router-link-active 클래스가 추가됨 ```html
<router-link class="nav-link" :to="menu.url"></router-link>
```

main.js에 Vue Router 사용 처리

  createApp(App).use(router).mount('#app')

자동 설치

vue add router 명령 실행
node-modules 폴더에 vue-router 항목 추가됨
package.json 파일에 dependencys에 vue-router 선언 추가됨

src 폴더에 router 폴더와 views 폴더 추가됨

 +- src : 소스 폴더
  +- router : Vue Router 폴더
  +- index.js : 웹 경로와 설정이 있는 Vue Router JavaScript 파일
  +- views : Vue 컴포넌트 폴더
  +- About.vue : About 컴포넌트 파일
  +- Home.vue : Home 컴포넌트 파일

D:\dev\vue.js\front-quiz>vue add router
 WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes

📦  Installing @vue/cli-plugin-router...


up to date, audited 947 packages in 1s

100 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
✔  Successfully installed plugin: @vue/cli-plugin-router

? Use history mode for router? (Requires proper server setup for index fallback in production) Yes

🚀  Invoking generator for @vue/cli-plugin-router...
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: @vue/cli-plugin-router

CORS를 회피하기 위한 proxy 설정[:target=”_blank”]

vue.config.js 파일에 추가

  devServer: {
    proxy: 'http://localhost:4000'
  }

  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:81',
        pathRewrite: {"/api": "/"},
        ws: true,
        changeOrigin: true
      }
    }
  }

[webpack dev-server](https://webpack.kr/configuration/dev-server/)[:target="_blank"]

port 변경

package.json -> scripts
“vue-cli-service serve –port 9000”
vue.config.js devServer: { port: 9000 }

bootstrap

install
```
> npm install --save bootstrap
```
import : main.js

vue-cli error 발생

원인

~/.vuerc may be outdated. Please delete it and re-run vue-cli in manual mode.

대처

1. C:\Users\admin\.vuerc 파일 삭제
2. 모든 vue 모듈을 삭제하고 다시설치
npm uninstall -g vue
npm uninstall -g vue-cli
npm uninstall -g @vue/cli
npm cache clean --force
npm install -g vue
npm install -g @vue/cli

yumi

vue-cli

vue-router

CORS를 회피하기 위한 proxy 설정[:target=”_blank”]

port 변경

bootstrap

vue-cli error 발생