Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lencx/multipage-template

Multi-module(webpack4, vue2, pug, scss, postcss)
https://github.com/lencx/multipage-template

multi-page postcss pug scss vue2 webpack4

Last synced: 1 day ago
JSON representation

Multi-module(webpack4, vue2, pug, scss, postcss)

Awesome Lists containing this project

README

        

# Multipage Template

```bash
[project]
|- [.bin]
|- [config]
| |- [data]
| | |- alias.json # webpack alias
| | |- mode.json # entry file
| | `- dev-info.json # developer information
| |- webpack.config.js
| `- ...
|- [src]
| |- [models]
| | |- [mode_name] # www | home | app | ...
| | `- ...
| `- [public]
| |- [api]
| | |- dev.api.js
| | |- prod.api.js
| | `- index.js
| |- [components]
| |- [js]
| |- [scss]
| |- [templates]
| | |- [layout]
| | |- [widget]
| | `- ...
| |- [utils]
| `- ...
|- [static]
| |- [plugin]
| |- [lib]
| | |- [email protected]
| | |- [email protected]
| | `- ...
| |- [img]
| |- [media]
| `- ...
|- [webpack]
|- package.json
`- ...
```

## Command

```bash
# install
yarn

yarn dev

yarn build

### help ###
# webpack-cli
yarn cli:help
# webpack-dev-server
yarn dev:help

# default: timestamp
yarn zip

# clear directory
yarn clear # dirname: required

# create mode or page
yarn new mode@ # mode_name: required

# model list
yarn mode

# enable all model
yarn mode all

# `make` command instructions
make
```

## Model

* www
* app
* h5
* ...

## Vue use

### Component

* Global Registration

> path: `/src/public/components`\
> [alias: `@pubcp`](/config/data/alias.json)

```js
// src/public/js/common.js
Vue.component('my-component-name', {
// ... options ...
})

// or
import testBtn from '@pubcp/testBtn.vue'
Vue.component('test-btn', testBtn)
```

* Local Registration

> path: `/src/models/mode_name/components`\
> alias: ...

```js
// src/models/mode_name/js/page_name.js
import localBtn from './your_components_path/localBtn.vue'
new Vue({
el: '#app',
components: {
localBtn
}
})
```

## TODO

* [x] Generate new module or page
* [x] Enable the module through the terminal