ParcelでVuetify環境

9946 ワード
parcel Vue.js Vuetify Vue.js テキストリンク

きっかけ

Vuetifyのクイックスタートで

  • Vue CLI のインストール
  • Vue UI のインストール
  • Nuxt のインストール
  • Webpack のインストール

（※後々考えたら多分「の」は「環境での」っていうことなんだろうなぁって思う)

って書いてて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.js
import 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.js
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

const opts = {};

export default new Vuetify(opts);

結果