All Projects → truewebartisans → Bottle Vue Kickstart

truewebartisans / Bottle Vue Kickstart

Licence: mit
🍕 Very basic Bottle kickstart kit with Vue.js and Webpack. Included Axios, Autoprefixer, Babel, Webpack config, demo app with Bulma and Web font loader.

Projects that are alternatives of or similar to Bottle Vue Kickstart

Github Ranking
🔍GitHub不同语言热门项目排行,Vue.js做页面展示
Stars: ✭ 160 (+92.77%)
Mutual labels:  webpack, axios, vuejs2
Vue Visualization
Vue 结合 D3.js 进行数据可视化开发的练手案例
Stars: ✭ 125 (+50.6%)
Mutual labels:  webpack, axios, vuejs2
Spring Boot Vuejs
Example project showing how to build a Spring Boot App providing a GUI with Vue.js
Stars: ✭ 1,818 (+2090.36%)
Mutual labels:  webpack, axios, vuejs2
Nx Admin
👍 A magical 🐮 ⚔ vue admin,记得star
Stars: ✭ 2,497 (+2908.43%)
Mutual labels:  webpack, axios, vuejs2
Vue Cnode
🔥Vue.js打造一个开源的CNode社区。CNode by Vue.js
Stars: ✭ 249 (+200%)
Mutual labels:  webpack, axios, vuejs2
Vue Project
基于vue-cli构建的财务后台管理系统(vue2+vuex+axios+vue-router+element-ui+echarts+websocket+vue-i18n)
Stars: ✭ 301 (+262.65%)
Mutual labels:  webpack, axios, vuejs2
Vue Home
🏠 A simple project(Vue Community SPA) which bases on vue+vue-cli+vue-router+axios+ scss.
Stars: ✭ 256 (+208.43%)
Mutual labels:  webpack, axios, vuejs2
Vue Music Player
🎵Vue.js写一个音乐播放器+📖One(一个).A music player + One by Vue.js
Stars: ✭ 729 (+778.31%)
Mutual labels:  webpack, axios, vuejs2
Express React Boilerplate
🚀🚀🚀 This is a tool that helps programmers create Express & React projects easily base on react-cool-starter.
Stars: ✭ 32 (-61.45%)
Mutual labels:  webpack, axios
React Antd Admin Template
一个基于React+Antd的后台管理模版,在线预览https://nlrx-wjc.github.io/react-antd-admin-template/
Stars: ✭ 1,022 (+1131.33%)
Mutual labels:  webpack, axios
Laravel Vue
This application is test and implemented by Laravel 5.4 and Vue.js 2.
Stars: ✭ 46 (-44.58%)
Mutual labels:  axios, vuejs2
Vue Multipage
Vue 多页面项目模板
Stars: ✭ 15 (-81.93%)
Mutual labels:  webpack, vuejs2
Pokedexvuejs
A Pokedex that will contain all 807 pokemon from the Pokemon series. Created in Vue.js
Stars: ✭ 19 (-77.11%)
Mutual labels:  vuejs2, bulma
Vue Spa
vue-spa : vue + vue-router + axios + vuex + vux 快速成型移动端项目,直接使用。欢迎star
Stars: ✭ 46 (-44.58%)
Mutual labels:  webpack, axios
Manhuaren
vue2.0全家桶,仿漫画人官网(移动端)
Stars: ✭ 18 (-78.31%)
Mutual labels:  webpack, vuejs2
Vue Music
使用vue2.0构建音乐播放器
Stars: ✭ 60 (-27.71%)
Mutual labels:  webpack, axios
Webpack Es6 Sass Setup
A basic setup for Webpack with ES6, Babel, Sass and stylelint
Stars: ✭ 63 (-24.1%)
Mutual labels:  webpack, autoprefixer
Easy Vue
Learn vueJS Easily 👻
Stars: ✭ 896 (+979.52%)
Mutual labels:  webpack, vuejs2
React Cool Starter
😎 🐣 A starter boilerplate for a universal web app with the best development experience and a focus on performance and best practices.
Stars: ✭ 1,083 (+1204.82%)
Mutual labels:  webpack, axios
Bathe
The simplest WordPress starter theme including full setup for Sass, PostCSS, Autoprefixer, stylelint, Webpack, Eslint, imagemin, Browsersync, etc.
Stars: ✭ 65 (-21.69%)
Mutual labels:  webpack, autoprefixer

bottle-vue-kickstart-main

Very basic Bottle kickstart kit with Vue.js and Webpack

GitHub release licence licence

What's included to kit?

Python packages:

  • Bottle 0.12.16 (stable)
  • SQLAlchemy (with bottle-sqlalchemy) latest
  • Jinja2 latest

NPM packages:

  • Axios 0.18+ (AJAX calls)
  • PostCSS/Autoprefixer 7.2+ (automate CSS prefixes)
  • Babel 7+ (turn ES6 code to vanilla)
  • Vue.js 2.6+ (the basis of reactive web applications)
  • Webpack 3+ with config (SCSS, ES6, Vue.js)
  • Web font loader 1.6+ (async load font from Google Fonts)

CSS, styles:

What's Bottle?

Bottle is lightweight WSGI micro web-framework for Python. A simple process of installing and deploying. Everything has already been done for you. Just enjoy writing your code!

Simplify development of reactive web applications — use this kickstart kit now!

How to install and use kit?

First, clone this GitHub repository:

[email protected]:~$ git clone https://github.com/koddr/bottle-vue-kickstart.git

Second, install NPM dependencies and make build:

[email protected]:~$ cd bottle-vue-kickstart
[email protected]:~$ npm install
[email protected]:~$ npm run build # or `npm run watch` for hot-reload

Third, prepare your virtual environment:

Since 0.4.2 we use Pipenv project for manage virtual environments.

Install via pip to your system:

[email protected]:~$ pip install pipenv

More info about Pipenv here: Managing dependencies, Python.org.

And now, install Bottle with all extensions:

[email protected]:~$ pipenv install

Yes, virtual environment is automaticaly create. If you want to know system link, just use pipenv --venv.

Result is something like this: /Users/username/.virtualenvs/bottle-vue-kickstart--XXXXXX.

Use it in JetBrains PyCharm, VS Code or else.

Finally, run development server:

[email protected]:~$ python3 run.py

  Bottle v0.12.16 server starting up (using AutoServer())...
  Listening on http://localhost:8080/
  Hit Ctrl-C to quit.

If you did everything right...

Result without database

(Optional) Install database with example objects:

[email protected]:~$ python3 _devtools/install_init_database.py

Now, your yellow section on http://localhost:8080/ will look like this:

Result with database

And we done!

Final app structure

├── _devtools
│   └── install_init_database.py
├── static
│   ├── assets
│   │   ├── js
│   │   │   └── script.js
│   │   └── scss
│   │       └── style.scss
│   ├── css
│   │   └── style.min.css
│   ├── images
│   │   └── bottle-vue-kickstart-logo-horizontal.svg
│   └── js
│       └── script.min.js
├── templates
│   ├── index.html
│   └── layout
│       └── base.html
├── .babelrc
├── .editorconfig
├── .gitignore
├── articles.db
├── package.json
├── package-lock.json
├── Pipfile
├── Pipfile.lock
├── postcss-config.js
├── README.md
├── run.py
└── webpack.config.js

What's next? Build something awesome and make web beautiful again!

Developers

Project assistance

If you want to say «thank you» or/and support active development Bottle Vue.js Kickstart:

  1. Add a GitHub Star to project.
  2. Twit about project on your Twitter.
  3. Donate some money to project author via PayPal: @paypal.me/koddr.
  4. Join DigitalOcean at our referral link (your profit is $100 and we get $25).

Thanks for your support! 😘 Together, we make this project better every day.

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].