Passé de mode

Vuetifiy の一覧に戻る

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

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

# 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

Last Updated: 2021/2/28 9:04:39

← Vuetify 2.0 の CSS 関連 →