mpa frontend template

MPA フロントエンド テンプレート

マルチページ アプリケーション用の webpack、pug、stylus、es6、postcss に基づくシンプルなテンプレート

フィードバック

質問、バグ、機能強化については、Issue を使用してください。

準備する

必須

1. Node.js をインストールまたは更新します。
2. Yarn のインストール - 高速パッケージ マネージャー (npm など)、使用法。

オプション

1. エディター (PhpStorm、Sublime Text、Atom、VS Code) の editorconfig プラグインをインストールします - 異なるエディターと IDE 間で一貫したコーディング スタイル。
2. エディター (PhpStorm、Sublime Text、Atom、VS Code) に eslint プラグインをインストールします。これは、JavaScript 用のプラグイン可能な lint ユーティリティです。

始める

1. プロジェクトのクローンを作成またはダウンロードします。

    git clone [email protected]:evgen3/mpa-frontend-template.git your-project-name
   

2. プロジェクト フォルダーに入り、.git フォルダーを削除します。

    cd your-project-name && rm -rf .git
   

3. 依存関係を糸でインストールします。

    yarn
   

4. ビルド コマンドを使用します。
   • yarn build - 実稼働用のプロジェクトをビルドします (UglifyJSPlugin、cssnano を含む)。
   • yarn watch - ビルドして開発の監視を開始します (ソースマップを含む)。
   • yarn start - 開発用のビルド、監視、およびローカル サーバー (変更ファイルのリロードを含む)。
   • yarn lint - airbnb ルールを使用した src フォルダー内の lint js コード。

料理本

テンプレートに画像を含める

ファイル pug/includes/require.pug で関数が見つかり、使用法は次のとおりです。

img ( src = 'upload/sample.jpg' srcset = ` upload/[email protected] 2x ` alt = '' )
.block ( style = 'background-image: url(upload/sample.jpg);' )

短い場合は、mixin にあるファイル pug/mixins/img.pug にインクルードします。使用法は次のとおりです。

 + img( 'sample.jpg' ) ( alt = 'image' ) .some-class

注意！このミックスインには 2 倍のサイズの画像 (srcset 用) が必要で、リンクはすでにupload/ディレクトリに含まれています。

プラグイン/ライブラリを含める

CSS

依存関係 (スワイパーなど) をインストールします。

 yarn add swiper

main.styl に依存関係を一度インポートします。

 @require '~swiper/dist/css/swiper.css'

styl のシンボル~は、node_modules フォルダーを指します。

JS

jQueryプラグイン

依存関係 (sticky-kit など) をインストールします。

 yarn add sticky-kit

main.js に依存関係を一度インポートします。

 import 'sticky-kit/dist/sticky-kit' ; 

その他の図書館

依存関係 (スワイパーなど) をインストールします。

 yarn add swiper

依存関係が必要なファイルをインポートします。

 import Swiper from 'swiper/dist/js/swiper' ;

スタイラスとjsのエイリアス@

パス内の @ は src フォルダーを指し、それを使用して絶対パスを作成できます。 CSS:

 src: url("~@/font/rouble-webfont.woff") format("woff")

JS:

 import module from '@/js/module';

svgスプライトの使用

アイコンを/icoフォルダーに置きます

そして、テンプレートにコードを追加します。

 < svg class =" your-class " width =" 193 " height =" 40 " >
  < use xlink:href =" #your-icon-file-name " > </ use >
</ svg >

または、pug-mixin を使用することもできます。

 + icon( 'your-icon-file-name' ) ( width = 193 height = 40 ) .your-class