Programming/Vue24 Vue todolist 만들기 - 3. Vue 프로젝트 상세구성 1. router/index.js 수정 불필요한 라우팅을 삭제합니다. import { createRouter, createWebHistory } from 'vue-router'; import Home from '../views/HomeView.vue'; const routes = [ { path:'/', name: 'Home', component: Home } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router; 2. 불필요한 view도 삭제합니다. views/AboutView.vue --삭제 3. App.vue 수정 4. views/HomeView.vue.. 2023. 5. 4. Vue todolist 만들기 - 2. Vue 프로젝트 만들기 1. Vue 프로젝트 생성vue_front 폴더로 이동하여 vue_프로젝트를 생성합니다.cd vue_frontnpm i -g @vue/cli // vuejs 프로젝트가 처음일 경우 글로벌로 vue cli를 설치해줍니다.vue create . // 현재의 폴더에 vue 프로젝트를 생성합니다. 2. Vue-router 설치vue-router를 설치하면 프로젝트 구조가 조금 달라집니다. 따라서 vue-router를 먼저 설치하고 진행합니다.vue add router 3. vuex / axios 설치 및 port 설정npm i vuex axiosnpm i nodemon --save-dev package.json의 scripts 부분을 수정하여 4000번 포트에서 서비스하도록 수정합니다. "scripts": { .. 2023. 5. 4. Vue todolist 만들기 - 1. 환경세팅 Vue.js를 이용해 백엔드/로그인 연동까지 가능한 Todolist를 만들도록 하겠습니다. 폴더구조는 아래와 같이 하나의 프로젝트 폴더에 backend와 frontend를 모아놓고 시작하겠습니다. TODO_APP - express_back - vue_front 2023. 5. 4. Electron-vue 보일러플레이트 만들기 1. Vue 프로젝트 시작 vue create . //폴더를 먼저 만들고 해당 폴더를 프로젝트 폴더로 하여 생성 2. Electron-Builder 설치 이거 설치하고 테스트를 해본다. vue add electron-builder 3. 배포 테스트 npm run electron:build 4. Router 설치 vue add router - App.vue파일이 자동으로 업데이트 됨 Home About - ./views/HomeView.vue와 /views/AboutView.vue 파일이 자동 생성됨- - ./router/index.js 파일이 자동 생성됨 5. Bootstrap-vue 설치 npm install bootstrap-vue bootstrap Bootstrap-vue 설정 (main.js) i.. 2022. 6. 22. Vue3 + bootstrap5 적용하기 1. 설치 npm i --save bootstrap npm i --save @popperjs/core // 부트스트랩 실행에 필요 2. main.js에 두줄만 Import하면 됨 import { createApp } from 'vue' import App from './App.vue' import router from './router/index.js' // 아래 두줄만 넣으면 된다. import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap' createApp(App) .use(router) .mount('#app') *** bootstrap-vue 적용하기 npm install vue bootstrap-vue bootstrap 이제 main.js.. 2022. 5. 28. Vuex 사용 state : data getters : computed mutations : methods actions : methods(비동기) Vuex action에서의 활용 context.state context.getters context.commit (mutation의 함수 사용시) context.dispatch (action의 함수 사용시) Vue 컴포넌트에서 Vuex Helper 사용 ...mapState('모듈',[ '상태1','상태2' ]) ===> computed에서 사용 ...mapGetters('모듈',[ '상태1','상태2' ]) ===> computed에서 사용 ...mapMutations('모듈',[ '상태1','상태2' ]) ===> methods에서 사용 ...mapActions('모듈.. 2022. 5. 24. 이전 1 2 3 4 다음
