Parcel의 Vuetify 환경
계기
Vuetify의 빠른 시작에서
(※ 나중에 생각하면 아마 「의」는 「환경에서의」라고 하는 것일까라고 생각한다)
라고 써서 Vue CLI를 넣지 않으면 환경을 만들 수 없는 것일까라고 생각했는데, Parcel에서 시도해 보면 깔끔하게 생겼기 때문에 기사로 남겨 둡니다.
Parcel
Parcel 설정은 빠른 시작npm install parcel-bundler --save-dev할 정도
Vuetify
Parcel이 마음대로 설치 등을 해주기 때문에 불필요
파일 내용
index.html<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<title>Parcel - Vue</title>
</head>
<body>
<div id="app"></div>
<script src="./index.js"></script>
</body>
</html>
index.jsimport Vue from 'vue';
import vuetify from './plugins/vuetify'
import App from './components/App.vue';
new Vue({
vuetify,
render: createElement => createElement(App)
}).$mount('#app');
components/app.vue<template>
<alert></alert>
</template>
<script lang="ts">
import Vue from "vue";
import Alert from './Alert.vue';
export default Vue.extend({
components: {
Alert,
},
});
</script>
<style lang="scss" scoped>
.container {
color: green;
}
</style>
components/Alert.vue<template>
<v-app id="inspire">
<div>
<v-alert type="success">
I'm a success alert.
</v-alert>
<v-alert type="info">
I'm an info alert.
</v-alert>
<v-alert type="warning">
I'm a warning alert.
</v-alert>
<v-alert type="error">
I'm an error alert.
</v-alert>
</div>
<v-card
class="mx-auto"
max-width="344"
outlined
>
<v-list-item three-line>
<v-list-item-content>
<div class="overline mb-4">OVERLINE</div>
<v-list-item-title class="headline mb-1">Headline 5</v-list-item-title>
<v-list-item-subtitle>Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-avatar
tile
size="80"
color="grey"
></v-list-item-avatar>
</v-list-item>
<v-card-actions>
<v-btn text>Button</v-btn>
<v-btn text>Button</v-btn>
</v-card-actions>
</v-card>
</v-app>
</template>
plugins/vuetify.jsimport Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
const opts = {};
export default new Vuetify(opts);
결과
Reference
이 문제에 관하여(Parcel의 Vuetify 환경), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/rururu3/items/a29f78f022ca316c9b16
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Parcel이 마음대로 설치 등을 해주기 때문에 불필요
파일 내용
index.html<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<title>Parcel - Vue</title>
</head>
<body>
<div id="app"></div>
<script src="./index.js"></script>
</body>
</html>
index.jsimport Vue from 'vue';
import vuetify from './plugins/vuetify'
import App from './components/App.vue';
new Vue({
vuetify,
render: createElement => createElement(App)
}).$mount('#app');
components/app.vue<template>
<alert></alert>
</template>
<script lang="ts">
import Vue from "vue";
import Alert from './Alert.vue';
export default Vue.extend({
components: {
Alert,
},
});
</script>
<style lang="scss" scoped>
.container {
color: green;
}
</style>
components/Alert.vue<template>
<v-app id="inspire">
<div>
<v-alert type="success">
I'm a success alert.
</v-alert>
<v-alert type="info">
I'm an info alert.
</v-alert>
<v-alert type="warning">
I'm a warning alert.
</v-alert>
<v-alert type="error">
I'm an error alert.
</v-alert>
</div>
<v-card
class="mx-auto"
max-width="344"
outlined
>
<v-list-item three-line>
<v-list-item-content>
<div class="overline mb-4">OVERLINE</div>
<v-list-item-title class="headline mb-1">Headline 5</v-list-item-title>
<v-list-item-subtitle>Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-avatar
tile
size="80"
color="grey"
></v-list-item-avatar>
</v-list-item>
<v-card-actions>
<v-btn text>Button</v-btn>
<v-btn text>Button</v-btn>
</v-card-actions>
</v-card>
</v-app>
</template>
plugins/vuetify.jsimport Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
const opts = {};
export default new Vuetify(opts);
결과
Reference
이 문제에 관하여(Parcel의 Vuetify 환경), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/rururu3/items/a29f78f022ca316c9b16
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<title>Parcel - Vue</title>
</head>
<body>
<div id="app"></div>
<script src="./index.js"></script>
</body>
</html>
import Vue from 'vue';
import vuetify from './plugins/vuetify'
import App from './components/App.vue';
new Vue({
vuetify,
render: createElement => createElement(App)
}).$mount('#app');
<template>
<alert></alert>
</template>
<script lang="ts">
import Vue from "vue";
import Alert from './Alert.vue';
export default Vue.extend({
components: {
Alert,
},
});
</script>
<style lang="scss" scoped>
.container {
color: green;
}
</style>
<template>
<v-app id="inspire">
<div>
<v-alert type="success">
I'm a success alert.
</v-alert>
<v-alert type="info">
I'm an info alert.
</v-alert>
<v-alert type="warning">
I'm a warning alert.
</v-alert>
<v-alert type="error">
I'm an error alert.
</v-alert>
</div>
<v-card
class="mx-auto"
max-width="344"
outlined
>
<v-list-item three-line>
<v-list-item-content>
<div class="overline mb-4">OVERLINE</div>
<v-list-item-title class="headline mb-1">Headline 5</v-list-item-title>
<v-list-item-subtitle>Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-avatar
tile
size="80"
color="grey"
></v-list-item-avatar>
</v-list-item>
<v-card-actions>
<v-btn text>Button</v-btn>
<v-btn text>Button</v-btn>
</v-card-actions>
</v-card>
</v-app>
</template>
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
const opts = {};
export default new Vuetify(opts);
Reference
이 문제에 관하여(Parcel의 Vuetify 환경), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/rururu3/items/a29f78f022ca316c9b16텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
