Vuetifyの初期画面を表示するまで

3909 ワード
Vue.js Pycharm Vuetify Pycharm テキストリンク

マテリアルデザインフレームワークvuetifyの
半日ぐらいかかったので未来の自分へメモ

Windows版PyCharmでのセットアップ

  • Node.jsインストール

Windows 10へNode.jsをインストールする - Qiita
そのままインストールする

  • PyCharmのVue.jsプラグインのインストール

  • New Project Locationのプロジェクト名を任意のものに変更してCreateボタン実行

  • Terminal

ターミナルウィンドウからnpm install --save-dev @vue/cli実行

ターミナルウィンドウから.\node_modules\.bin\vue add vuetify実行

WARN There are uncommitted changes in the current repository, it\'s recommended to commit or stash them first.
? Still proceed? (y/N)y ←yでEnter

Default (recommended)を選択してEnter

Shift+F10実行してブラウザでアクセス

Linux上でのセットアップ

$ npm init --yes
$ npm install --save-dev @vue/cli
$ ./node_modules/.bin/vue create --default .
 ? Generate project in current directory? (Y/n)Y ←YでEnter
$ ./node_modules/.bin/vue add vuetify
 WARN  There are uncommitted changes in the current repository, it\'s recommended to commit or stash them first.
 ? Still proceed? (y/N)y  ←yでEnter
 ? Default (recommended)  ←そのままEnter
$ cat vue.config.js
module.exports = {
  "transpileDependencies": [
    "vuetify"
  ],
  devServer: {
    port: 8080,
    disableHostCheck: true,
  },
}
$ npm run serve

$ npm run build

Flaskとの結合は以下参照

Vue.js + FlaskでWebアプリケーション制作 - herokuにデプロイするまで - - Qiita

画面変更は以下参照

Vuetifyに入門する - Qiita