{"id":13468796,"url":"https://github.com/NdagiStanley/vue-django","last_synced_at":"2025-03-26T05:31:19.762Z","repository":{"id":46857204,"uuid":"101198992","full_name":"NdagiStanley/vue-django","owner":"NdagiStanley","description":"@Django integrated with a full-featured @Webpack + (@vuejs / vue-loader) setup with hot reload, linting, testing \u0026 css extraction.","archived":false,"fork":false,"pushed_at":"2024-10-09T09:00:06.000Z","size":333,"stargazers_count":520,"open_issues_count":22,"forks_count":84,"subscribers_count":16,"default_branch":"develop","last_synced_at":"2024-10-29T22:56:42.926Z","etag":null,"topics":["django","vuejs","webpack"],"latest_commit_sha":null,"homepage":"https://code.md.engineer/vue-django/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NdagiStanley.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-23T15:56:38.000Z","updated_at":"2024-10-08T16:39:56.000Z","dependencies_parsed_at":"2024-02-27T08:09:36.790Z","dependency_job_id":"d88f10b5-be99-4919-8458-becb6e34bf40","html_url":"https://github.com/NdagiStanley/vue-django","commit_stats":{"total_commits":205,"total_committers":26,"mean_commits":7.884615384615385,"dds":0.4975609756097561,"last_synced_commit":"e547e974efaa7b859f4aec04496938b84ade75f6"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NdagiStanley%2Fvue-django","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NdagiStanley%2Fvue-django/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NdagiStanley%2Fvue-django/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NdagiStanley%2Fvue-django/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NdagiStanley","download_url":"https://codeload.github.com/NdagiStanley/vue-django/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245597293,"owners_count":20641864,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["django","vuejs","webpack"],"created_at":"2024-07-31T15:01:19.258Z","updated_at":"2025-03-26T05:31:18.650Z","avatar_url":"https://github.com/NdagiStanley.png","language":"JavaScript","funding_links":["https://opencollective.com/vue-django"],"categories":["JavaScript","脚手架","Components \u0026 Libraries","Scaffold [🔝](#readme)","Scaffold"],"sub_categories":["源代码编辑","Scaffold","Source Code Editing"],"readme":"# vue-django-webpack-boilerplate\n\n\u003e [@NdagiStanley](https://github.com/NdagiStanley) has mirrored the [fork](https://github.com/NdagiStanley/vue-django-fork) 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 to **support the users** more by developing further on this project. From here on, I am calling on all potential collaborators by making it easier to make [PRs](https://github.com/NdagiStanley/vue-django/pulls) and adding the utility of [Issues](https://github.com/NdagiStanley/vue-django/issues) in this 'new' repo (Of course with the same name 😀 ). Lastly, just so you know, I'll be keeping up with developments in the [`original`](https://github.com/vuejs-templates/webpack).\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eListed in\u003c/b\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://github.com/vuejs/awesome-vue#scaffold\" target=\"_blank\"\u003e\u003cimg src=\"https://github.com/vuejs/awesome-vue/raw/master/assets/logo.svg?sanitize=true\" align=\"center\" height=\"150\" alt=\"Awesome VueJS\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003e A full-featured Webpack setup with hot-reload, lint-on-save, unit testing \u0026 css extraction integrated into a django application\n\n## Vue CLI Version Notice\n\nIf you are using `vue-cli@1.x`, it will be pulling the `master` branch of this template by default. If you are using `vue-cli@2.x`, it will be pulling the `dist` branch instead, which provides more configurable options thanks to new features in `vue-cli@2.x`. It is recommended to upgrade `vue-cli` as soon as you can.\n\n## VueJS Templates Documentation\n\nCommon topics are discussed in the [docs](http://vuejs-templates.github.io/webpack). Make sure to read it!\n\n# Vue Django\n[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=102)](https://github.com/ellerbrock/open-source-badge/)\n![GitHub](https://img.shields.io/github/license/Ndagistanley/vue-django)\n[![Help Contribute to Open Source](https://www.codetriage.com/ndagistanley/vue-django/badges/users.svg)](https://www.codetriage.com/ndagistanley/vue-django)\n\n[![Build Status](https://semaphoreci.com/api/v1/stanmd/vue-django/branches/develop/badge.svg)](https://semaphoreci.com/stanmd/vue-django)\n\n[![Coverage Status](https://coveralls.io/repos/github/NdagiStanley/vue-django/badge.svg)](https://coveralls.io/github/NdagiStanley/vue-django)\n\n[![](https://images.microbadger.com/badges/image/stanmd/vue-django.svg)](https://microbadger.com/images/stanmd/vue-django \"Get your own image badge on microbadger.com\")\n[![](https://images.microbadger.com/badges/version/stanmd/vue-django.svg)](https://microbadger.com/images/stanmd/vue-django \"Get your own version badge on microbadger.com\")\n\n[https://vuedjango.herokuapp.com/](https://vuedjango.herokuapp.com/) is a deployed instance of this boilerplate.\n\n[Vue-Django Docs](https://ndagistanley.github.io/vue-django/) offer a more comprehensive documentation.\n\n## Usage of VueDjango\n\nThis is a project template that includes `VueJS` and `Django` based on the [vue-cli](https://github.com/vuejs/vue-cli) templates. **It is recommended to use npm 3+ for a more efficient dependency tree.**\n\n``` bash\n$ npm install -g vue-cli\n```\n\n### Set up\nYou might want to use ```sudo``` if you encounter permissions error\n```bash\n$ vue init NdagiStanley/vue-django my-project  # Follow the prompts\n$ cd my-project\n$ npm install\n```\n\n### Develop\nRun:\n```bash\n$ npm run dev\n```\n\nThe app runs on [localhost:8080](http://localhost:8080/)\n\nUpdate the files as you wish and the hot-reload will take effect. Add `js` and `css` files within the `static` folder in the root directory. Link them to the index.html in that same level (the root directory).\n\n### Run the Django server\nHave *Python* installed and preferably use a [virtual python environment](#virtualenv) for this.\n\nRun:\n```bash\n$ python -m pip install -r requirements.txt\n$ sh server.sh\n```\n(Run this command every time you make changes)\n\nAt [localhost:8000](http://localhost:8000/) you should have a page exactly like the image below or as the deployed instance mentioned earlier: [https://vuedjango.herokuapp.com/](https://vuedjango.herokuapp.com/)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"http://i.imgur.com/sY3IpBE.png?1\" align=\"center\" height=\"500\" alt=\"Vue-Django\"\u003e\n\u003c/p\u003e\n\n\u003e Docker\n\n##### Ensure that **docker** is running.\n\nIf you use `docker` in your workflow, there is a `Dockerfile` in the root directory for you. Simply run\n```\ndocker build -t [image-name] .\n```\nUse your preferred _image name_ in place of the `image-name` in the command. Remember to enter the trailing period before running it.\n\nThere is a docker container for vue-django that you can run. Simply run the following command.\n```bash\ndocker run -p 8000:8000 stanmd/vue-django\n```\n\nThen get to [localhost:8000](http://localhost:8000/). You should have a page exactly like the image above\n\n## What's Included\n\n- `npm run dev`: first-in-class development experience.\n  - Webpack + `vue-loader` for single file Vue components.\n  - State preserving hot-reload\n  - State preserving compilation error overlay\n  - Lint-on-save with ESLint\n  - Source maps\n\n- `npm run build`: Production ready build.\n  - JavaScript minified with [UglifyJS](https://github.com/mishoo/UglifyJS2).\n  - HTML minified with [html-minifier](https://github.com/kangax/html-minifier).\n  - CSS across all components extracted into a single file and minified with [cssnano](https://github.com/ben-eb/cssnano).\n  - All static assets compiled with version hashes for efficient long-term caching, and a production `index.html` is auto-generated with proper URLs to these generated assets.\n\n- `npm run unit`: Unit tests run in PhantomJS with [Karma](http://karma-runner.github.io/0.13/index.html) + [Mocha](http://mochajs.org/) + [karma-webpack](https://github.com/webpack/karma-webpack).\n  - Supports ES2015 in test files.\n  - Supports all webpack loaders.\n  - Easy mock injection.\n\n- `npm run e2e`: End-to-end tests with [Nightwatch](http://nightwatchjs.org/).\n  - Run tests in multiple browsers in parallel.\n  - Works with one command out of the box:\n    - Selenium and chromedriver dependencies automatically handled.\n    - Automatically spawns the Selenium server.\n\n## Community\n\n### Contributions\n\n**NB**: This repo has been forked from vue-webpack-boilerplate to help you start a Django application utilizing the awesomeness of `VueJS` and `vue-cli`\n\nFeel free to contribute to this repo.\n\nTo create your own boilerplate, fork this repo or [vue-webpack-boilerplate](https://github.com/vuejs-templates/webpack) and use it with `vue-cli`:\n\n``` bash\nvue init username/repo my-project\n```\n\n### Star History\n\nIf this repo is helpful to you, please star it. Thanks!\n\n\u003ca href=\"https://star-history.com/#ndagistanley/vue-django\u0026Date\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://api.star-history.com/svg?repos=ndagistanley/vue-django\u0026type=Date\u0026theme=dark\" /\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://api.star-history.com/svg?repos=ndagistanley/vue-django\u0026type=Date\" /\u003e\n    \u003cimg alt=\"Star History Chart\" src=\"https://api.star-history.com/svg?repos=ndagistanley/vue-django\u0026type=Date\" /\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\n### Backers\n\n[![Backers on Open Collective](https://opencollective.com/vue-django/backers/badge.svg)](#backers)\n\nThank you to all our backers!\n\n\u003ca href=\"https://opencollective.com/vue-django#backers\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/vue-django/backers.svg?width=890\"\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNdagiStanley%2Fvue-django","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNdagiStanley%2Fvue-django","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNdagiStanley%2Fvue-django/lists"}