Repository files navigation

@NdagiStanley has mirrored thefork to have this repo here. This starterpack has proved useful to many and I thank you for the emails I have received from all of you. The reasoning behind this mirror is that; this is an effort tosupport the users more by developing further on this project. From here on, I am calling on all potential collaborators by making it easier to makePRs and adding the utility ofIssues in this 'new' repo (Of course with the same name 😀 ). Lastly, just so you know, I'll be keeping up with developments in theoriginal.

Listed in

A full-featured Webpack setup with hot-reload, lint-on-save, unit testing & css extraction integrated into a django application

If you are usingvue-cli@1.x, it will be pulling themaster branch of this template by default. If you are usingvue-cli@2.x, it will be pulling thedist branch instead, which provides more configurable options thanks to new features invue-cli@2.x. It is recommended to upgradevue-cli as soon as you can.

Common topics are discussed in thedocs. Make sure to read it!

https://vuedjango.herokuapp.com/ is a deployed instance of this boilerplate.

Vue-Django Docs offer a more comprehensive documentation.

This is a project template that includesVueJS andDjango based on thevue-cli templates.It is recommended to use npm 3+ for a more efficient dependency tree.

$ npm install -g vue-cli

You might want to usesudo if you encounter permissions error

$ vue init NdagiStanley/vue-django my-project# Follow the prompts$cd my-project$ npm install

Run:

$ npm run dev

The app runs onlocalhost:8080

Update the files as you wish and the hot-reload will take effect. Addjs andcss files within thestatic folder in the root directory. Link them to the index.html in that same level (the root directory).

HavePython installed and preferably use avirtual python environment for this.

Run:

$ python -m pip install -r requirements.txt$ sh server.sh

(Run this command every time you make changes)

Atlocalhost:8000 you should have a page exactly like the image below or as the deployed instance mentioned earlier:https://vuedjango.herokuapp.com/

Docker

If you usedocker in your workflow, there is aDockerfile in the root directory for you. Simply run

docker build -t [image-name] .

Use your preferredimage name in place of theimage-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

Then get tolocalhost:8000. You should have a page exactly like the image above

• npm run dev: first-in-class development experience.

  • Webpack +vue-loader for single file Vue components.
  • State preserving hot-reload
  • State preserving compilation error overlay
  • Lint-on-save with ESLint
  • Source maps

• npm run build: Production ready build.

  • JavaScript minified withUglifyJS.
  • HTML minified withhtml-minifier.
  • CSS across all components extracted into a single file and minified withcssnano.
  • All static assets compiled with version hashes for efficient long-term caching, and a productionindex.html is auto-generated with proper URLs to these generated assets.

• npm run unit: Unit tests run in PhantomJS withKarma +Mocha +karma-webpack.

  • Supports ES2015 in test files.
  • Supports all webpack loaders.
  • Easy mock injection.

• npm run e2e: End-to-end tests withNightwatch.

  • 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 ofVueJS andvue-cli

Feel free to contribute to this repo.

To create your own boilerplate, fork this repo orvue-webpack-boilerplate and use it withvue-cli:

vue init username/repo my-project

If this repo is helpful to you, please star it. Thanks!

Thank you to all our backers!