리눅스(linux)에서 Vue 환경 구축하는 방법

 

* Vue 환경 구축

1) curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

2) echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

3) sudo apt-get update

4) sudo apt-get install yarn

5) yarn --version

6) node -v

7) sudo npm install -g @vue/cli

 

위에 까지 다진행하면 > vue create frontend 실행한다.

1) Manually select features

2) Router, Vuex 추가

◉ Choose Vue version

◉ Babel

◯ TypeScript

◯ Progressive Web App (PWA) Suppor

◉ Router

❯◉ Vuex

◯ CSS Pre-processors

◉ Linter / Formatter

◯ Unit Testing

◯ E2E Testing

3) 2.x

4) 앤터

5) ESLint with error prevention only

6) Lint on save

7) In package.json

8) 엔터

 

*Vue 추가 구축사항

npm install --save-dev vue-cookies

npm install --save-dev vue-router

npm install --save-dev vuex

 

vue add vuetify

--yes

--defualt (편집됨)

 

npm install --save-dev axios

 

위의 방식을 따르면 설치가 완료된다.

 

 

 

 

 

 

 

 

frontend > src > App.vue를 수정

 

수정 전

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
 
#nav {
  padding: 30px;
}
 
#nav a {
  font-weight: bold;
  color: #2c3e50;
}
 
#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
 

 

수정 후

 

<template>
  <v-content>
    <router-view/>
  </v-content>
</template>

 

 

 

 

 

 

 

 

frontend > src > router > index.js

 

수정 전

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
 
Vue.use(VueRouter)
 
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]
 
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
 
export default router
 

 

 

수정 후

 

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About'
 
import BoardListPage from '../views/BoardListPage.vue'
import BoardRegisterPage from '../views/BoardRegisterPage.vue'
import BoardModifyPage from '../views/BoardModifyPage.vue'
import BoardReadPage from '../views/BoardReadPage.vue'
 
Vue.use(VueRouter)
 
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/board',
    name: 'BoardListPage',
    components: {
      default: BoardListPage
    }
  },
  {
    path: '/board/create',
    name: 'BoardRegisterPage',
    components: {
      default: BoardRegisterPage
    }
  },
  {
    path: '/board/:boardNo',
    name: 'BoardReadPage',
    components: {
      default: BoardReadPage
    },
    props: {
      default: true
    }
  },
  {
    path: '/board/:boardNo/edit',
    name: 'BoardModifyPage',
    components: {
      default: BoardModifyPage
    },
    props: {
      default: true
    }
  },
]
 
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
 
export default router
 

 

 

router > index.js 를 수정해주고 밑에 추가된 4가지를 또 추가해줘야한다.

indecx.js  의 내용

밑에처럼 추가해주면된다.

 

그리고 각 Page 마다 template 안에 div를 생성해야 오류가 안나니 주의해야한다.

 

 

 

 

 

 

 

 

베타존 : 네이버쇼핑 스마트스토어