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, 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, you can support my work by donating or joining the development.
Features
- Vue 2 / Vue-router / Vuex
- Hot reloading for single-file components
- Split vendor code from your app
- Webpack 2
- Offline Ready, perfect for progressive web app
- ESLint
- Babel 6
- PostCSS
- JSX components are supported by default
- TestCafe
- Electron support (optional)
- CSS modules (optional)
- A boilerplate which is small and focusing on client-side apps
Check out the docs for more usages.
Get Started
You'd better have node >=4 and npm >=3 installed:
sao
This template can be used with sao, which also means you can use the template offline:
yarn global add sao# from npm sao vuepack new-project# or git repo sao egoist/vuepack new-projectvue-cli
$ npm install -g vue-cli$ vue init egoist/vuepack new-project$ cd new-project$ npm install # edit files and start developing $ npm run dev# bundle all scripts and styles for production use $ npm run build # lint your code $ npm run lintFor Windows users
Install git with unix tools before getting started.
Folder Structure
If you did not enable Eletron support, the dest folder is ./dist, otherwise it's ./app/dist.
./app folder only exists when you enabled Electron support.
├── 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, see more at html-webpack-plugin.
License
MIT © EGOIST