Vuetifiy の一覧に戻る

vue-cli で Vuetify 2.0 のプロジェクトを作る

本稿では vue-cli を使って Vuetify 2.0 の空のプロジェクトをつくります。完成形はこちらで確認できます。作成済のファイルはこちらから取得できますので、ご自身のプロジェクトの土台としてご利用いただく事ができます

vue-cli で SPA の Vue プロジェクトを作る

vue-cli のアップデート

$ sudo npm install -g @vue/cli

$ vue --version
3.10.0

project の作成

$ vue create ulbl-vuetify

Manually select features を選択します

Vue CLI v3.10.0
? Please pick a preset: 
  default (babel, eslint) 
❯ Manually select features 

Router を追加します

Vue CLI v3.10.0
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
❯◉ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

デフォルトのまま

Vue CLI v3.10.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n) 

デフォルトのまま

Vue CLI v3.10.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback 
in production) Yes
? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier 

デフォルトのまま

Vue CLI v3.10.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback 
in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

package.json を選択します

Vue CLI v3.10.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback 
in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? 
  In dedicated config files 
❯ In package.json 

デフォルトのまま

Vue CLI v3.10.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback 
in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In packag
e.json
? Save this as a preset for future projects? (y/N) 

できあがり

🎉  Successfully created project ulbl-vuetify.
👉  Get started with the following commands:

 $ cd ulbl-vuetify
 $ npm run serve

作成したプロジェクトのフォルダに移動

$ cd ulbl-vuetify/

プロジェクトに Vuetify を追加

Vuetify を追加

$ vue add vuetify

デフォルトのまま

? Choose a preset: (Use arrow keys)
❯ Default (recommended) 
  Prototype (rapid development) 
  Configure (advanced) 

server の起動

$ npm run serve

デフォルトの Vuetify アプリケーションのカスタマイズ

App.vue で v-app-bar の削除



 
 
 
 
 
 
 
 
 
 
 
 
 
 







<template>
  <v-app>
    <v-app-bar app>
      <v-toolbar-title class="headline text-uppercase">
        <span>Vuetify</span>
        <span class="font-weight-light">MATERIAL DESIGN</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn
        text
        href="https://github.com/vuetifyjs/vuetify/releases/latest"
        target="_blank"
      >
        <span class="mr-2">Latest Release</span>
      </v-btn>
    </v-app-bar>

    <v-content>
      <HelloWorld/>
    </v-content>
  </v-app>
</template>
<template>
  <v-app>

    <v-content>
      <HelloWorld/>
    </v-content>
  </v-app>
</template>

v-content の内容を HelloWorld から router-view に変更





 




<template>
  <v-app>

    <v-content>
      <router-view></router-view>
    </v-content>
  </v-app>
</template>

HelloWorld 関連を全て削除

<template>
  <v-app>

    <v-content>
      <router-view></router-view>
    </v-content>
  </v-app>
</template>

<script>

export default {
  name: 'App',
  data: () => ({
    //
  }),
};
</script>

Helloworld.vue コンポーネントファイルを削除

view ファイル Home.vue で Helloworld 関連を全て削除して <HelloWorld /> を単純な <div> に置き換え

<template>
  <div class="home">
    <h1>Homepage</h1>
  </div>
</template>

<script>

export default {

};
</script>

完成ファイルの利用

git clonw

このドキュメントの手順の完成ファイルは以下のコマンドで取得することができます

git clone https://github.com/UedaTakeyuki/template4vutify.git -b v01

初期化

template4vutify フォルダに移動し、npm install で vue や vuetify 等の必要なパッケージをインストールます

cd template4vutify
npm install

テストサーバの起動

npm run serve でテストサーバを起動します http://localhost:8080/ もしくはテストサーバを起動したマシンの IP Address のポート 8080 番でテストサーバにアクセスできます

references


2019.08.25 posted.
2019.10.22 last updated.