A full-featured Webpack setup with hot-reload, lint-on-save, unit testing & css extraction integrated into a django application
Vue CLI Version Notice
If you are using
email@example.com, it will be pulling the
master branch of this template by default. If you are using
firstname.lastname@example.org, it will be pulling the
dist branch instead, which provides more configurable options thanks to new features in
email@example.com. It is recommended to upgrade
vue-cli as soon as you can.
VueJS Templates Documentation
Common topics are discussed in the docs. Make sure to read it!
https://vuedjango.herokuapp.com/ is a deployed instance of this boilerplate.
Usage of VueDjango
This is a project template that includes
Django based on the vue-cli templates. It is recommended to use npm 3+ for a more efficient dependency tree.
$ npm install -g vue-cli
You might want to use
sudo if you encounter permissions error
$ vue init NdagiStanley/vue-django my-project $ cd my-project $ npm install
Secondly, have Python installed and preferably create a virtual environment for the project.
$ npm run dev
To deploy your django project
Ensure that docker is running.
If you use
docker in your workflow, there is a
Dockerfile in the root directory for you. Simply run
docker build -t [image-name] .
Use your preferred image name in place of the
image-name in the command. Remember to enter the trailing period before running it.
There is a docker container for vue-django that you can run. Simply run the following command.
docker run -p 8000:8000 stanmd/vue-django python manage.py runserver 0.0.0.0:8000
Then get to localhost:8000. You should have a page exactly like the image above
npm run dev: first-in-class development experience.
- Webpack +
vue-loaderfor single file Vue components.
- State preserving hot-reload
- State preserving compilation error overlay
- Lint-on-save with ESLint
- Source maps
- Webpack +
npm run build: Production ready build.
- HTML minified with html-minifier.
- CSS across all components extracted into a single file and minified with cssnano.
- All static assets compiled with version hashes for efficient long-term caching, and a production
index.htmlis auto-generated with proper URLs to these generated assets.
- Supports ES2015 in test files.
- Supports all webpack loaders.
- Easy mock injection.
npm run e2e: End-to-end tests with Nightwatch.
- Run tests in multiple browsers in parallel.
- Works with one command out of the box:
- Selenium and chromedriver dependencies automatically handled.
- Automatically spawns the Selenium server.
NB: This repo has been forked from vue-webpack-boilerplate to help you start a Django application utilizing the awesomeness of
Vue JS and
Feel free to contribute to this repo.
To create your own boilerplate, fork this repo or vue-webpack-boilerplate and use it with
vue init username/repo my-project