2019. 6. 5. 10:54ㆍFront-End/Vue
2-1. vuetify 설치 및 적용
npm install vuetify --save
소스를 확인해보시면 v-alert 를 적용했습니다.
material-icons 가 나오지 않고 또한, IE11에서도 적용된 화면이 나오지 않습니다.
소스확인
https://github.com/imse0109/noteApp/commit/6406ccf2a434fb4bb40d4c8f438a499fda55c22f
2-1. vuetify 설치 및 적용 · imse0109/noteApp@6406ccf
Permalink Browse files 2-1. vuetify 설치 및 적용 Loading branch information... Showing 4 changed files with 29 additions and 13 deletions. +5 −0 package-lock.json +2 −1 package.json +17 −12 src/App.vue +5 −0 src/main.js 5 package-lock.json Load diff Some genera
github.com
참고사이트
Vue.js Material Component Framework — Vuetify.js
Vuetify.js is a reusable semantic component framework for Vue.js. It aims to provide clean, semantic and reusable components.
vuetifyjs.com
2-2. Material Design icons 설치
npm install material-design-icons-iconfont --save
material-icons 를 적용해 보겠습니다.
크롬에서 적용된 화면이 나타납니다. 하지만 IE11은 나오지 않고 있습니다.
소스확인
https://github.com/imse0109/noteApp/commit/7a590b87c0ec0d0339f0f29c65526761f6f9a04d
2-2. Material-icons 설치 및 적용 · imse0109/noteApp@7a590b8
Permalink Browse files 2-2. Material-icons 설치 및 적용 Loading branch information... Showing 3 changed files with 7 additions and 0 deletions. +5 −0 package-lock.json +1 −0 package.json +1 −0 src/main.js 5 package-lock.json Load diff Some generated files are n
github.com
참고사이트
https://material.io/tools/icons/?style=baseline
Icons - Material Design
Material icons are delightful, beautifully crafted symbols for common actions and items. Download on desktop to use them in your digital products for Android, iOS, and web.
material.io
2-3. babel-polyfill 설치 및 적용 (IE11 지원)
npm install babel-polyfill --save
IE11을 지원하기 위해 babel-polyfill 을 적용합니다.
위의 명령어로 babel-polyfill 을 설치 후 main.js에서 import 합니다.
그리고 webpack 설정파일을 아래와 같이 변경해줍니다.
webpack.base.conf.js
entry: {
app: ['babel-polyfill', './src/main.js']
},
설정파일을 변경했기 때문에 서버를 재시작합니다.
IE11 에서 화면이 나오는 것을 확인할 수 있습니다.
소스확인
https://github.com/imse0109/noteApp/commit/34470914b31722f4bc46c22366b0b4813cc828c1
2-3. babel-polyfill 설치 및 적용 · imse0109/noteApp@3447091
Permalink Browse files 2-3. babel-polyfill 설치 및 적용 Loading branch information... Showing 4 changed files with 22 additions and 6 deletions. +1 −1 build/webpack.base.conf.js +19 −5 package-lock.json +1 −0 package.json +1 −0 src/main.js @@ -13,7 +13,7 @@ fun
github.com
참고사이트
https://babeljs.io/docs/en/babel-polyfill
Babel · The compiler for next generation JavaScript
The compiler for next generation JavaScript
babeljs.io
'Front-End > Vue' 카테고리의 다른 글
| 6.1 style scoped (0) | 2019.07.17 |
|---|---|
| 5. 프론트 화면 설계 (0) | 2019.06.17 |
| 4. Ionic App 환경설정 (0) | 2019.06.12 |
| 3. Firebase 연결 및 배포 (0) | 2019.06.10 |
| 1. vue-cli 설치 (0) | 2019.03.05 |