Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/AllenFang/vue2-component-boilerplate
A simple and minimal boilerplate for creating a vue component
https://github.com/AllenFang/vue2-component-boilerplate
boilerplate vue2 vue2-component
Last synced: 2 months ago
JSON representation
A simple and minimal boilerplate for creating a vue component
- Host: GitHub
- URL: https://github.com/AllenFang/vue2-component-boilerplate
- Owner: AllenFang
- License: mit
- Created: 2016-11-13T03:47:10.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-08-05T06:39:23.000Z (about 7 years ago)
- Last Synced: 2024-07-05T10:46:46.180Z (3 months ago)
- Topics: boilerplate, vue2, vue2-component
- Language: JavaScript
- Homepage:
- Size: 14.6 KB
- Stars: 30
- Watchers: 4
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue2-component-boilerplate
It's a boilerplate for that people who want to develop a vue2 component. This boilerplate inspired by [vuejs-templates/webpack](https://github.com/vuejs-templates/webpack), but it's
more simple and suitable for developing a vue2 component instead a vue application or a SPA.
* Easy to use and understand, less configurations and template
* Use ```webpack-dev-server``` for hot reload development
* A minimal entry and html for preview the result on development
* Only compitable for ```vue2.0```
I saw some vue components on github which use boilerplate but there are a lots of configurations
and files is useless, so hope this minimal boilerplate can help you to have a clean and simple enviorment for developing your component.
## Getting Started
For using this boilerplate, you need to scaffold your repo by [vue-cli](https://github.com/vuejs/vue-cli)
```sh
$ vue init AllenFang/vue2-component-boilerplate YOUR_PROJECT_NAME
$ cd YOUR_PROJECT_NAME
$ npm install
$ npm run dev
```
## What's Included
* ```npm run dev``` : Development
* Hot reload
* ```webpack-dev-server``` as dev server
* ```npm run build``` : Build for production
* Javascript minified with [UglifyJS](https://github.com/mishoo/UglifyJS2)
* Extract css(Default is false, but you can enable it)
* The bundled js will be placed in ```dist``` folder
* ```npm run unit``` : Unit test
## Project Structure
```sh
├── build/ # webpack configuration files
│ └── ...
├── src/
│ ├── dev.js # the entry point for development
│ ├── hello.vue # just a sample vue component
│ ├── index.js # the entry point for production
│ ├── main.vue # the index for your components
├── test/ # unit tests
│ ├── specs # testing spec
│ │ └── ... # testing codes
│ ├── .eslintrc # eslint config for testing
│ ├── index.js # the entry for karam
│ └── karma.conf.js # karma config file
├── .babelrc # babel config
├── .editorconfig # editor config
├── .eslintrc.js # eslint config
├── .gitignore # git ignore config
├── index.html # html used on webpack-dev-server
└── package.json # package.json
└── README.md # README.md
```