All Projects → framework7io → Framework7 Template Vue Webpack

framework7io / Framework7 Template Vue Webpack

Licence: mit
Deprecated! Framework7 Vue Webpack starter app template with hot-reload & css extraction

Projects that are alternatives of or similar to Framework7 Template Vue Webpack

Framework7 Template Vue Simple
Deprecated! Simple Framework7 Vue starter app template in a single HTML file
Stars: ✭ 81 (-79.7%)
Mutual labels:  framework7, mobile, app, template
Phaser Ce Npm Webpack Typescript Starter Project
Project to get you started with your Phaser-CE (using the npm module) game using Typescript and Webpack for building! No hassle asset management, Google Web Font loader, live server, development vs distribution build pipeline, Electron packaging for desktop builds, and more...
Stars: ✭ 414 (+3.76%)
Mutual labels:  webpack, mobile, app, template
Mobile App Landingpage Template
📱 Free to use static generated website template for your mobile app
Stars: ✭ 208 (-47.87%)
Mutual labels:  webpack, mobile, template
App Framework
Applications for any device with HTML, CSS and JavaScript - free and open source!
Stars: ✭ 639 (+60.15%)
Mutual labels:  framework7, app, material
Framework7 Cli
Framework7 command line utility
Stars: ✭ 76 (-80.95%)
Mutual labels:  framework7, mobile, app
Frontend Boilerplate
An ES20XX starter with common frontend tasks using Webpack 4 as module bundler and npm scripts as task runner.
Stars: ✭ 224 (-43.86%)
Mutual labels:  webpack, template
Create React App Material Typescript Redux
A ready to use boilerplate for starting big react projects
Stars: ✭ 257 (-35.59%)
Mutual labels:  material, template
Swiggyui
A Swiggy UI Clone Flutter App.
Stars: ✭ 258 (-35.34%)
Mutual labels:  app, template
Blueprint
Free, feature-rich, easily customizable Android dashboard for icon packs
Stars: ✭ 389 (-2.51%)
Mutual labels:  material, template
Vue Plugin Template
🚀 Solid foundation to start a Vue plugin with the best developer experience and a focus on performance
Stars: ✭ 189 (-52.63%)
Mutual labels:  webpack, template
Androidonboarder
A simple way to make a beauty onboarding experience (app intro or welcome screen) for your users.
Stars: ✭ 269 (-32.58%)
Mutual labels:  app, material
Frames
Free, feature-rich, easily customizable Android dashboard for wallpapers apps
Stars: ✭ 396 (-0.75%)
Mutual labels:  material, template
Angular Awesome List
Список ресурсов по Angular на русском
Stars: ✭ 224 (-43.86%)
Mutual labels:  webpack, material
Vue Element Starter
Vue starter with Element-UI [READY, unmaintained now]
Stars: ✭ 216 (-45.86%)
Mutual labels:  webpack, template
Tabs
The expense sharing app.
Stars: ✭ 259 (-35.09%)
Mutual labels:  mobile, app
Breathly App
A breathing training app built with React-Native
Stars: ✭ 284 (-28.82%)
Mutual labels:  mobile, app
Nat
A powerful kit for adding native functionalities to your weex app.
Stars: ✭ 294 (-26.32%)
Mutual labels:  mobile, app
Framework7
Full featured HTML framework for building iOS & Android apps
Stars: ✭ 16,560 (+4050.38%)
Mutual labels:  mobile, material
Bodyweight Fitness Android
Bodyweight Fitness (Android)
Stars: ✭ 297 (-25.56%)
Mutual labels:  mobile, app
Open Source Xamarin Apps
📱 Collaborative List of Open Source Xamarin Apps
Stars: ✭ 318 (-20.3%)
Mutual labels:  mobile, app

⛔️ DEPRECATED

This repo is deprecated and not mainted any more. Use Framework7-CLI instead. Please, don't open new issues and don't send any PRs to this repository

Framework7 Vue + Webpack App Template

A full-featured Framework7 Vue with Webpack setup with hot-reload & css extraction. Based on Vue Webpack Boilerplate

Usage

1. Download this repository

git clone https://github.com/framework7io/framework7-template-vue-webpack my-app

Repository will be downloaded into my-app/ folder

2. Instal dependencies

Go to the downloaded repository folder and run:

npm install

This will download latest version of Framework7, Framework7-Vue, Vue and required icon fonts (to /src/fonts/)

3. Run the app

npm run dev

App will be opened in browser at http://localhost:8080/

4. Build app for production

npm run build

The output will be at www/ folder

Use with cordova

Cordova is not enabled by default, so make sure to remove the comment tags around the <script src="cordova.js"></script> line in [projectroot]/src/index.html

<body>
  <div id="app"></div>

  <!-- Cordova -->

  <script src="cordova.js"></script>

  <!-- built script files will be auto injected -->
</body>

It will be added during the build process to Android/iOS.

Just put the contents of www folder in your cordova's project root www folder

One command install

git clone https://github.com/framework7io/framework7-template-vue-webpack my-app &&
cd my-app &&
npm install &&
npm run dev

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for development
npm run build-dev

# build for production with minification
npm run build-prod

Project Structure

  • src/index.html - main app HTML
  • src/assets - folder with static assets (images)
  • src/components - folder with custom .vue components
  • src/css - put custom app CSS styles here. Don't forget to import them in main.js
  • src/pages - app .vue pages
  • src/app.js - main app file where you include/import all required libs and init app
  • src/routes.js - app routes
  • src/app.vue - main app structure/component
  • /static/ - folder with extra static assets that will be copied into output folder
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].