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