mpa frontend template

MPA 前端模板

基於 webpack、pug、stylus、es6、postcss 的簡單模板，適用於多頁面應用程式

回饋

對於問題、錯誤和增強使用問題。

準備

必需的

1. 安裝或更新 Node.js；
2. 安裝 Yarn - 快速套件管理器（如 npm），用法。

選修的

1. 為您的編輯器（PhpStorm、Sublime Text、Atom、VS Code）安裝 editorconfig 外掛程式 - 不同編輯器和 IDE 之間的一致編碼風格；
2. 為您的編輯器（PhpStorm、Sublime Text、Atom、VS Code）安裝 eslint 外掛程式 - 用於 JavaScript 的可插入 linting 實用程式。

開始

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 資料夾中的 js 程式碼進行 lint 處理.

食譜

在模板中包含圖像

在檔案 pug/includes/require.pug 中找到函數，用法：

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

簡而言之，包含在檔案 pug/mixins/img.pug 中，位於 mixin 中，用法：

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

注意力！此 mixin 需要雙倍大小的圖片（對於 srcset），並且連結已包含在upload/目錄中。

包括插件/庫

CSS

安裝依賴項（例如，swiper）：

 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' ; 

其他圖書館

安裝依賴項（例如，swiper）：

 yarn add swiper

導入需要依賴的檔案：

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

手寫筆和 js 中的別名 @

path中的@指向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