Flask-VueJs-Template is a web application template that combines Flask and Vue.js. It provides a minimal Flask 1.0 app with a Flask-RestPlus API that has class-based secure resource routing. The template also includes a starter PyTest test suite. On the Vue.js side, it uses the vue-cli 3 + yarn setup and includes Vuex, Vue Router, and Axios for backend communication. Heroku configuration is provided for easy one-click deployment with Gunicorn.
Before getting started, make sure you have the following installed and running:
Clone the repository and set it up:
git clone <repository-url>
cd flask-vue-template
Setup virtual environment, install dependencies, and activate it:
pipenv install
pipenv shell
Install JavaScript dependencies:
cd static
yarn install
Run Flask API development server:
python run.py
From another terminal tab in the same directory, start the webpack dev server:
cd static
yarn serve
The Vue.js application will be served from localhost:8080 and the Flask API and static files will be served from localhost:5000.
Flask-VueJs-Template is a web application template that combines the power of Flask and Vue.js. It provides a minimal Flask app with a secure API, along with a Vue.js frontend that includes Vuex, Vue Router, and Axios. The template also includes sample Vue filters and provides easy Heroku configuration for one-click deployment. With its comprehensive set of features and easy installation process, Flask-VueJs-Template is a great choice for building web applications.
Flask is a lightweight and popular web framework for Python, known for its simplicity and flexibility. It is widely used to build web applications, providing a minimalistic approach to web development with features like routing, templates, and support for extensions.
Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.