vue-pug-sass-ts-proj README

概要

以下の環境をサポートするボイラープレートです

• Vue
• pug
• sass
• TypeScript
• Buefy

使用方法

1. 本プロジェクトをclone

   $ git clone --depth 1 https://github.com/narumi18wa/vue-pug-sass-ts-proj.git
   $ cd vue-pug-sass-ts-proj && rm -fr .git

2. $ chmod +x ./install.sh; ./install.sh
3. enjoy yourself

ビルド方法

1. $ npm run build
2. $ npm run dev
3. ブラウザで http://localhost:8000 にアクセスする

Page追加機能

Pugのページを ./scripts.sh から追加できます

1. $ ./scripts.sh add_page PageName
   • ページの名前はアッパーキャメルケースにしてください
   • ページのファイル名はハイフネーションになります
   • ページをディレクトリ指定して追加できます
     • $ ./scripts.sh add_page path/PageName
2. ページに対応するpug, sass, tsが追加されます

Component追加機能

Vueのコンポーネントを ./scripts.sh から追加できます

1. $ ./scripts.sh add_vue ComponentName
   • コンポーネントの名前はアッパーキャメルケースにしてください
   • コンポーネントをディレクトリ指定して追加できます
     • $ ./scripts.sh add_vue path/ComponentName
2. コンポーネントに対応するpug, sass, tsが追加されます

プロジェクト構成

* src/
    - プロジェクトのリソースを管理するディレクトリ

    * page/
        - pugディレクトリ
        - エントリポイントディレクトリ
    * styles/
        * _all.sass RootVueから読むべき全て入りSASS
        * _variable.sass ComponentVueから読むべき変数のみSASS
        * _buefy-customize.sass BuefyをカスタマイズしているSASS
        * _common.sass どこでも使うCSSを入れておくSASS
    * scripts/
        - 汎用typescriptディレクトリ
        entry/
            - エントリポイントディレクトリ
    * static/
        - favicon.ico等

    * components/
        - component用フォルダ

* dist/
    - コンパイル後のプロジェクトを配置するディレクトリ