vue3.js 세팅하기(vue-router)

vue.js

 

vue.js cli 설정 하는 방법을 알아보겠습니다.

 

npm install -g @vue/cli // cli3 버전
npm install vue-cli //cli2 버전

cli툴을 설치해주세요!

vue create {project명} //3.x
vue init {탬플릿} {파일 경로} //2.x

프로젝트 생성

//3.x
npm run serve
yarn serve

//2.x
npm run dev
yarn dev

로컬 실행 방법

 

cli2 vs cli3

cli2는 기본 세팅이 없음, 탬플릿 선택해야됨, webpack이 밖에 들어나 있음, node module이 자동설치 안됨

cl3는 기본 설정 있음,탬플릿 따로 없음,내장 webpack, node module자동 설치됨

(자세한건 제가 참고한 블로그를 봐주세요ㅎㅎ)

 

 

vue-router

 

설치

npm i vue-router@next --save //3.x
npm i vue-router //2.x

vue3버전으로 만들고 그냥 vue-router를 설치하셨다면 uninstall하신뒤에 3.x로 설치하세요! (vue3 기능이 작동을 안합니다!)

 

 

 

설정하기

 

간단히 Lading page와 router를 만들었습니다

 

/router/index.js

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    name: "home",
    component: () => import("../page/Lading"),
  },
];

const router = createRouter({
  history: createWebHistory(),//2.x대를 설치하시면 작동을 안합니다.
  routes,
});
export default router;

 

/page/landing.vue

<template>
    <div>
        <p>home page</p>
    </div>
</template>
<script>
export default {
    
}
</script>
<style>
    
</style>

(간단하게 설정했습니다)

 

/main.js

import { createApp } from "vue";
import App from "./App.vue";
import Router from "./router";

const app = createApp(App);

app.use(Router);

app.mount("#app");

 

이렇게 설정하시고 실행하면 이렇게 나옵니다.

 

 

vue-공식사이트

시작하기 — Vue.js (vuejs.org)

시작하기 — Vue.js

 

 

참고 블로그 및 사이트

CLI | Cracking Vue.js (joshua1988.github.io)

CLI | Cracking Vue.js

Vue Cli 초기 세팅 (velog.io)

Vue Cli 초기 세팅

vue3 미리 살펴보기 (velog.io)

vue3 미리 살펴보기

javascript - Vue router with Vue 3 raises the error "Uncaught TypeError: Object(...) is not a function" - Stack Overflow

Vue router with Vue 3 raises the error "Uncaught TypeError: Object(...) is not a function"