Our Vue starter pack

Image from http://islandmix.com/

For a new single page application we would like to have a quick start, no issues with modules to be installed and a modern template.

vue-cli (the comand line interface for quickly scaffolding a Vue project) already has a bunch of templates which you can easily install using vue init <template-name>. Our version is based on the well-known ‘webpack’ template. It comes with all modern goodies we like, such as a pre-configured webpack setup, Hot Module Reloading (HMR), ESLint integration and unit testing.

For our workflow, we added the Vuex module and created an extra route and page. In addition, we added the Bootstrap 3 stylesheet (minified) to the index.html for basic styling. This version is available on Bitbucket.

You can use this template in your project by following these steps. We assume you have a Bitbucket account, git installed on your local machine, node and npm available. As you can see, a modern setup on your machine is required 🙂

  1. Clone the repo
    git clone pim_hooghiemstra@bitbucket.org:plintsites/vue-starter.git /your/project/directory
  2. Remove the .git directory
    trash .git
  3. Initialize your local git repo
    git init
  4. Commit the initial version (after staging it)
    git add .
    git commit -m ‘Initial commit’
  5. Install node modules
    npm install
  6. Compile your code with webpack, HMR and open up the devserver
    npm run dev
  7. Start developing.

Happy coding!

Mijn Twitter profiel Mijn Facebook profiel
Pim Hooghiemstra Webdeveloper and founder of PLint-sites. Loves to build complex webapplications using Vue and Laravel! Latest post
gyp error message during npm install

Leave a Reply

Your email address will not be published. Required fields are marked *