Vue Vuetify編 -初学- ~デザインは価値!~

Vuetifyとは

Vue.js用、マテリアルデザインフレームワーク

まずマテリアルデザインとは
シンプルなデザインでディスプレイサイズに合わせて最適化しやすくしよう
というGoogleが発表したデザインガイドライン。(2014年)

Vuetify使い方

<template>
  <v-app>
    <v-content>
      <v-container fluid>
        <v-layout wrap>
          <v-flex xs12 sm5></v-flex>
          <v-flex xs12 sm5></v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</template>


v-app
Veutifyを使うために必須!
Vuetifyのコンポーネントは必ずv-app要素の内側に書く!

v-content
レイアウトシステム!
とりあえずかく!

v-container
コンテナです。
オプション属性で幅や位置を変更する。

v-layout
レイアウトにはこれ!
wrap属性をつける!

v-flex
v-layoutの内側に使うことでグリッドシステムが使える!
12分割だからbootstrapとかと同じ。
v-layoutにwrap属性がないと使えないから注意!


勉強してもっと詳しく書きます!
以上!

Vue フォルダ構成編 -AtomicDesign- ~後々楽になる~

AtomicDesign

今回はAtomicDesignの考えのもと、フォルダ構成していきたいと思います。

AtomicDesignとは
一言で言うと5段階に区切って定義するUIデザイン手法。
5段階とは、Atoms(原子),Molecules(分子),Organisms(有機体),Templates(テンプレート),Pages(ページ)です。
化学用語が分からなくても実は簡単。

5段階詳しく
Atoms(原子)
ボタンやテキスト入力などの分けられない単位。

Molecules(分子)
ボタンやテキスト入力を組み合わせたフォーム(検索フォーム)。

Organisms(有機体)
フォームだったりボタンなど組み合わせたヘッダー。

Templates(テンプレート)
ヘッダーとかフッターを組み合わせたページの枠組みです。

Pages(ページ)
テンプレートの枠組みに内容を入れた状態がページ。


VueでAtomicDesign

AtomicDesignの考えをもとにVueでフォルダ構成しました。
それがこちら

.
├── node_modeuls/
├── src/
│     ├── assets/
│     ├── components/
│         ├── atoms/
│         │    └──buttons/
│         ├── molecules/
│         └── organisms/
│              └── footer.vue
│ 
├── pages/
├── main.js
├── router/
│   └── index.js
├── store/
└── App.vue

AtomicDesignをカスタマイズして構成しました。
カスタマイズ点
1.Templateは必要がないので削除
2.organismsとpagesのみstoreとやりとりするのはOK。
3.pagesはrouterとやりとりするのでcomponents外
4.atomsの中にもボタンや入力欄を分けるためにフォルダを作成

人それぞれの好みとプロジェクト規模により異なる点もあるかと思うので参考にしてもらえればと思います。

以上!

Vue TypeScript 新環境構築編 ~現時点の最新~

前提

Node.jsのインストールでnpmコマンドが使えること。
vue/cliより@vue/cliの方が新しいみたいなのでこちらも載せます。

インストール

@vue/cliをインストール

npm install --global @vue/cli

プロジェクト作成

vue create [project naeme]

その後にいくつかの質問に答えて設定します。
今回はbabel,Typescript,Vuex,Router,es-lintをチェック。

cd [project naeme]
npm run serve

終了

django configフォルダ構成編 ~最高のフォルダ~

config


プロジェクト作成前
プロジェクト作成まであれば以下でできます。

django-admin startproject config .



プロジェクト作成後

djangodjango-admin start projectをする際に
プロジェクトフォルダの直下に配置されてしまうため
それをconfigファイルでまとめます。

manage.py

os.environ.setdefault("DJANGO_SETTINGS_MODULE", "[project name].config.settings")


wsgi.py

os.environ.setdefault("DJANGO_SETTINGS_MODULE", "[project name].config.settings")


setting.py

ROOT_URLCONF = '[project name].config.urls'
WSGI_APPLICATION = '[project name].config.wsgi.application'

django postgresql編 ~sqliteからの変更~

前提

sqliteは色々と問題があるので postgresqlに変更したいと思います。

前提としてはpostgresqlをインストールしていること。
psqlコマンドを使えるようにしてください。

方法

pip install psycopg2-binary


databaseの設定を変更します。
setting.pyの変更

DATABASES = {
     'default': {
     'ENGINE': 'django.db.backends.postgresql',
     'NAME': 'name', #データベース名
     'USER': 'postgres', #postgresqlのユーザー名 何も指定していなければ多分postgres
     'PASSWORD': 'taitojapan', #postgresqlのパスワード
     'HOST': 'localhost',
     'PORT': 5432, #port番号 デフォルトなら5432のはず
   }
 }



おまけ psqlコマンド

postgresqlにログイン

psql -U ユーザー名[postgres]

DB一覧

¥l

postgresqlログアウト

¥q

django 環境構築編 ~流行りのPython!~

前提

Pythonをインストールされていてコマンドが使える。



仮想環境

仮想環境とはパッケージの導入状態をプロジェクトごとに独立させます。
venvによる仮想環境。

1.まずフォルダを作成してください。
2.その後ターミナル or コマンドプロンプトを使用します。
3.作成したフォルダに入る。

仮想環境作成

python3 -m venv [newenvname]


仮想環境に入る。 linuxMac

source [newenvname]/bin/activate

or

. [newenvname]/bin/activate


Windows

.\[newenvname]\Scripts\activate


パッケージのインストール

([newenvname])$ pip install [package name]


仮想環境を抜ける

([newenvname])$ deactivate


django構築

仮想環境内でdjangoインストール

pip install django


djangoプロジェクト作成
基になります。

django-admin startproject [project name]


プロジェクト内に入ってください。

cd [project name]


djangoのサーバー起動
以下で作成できたか確認してください。

python manage.py runserver


djangoではアプリケーションという概念があり、
アプリケーションごとに機能を分けたりします。
アプリケーションの作成。

python manage.py startapp [app name]



おまけ

ポート番号の変更 8080を任意の番号に変更してください。

python manage.py runserver 8080

Vue TypeScript 環境構築編 ~準備が大事!~

前提

プロジェクトが作成してあることが前提。
プロジェクト作成時にes-lintをNoにしてください。

vue init webpack プロジェクト名



実行

必要なものをインストール

npm i -D typescript webpack webpack-cli ts-loader@3.5.0  css-loader vue vue-loader vue-template-compiler



typescriptの設定

tsc --init



tsconfig.jsonの中身

{
    "compilerOptions": {
        "outDir": "./built/",
        "sourceMap": true,
        "strict": true,
        "noImplicitReturns": true,
        "module": "es2015",
        "moduleResolution": "node",
        "target": "es5"
    },
    "include": [
        "./src/**/*"
    ]
}



webpack.base.conf.jsのentry,appをmain.tsに変更

module.exports = {
  context: path.resolve(__dirname, "../"),
  entry: {
    app: "./src/main.ts"
  },



webpack.base.conf.jsのresolveの拡張子に".ts"を追加

extensions: ['.js', '.ts', '.vue', '.json'],  



webpack.base.conf.jsのmodule.rulesにts-loaderを追加。

{
        test: /\.js$/,
        loader: "babel-loader",
        include: [
          resolve("src"),
          resolve("test"),
          resolve("node_modules/webpack-dev-server/client")
        ]
      },
{
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }
      },



vue-shims.d.tsをsrc配下に追加

declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}



main.js, router/index.js の拡張子を .ts に変更

.vueの中身App.vueに変更

import App from './App.vue'  



App.vueとHelloWorldのscriptを変更

<script lang="ts"> 



注意

vue webpack の質問時にes-lintの設定をYesにした場合 eslintのエラーが発生する可能性ありです。 私は以下で飛ばしました。 今後もっと調べます。

// eslint-disable-next-line
/* eslint-disable */

新環境構築

記載時の最新です。お好みでどうぞ。

Vue TypeScript 新環境構築編 ~現時点の最新~ - 19歳から学んだ記録