SLYLXDYMJ / generator-jason

基于 webpack 的前端脚手架

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

generator-jason

前端模块化脚手架

Installation

First, install Yeoman and generator-jason using npm (we assume you have pre-installed node.js).

npm install -g yo
npm install -g generator-jason

Then generate your new project:

yo jason
npm run dev -> localhost:8080

使用场景

  1. 非前后端分离,后端模板项目
  2. 前后端分离项目,但是不使用 vue,react,angular(也就是说没有现成的脚手架)

目录解析

管理员目录,项目会生成一个管理员目录
启动开发环境后
可以在 http://localhost:8080/admin.html 中
查看全部页面的链接 和 组件
- admin

打包后的目录
- dist

项目源码
src
  资产目录,css,js,font
  - assets
  
  组件目录,由于使用的 ejs 作为 html 语言,可通过 require 的方式引入并且传入 prop,实现组件化
  其中 components/index.js 会在 main.js 中执行,初始化组件
  - components
  
  国际化目录
  - i18n
  
  页面目录,存放着页面组件
  - views
  
  项目公共配置
  - main.js

组件化

components 和 views 目录下的 A 文件夹作为模板,复制改名用即可
ejs require 实现

<!-- ejs 中引入组件 -->
<%= require('../../components/A/index.ejs')({
  // 可传参数
  title: '我是title'
}) %>

注意

  1. views

打包时,页面组件的 css 和 js 的名称,进行了单独的处理
将按照页面组件的目录名编译成 hash 字符串(相同页面的 css 和 js 名称是一样的)
目的是实现页面组件的中文目录命名,方便开发(后端模板项目建议中文命名,前后端分离项目不建议中文命名)

  1. html 路径问题

使用下面方法引入即可

<img src="<%= require('./images/abc.jpg') %>">
<div style="background-image: url(<%= require('./images/abc.jpg') %>)"></div>

生成的 css 文件说明

  • vendor

第三方模块 css(node_modules)

  • common

项目中的通用样式以及组件样式(assets,components)

  • hash.css

各个页面的单独样式(views/**/index.scss)

生成的 js 文件说明

  • vendor

第三方模块(node_modules)

  • common

项目中的工具库以及组件(assets,components)

  • main

main.js

  • hash.js

各页面单独的业务逻辑(views/**/index.js)

About

基于 webpack 的前端脚手架

License:MIT License


Languages

Language:JavaScript 99.3%Language:HTML 0.5%Language:CSS 0.3%