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の中にもボタンや入力欄を分けるためにフォルダを作成
人それぞれの好みとプロジェクト規模により異なる点もあるかと思うので参考にしてもらえればと思います。
以上！
django configフォルダ構成編 ~最高のフォルダ~
config
プロジェクト作成前
プロジェクト作成まであれば以下でできます。
django-admin startproject config .
プロジェクト作成後
djangoでdjango-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': 'password', #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]
source [newenvname]/bin/activate
or
.[newenvname]/bin/activate
.\[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: /\.ts?$/,
loader: "ts-loader",
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
{
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 */
新環境構築
記載時の最新です。お好みでどうぞ。
