Vue.js + SCSS + Bootstrap + MaterialDesign + TypeScript 개발 환경을 만들려고했습니다.
개요
SPA 앱을 만들게 되었기 때문에, Vue.js를 사용하려고 환경을 만들어 보았습니다.
Docker에서 개발하고 싶었던 언어는 TypeScript, SCSS에서 Bootstrap을 MaterialDesign에서.
절차
Docker 이미지 만들기
이 근처를 참고로.
> mkdir 任意のディレクトリ
> cd 任意のディレクトリ
> touch Dockerfile
> touch docker-compose.yml
Dockerfile
FROM node:10.8.0-stretch
RUN npm install --global @vue/cli
WORKDIR /projects
docker-compose.yml
version: '3'
services:
app:
build: .
ports:
- "8080:8080"
volumes:
- ".:/projects"
tty: true
> docker-compose up -d
> docker-compose exec app bash
vue.js 앱 만들기
Manually select features
를 선택하면 TypeScript나 SCSS의 이용을 지정할 수 있으므로, 편리하네요. 필요한 라이브러리나 Linter등의 선택은 자유롭게.vue 명령은 컨테이너 내에서 실행됩니다.
컨테이너 내
> vue create アプリ名
Vue CLI v3.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): SCSS/SASS
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn
(略)
[3/4] Linking dependencies...
success Saved lockfile.
Done in 408.94s.
[4/4] Building fresh packages...
success Saved lockfile.
Done in 235.09s.
mdbootstrap 소개
Material Design for Bootstrap 4라는 것이 있었으므로 이것을 도입합니다.
약어 MDB라고합니다.
Material Design for Bootstrap 4 (Vue version)
htps : // md 보오 tst 등 p. 코 m/ゔ에/
5 min Quick Start에 있는 Install MDB Vue as a dependency의 절차가 됩니다.
htps // md 보오 tst 등 p. 코 m / ゔ 에 / 5- 민 쿠이 ck-s rt /
컨테이너 내
> cd アプリ名
> yarn add mdbvue
> vi src/main.ts
설치한 MDB를 가져옵니다. 이곳은 컨테이너 밖에서 가도 k입니다.
src/main.ts
import store from './store';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'mdbvue/build/css/mdb.css';
Vue.config.productionTip = false;
vi src/view/About.vue
구성 요소를 사용할 수 있는지 확인합니다. About.vue를 사용하고 있습니다.
src/view/About.vue
<template>
<div class="about">
<h1>This is an about page</h1>
<btn color="primary">Primary</btn>
</div>
</template>
<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import Btn from 'mdbvue';
@Component({
components: {
Btn,
},
})
export default class About extends Vue {}
</script>
동작 확인
잘 작동하는지 확인해 봅시다.
컨테이너 내
> yarn serve
INFO Starting development server...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
98% after emitting CopyPlugin
DONE Compiled successfully in 41626ms
컨테이너 외부
> open http://localhost:8080/
했어.
위의 절차로 만든 환경을 리포지토리에 넣었으므로 부디 사수해 주십시오.
참고
Google App Engine에 Angular 앱을 배포해 보았습니다.
htps : // 코 m / 카이 _ 코 / ms / 155804d741102c889c6
mdbootstrap/Vue-Bootstrap-with-Material-Design
htps : // 기주 b. 코 m / md 보오 tst 등 p / ゔ 에보오 tst 등 p ぃ th 마테리아 l
Vue.js+TypeScript로 개발할 때의 참고 기사 정리
htps : // 코 m / 카이 _ 코 / ms / 19b494 아 41023d84 바 c7
Reference
이 문제에 관하여(Vue.js + SCSS + Bootstrap + MaterialDesign + TypeScript 개발 환경을 만들려고했습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kai_kou/items/a404c73c8bb23f25c510텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)