.
├── package-lock.json
├── package.json
├── public
├── src
│ ├── js
│ │ ├── _helpers/
│ │ ├── _router/
│ │ ├── _store/
│ │ ├── app.js
│ │ ├── components/
│ │ │ ├── atoms/
│ │ │ │ ├── ...
│ │ │ │ └── Button.vue
│ │ │ ├── globals/
│ │ │ │ ├── ...
│ │ │ │ └── Header.vue
│ │ │ └── molecules/
│ │ │ ├── ...
│ │ │ └── ListSidebar.vue
│ │ └── pages/
│ │ ├── ...
│ │ └── index.vue
│ └── scss/
└── webpack.config.babel.js
- 「_helpers」はユーティリティな関数などをまとめているフォルダ
- 「_router」はvue-routerのインスタンスを生成しているフォルダ
- 「_store」はvuexのstoreのインスタンスを生成しているフォルダ
components
フォルダでコンポーネントをまとめています。
- 「atoms」は使い回すための最小単位のコンポーネント
- 「globals」はどのページでも使うコンポーネント
- 「molecules」は「atoms」で構成されたコンポーネント(使い回せなくてもいい)
pages
フォルダはmolecules
のコンポーネントで構成された実ページ
- 「pages」では直接「atoms」を使わない
- 「pages」では子のコンポーネントにpropsを渡すこと・イベントの通知を受け取ることとJSの処理を行っている
URL | |
---|---|
トップ | / |
サインイン | /signin |
サインアウト | /signout |
カテゴリー一覧・追加 | /categories |
記事一覧 | /articles |
記事詳細 | /articles/:id |
更新 | /articles/:id/edit |
投稿 | /articles/post |
ユーザー一覧 | /users |
ユーザー個別 | /users/:id |
ユーザー作成 | /users/create |
404 | /* |
- 管理者が追加(アカウント名・メールアドレス・パスワード)
グループ | 権限範囲 |
---|---|
システム管理者 | 閲覧(全ページ)、更新・削除 |
管理ユーザー | 閲覧(全ページ)、更新・削除 |
閲覧ユーザー | 閲覧(更新系のページを除く) |
開発時は下記のコマンドでサーバーが立ち上がります。
npm install
npm run dev
公開は、下記のコマンドでソースコードをビルドします。
npm run build
環境にアップしたら、下記のコマンドでNodeのサーバーを立ち上げます。
npm run publish
- Node.js (v10.15.0): https://nodejs.org/ja/
- Babel (v7.x): https://babeljs.io/
- ESlint: https://eslint.org/
- webpack (v4.29.0): https://webpack.js.org
- Vue.js (v2.6.6): https://jp.vuejs.org/index.html
- Vue Router: https://router.vuejs.org/ja/
- Vuex: https://vuex.vuejs.org/ja/
- Express (v4.16.4): https://expressjs.com/ja/
- PM2 (v3.5.0): http://pm2.keymetrics.io/
- Storybook (v5.x) コンポーネントガイド: https://storybook.js.org/
- テスト