Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/egoist/vuepack
:package: A modern starter which uses Vue 2, Vuex, Vue-router and Webpack 2 (and even Electron)
https://github.com/egoist/vuepack
Last synced: 20 days ago
JSON representation
:package: A modern starter which uses Vue 2, Vuex, Vue-router and Webpack 2 (and even Electron)
- Host: GitHub
- URL: https://github.com/egoist/vuepack
- Owner: egoist
- License: mit
- Created: 2015-11-12T04:09:19.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-06-26T06:50:33.000Z (over 2 years ago)
- Last Synced: 2024-10-01T17:41:23.095Z (about 1 month ago)
- Language: JavaScript
- Homepage: http://vuepack.surge.sh
- Size: 241 KB
- Stars: 2,428
- Watchers: 48
- Forks: 202
- Open Issues: 38
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-cn - **VuePack ★158**
- awesome-github-vue - vuepack - 现代VueJS启动器 (开发框架)
- awesome-github-vue - vuepack - 现代VueJS启动器 (开发框架)
- awesome - vuepack - 现代VueJS启动器 (开发框架)
README
VuePack is a modern Vue.js starter
which uses Vue 2, Vuex, Vue-router and Webpack 2.
## Note
I highly recommend you to try [Poi](https://github.com/egoist/poi), you can develop Vue.js app with no-config until you need it. Less boilerplate code, more happiness ❤️
Here's the plan for [VuePack 4.0](https://github.com/egoist/vuepack/issues/136), you can support my work by [donating](https://github.com/egoist/donate) or joining the development.
## Features
- Vue 2 / Vue-router / Vuex
- Hot reloading for single-file components
- Split vendor code from your app
- Webpack 2 (an update to Webpack 4 will be very soon)
- [Offline Ready, perfect for progressive web app](/docs/pwa.md)
- [ESLint](/docs/eslint.md)
- [Babel 6](/docs/babel.md)
- [PostCSS](/docs/postcss.md)
- [JSX components are supported by default](/docs/jsx.md)
- [TestCafe](/docs/testcafe.md) (optional)
- [Electron support](/docs/electron.md) (optional)
- [CSS modules](/docs/css-modules.md) (optional)
- A boilerplate which is small and focusing on client-side apps
Check out [the docs](https://github.com/egoist/vuepack/tree/master/docs) for more usages.
## Get Started
You'd better have `node >=10` and `npm >=6` installed:
## sao
This template can be used with [SAO](https://github.com/egoist/sao), which also means you can use the template offline:
```bash
npm i -g sao jstransformer-handlebars
# from npm
sao vuepack new-project
# or git repo
sao egoist/vuepack new-project
```
## Vue CLI
Vue CLI (`vue-cli@2` or `@vue/cli@>=3` + `@vue/cli-init`) is still supported, but it has been deprecated by Vue officially, so it is not recommended to use Vue CLI with Vuepack.
```bash
npm i -g @vue/cli @vue/cli-init
vue init egoist/vuepack
```
### For Windows users
Install `git with unix tools` before getting started.
## Folder Structure
If you did not enable Electron support, the dest folder is `./dist`, otherwise it's `./app/dist`.
`./app` folder only exists when you enabled Electron support.
```bash
├── app # the actual app you want to bundle with Electron
│ ├── dist # directory which contains all bundled files
│ └── index.js # entry file for Electron
├── build # webpack configs and other scripts
├── client # client-side app files
├── dist # bundled files and index.html
│ ├── index.html
│ └── [...other bundled files]
├── tests # e2e tests written by testcafe
├── node_modules # dependencies
└── package.json # package info
```
## Custom template
You want to customize the output of `index.html`, simply modify [index.html](https://github.com/egoist/vuepack/blob/master/template/build/index.html), see more at [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin).
## License
MIT © [EGOIST](https://github.com/egoist)