Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iapyang/iapyang-vue-template
vue template without ssr
https://github.com/iapyang/iapyang-vue-template
iapyang-vue-template template template-engine vue vue-template webpack2
Last synced: about 5 hours ago
JSON representation
vue template without ssr
- Host: GitHub
- URL: https://github.com/iapyang/iapyang-vue-template
- Owner: iapYang
- Created: 2017-04-28T09:12:52.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-11-24T01:16:51.000Z (almost 7 years ago)
- Last Synced: 2024-09-27T22:20:11.778Z (about 5 hours ago)
- Topics: iapyang-vue-template, template, template-engine, vue, vue-template, webpack2
- Language: JavaScript
- Homepage:
- Size: 594 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.MD
Awesome Lists containing this project
README
# iapyang-vue-template
[](https://github.com/iapYang/iapyang-vue-template/issues)
[](https://github.com/iapYang/iapyang-vue-template/network)
[](https://github.com/iapYang/iapyang-vue-template/stargazers)
[](https://www.npmjs.com/package/iapyang-vue-template)
[](https://nodei.co/npm/iapyang-vue-template/)
## Changelog
> v0.6.3
>
> 🐛 Polish
>
> - advance fucntion on merge options
>
> For more old changelog, please go to [Changelog](https://github.com/iapYang/iapyang-vue-template/blob/master/CHANGELOG.MD)
## Env
- language：vue
- style：sass+postcss
- javascript：es6
- pack：webpack
## Directory Structure
```
My-App/
|——dev/
| |——component/ all vue component
| | |——common/ common component can be used in global
| | |——layout/ component to build pages
| | |——view/ route page
| | |——App.vue export vue
| |——font/
| |——image/
| |——script/
| | |——*.js
| | |——plugin/
| |——store/ vuex
| | |——actions.js
| | |——getters.js
| | |——index.js
| | |——mutation-types.js
| | |——mutations.js
| | |——state.js
| |——style/ common style
| |——router.js router
| |——static/
|——build/ output files
|——.eslintignore
|——.eslintrc
|——.gitignore
|——.package.json
|——iapvt.config.js
|__***/**
```
#### The Dev Directory
The `dev` folder contains evreythings you need during your development.
This folder is required.
#### The Component Directory
The `component` folder contains all the .vue files.
This folder is optional.
#### The Font Directory
The `font` folder contains font files.
This folder is optional.
#### The Image Directory
The `image` folder contains image files.
This folder is optional.
#### The Script Directory
The `script` folder contains javascript files.
The index.js file will be placed here.
This folder is required.
#### The Store Directory
The `stroe` folder contains vuex files.
This folder is optional.
#### The Style Directory
The `style` folder contains common scss files.
This folder is optional.
#### router.js
The `router.js` is file for vue router.
This is optional.
#### The Static Directory
The `static` store the files won;t change.
It'll copy to static folder when build.
This is optional.
#### iapvt.config.js
Override webpack engine.
- rules
- advanced use like less-loader, [check here](https://github.com/iapYang/iapyang-vue-template/blob/master/demo/less_dom.js)
```javascript
// used when you need more loader
module.exports = {
rules: [{
test: /\.(html)$/,
use: {
loader: 'html-loader',
options: {
attrs: [':data-src']
}
}
}]
};
```
- bundle
```javascript
// export js can be used by CDN & commonJs & AMD
const path = require('path');
module.exports = {
bundle: {
// js location
path: path.resolve('./dev/component/App.vue'),
// library name
name: 'app',
},
};
```
- htmlOptions
- for user use their own template, [check this demo](https://github.com/iapYang/iapyang-vue-template/blob/master/demo/htmlOptions.js) after updating
```javascript
// This is optional, if you use mine default template before, ignore this options
// with this you can render more than one page
const path = require('path');
module.exports = {
htmlsOptions: [{
// template location
template: path.resolve(__dirname, './dev/view/demo.html'),
// output js name, like 'demo/index' means index.js in demos folder
name: 'demo/index',
// template js files, must be an array
entry: [path.resolve(__dirname, './dev/script/demo.js')],
}],
// default is 'cover', will not render mine default template unless you set it 'combine'
htmlsHandleType: 'combine',
}
```
## Install
```javascript
npm install iapyang-vue-template -D
```
## Configuration
In package.json, add scripts.
```json
{
"scripts": {
"dev": "iapvt",
"build": "iapvt build",
"cli": "iapvt cli",
"gh": "iapvt gh"
}
}
```
#### usage
```javascript
// for develop
npm run dev
// for build
npm run build
// for upload to git-pages
npm run gh
// for generate blank runable structure
npm run cli
// for generate blank runable structure without router files
npm run cli -r
// for generate blank runable structure without vuex files
npm run cli -s
```
## To be done
- [x] user can change webpack url font & pics size