본문 바로가기
반응형

2022/057

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.
Vue 프로젝트 - Movie페이지 단일영화 상세정보 및 skeleton UI작성 1. routes 수정 /movie/#123456과 같이 ID를 입력받을 수 있도록 수정 import { createRouter, createWebHashHistory} from 'vue-router' import Home from './MyHome.vue' import Movie from './MyMovie.vue' import About from './MyAbout.vue' export default createRouter({ // Hash, History --> Hash mode 사용 예정 history: createWebHashHistory(), // pages routes:[ { path:'/', component: Home }, { path:'/movie/:id', component: Movi.. 2022. 5. 22.
VSCode Vue snippets설정 아래와 같이 자동 완성되도록 스니펫 설정하기 vue.json { "Generate Basic Vue Code": { "prefix": "vue-start", "body": [ "\n\t\n\n\n\n" ], "description": "Generate Basic Vue Code" } } 2022. 5. 22.
Vue 영화검색사이트 기본 설치 파일 1.라이브러리 설치 npm i vue-router vuex bootstrap@5 npm i -D node-sass sass-loader 2. bootstrap 커스터마이징 - scss/main.scss 작성 - 오류 방지를 위해 maps는 주석 처리 // Required @import "../../node_modules/bootstrap/scss/functions"; // Default variable overrides $primary:#FDC000; //variables가 실행되기 전에 재정의되어야 함 // Required @import "../../node_modules/bootstrap/scss/variables"; @import "../../node_modules/bootstrap/scss/mix.. 2022. 5. 14.
Vue Tailwind CSS 적용하기 1. 설치 npm install -D tailwindcss@latest postcss@latest autoprefixer@latest 2. 활성화 npx tailwindcss init -p 3. ./tailwind.config.js환경설정 module.exports = { // content: [ // "./index.html", // "./src/**/*.{vue,js,ts,jsx,tsx}", // ], purge:[ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}" ], theme: { extend: {}, }, plugins: [], } 4. src/index.css 파일 생성 @import "tailwindcss/base"; @import "tailwindcs.. 2022. 5. 13.
Vue apache 배포 오류 Vue로 작성한 프로그램을 Build를 하고... npm run build /dist/ 폴더의 파일들을 아파치 폴더에 옮겼는데, 빈 화면이 나옵니다. index.html 파일은 보이는데 개발자 화면 확인해보니...js파일과 css파일의 경로를 인식을 못했습니다. "/js/chunk-vendors....."처럼 되어있는데, 혹시나 해서 "."을 붙여보니 작동이 됩니다. 동일한 오류 겪고계신 분께서는 한번 시도해보시길 바랍니다. 2022. 5. 12.
반응형

티스토리툴바