Giter Site home page Giter Site logo

framework7io / framework7-template-webpack Goto Github PK

View Code? Open in Web Editor NEW
24.0 6.0 5.0 541 KB

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

Home Page: https://framework7.io/

License: MIT License

JavaScript 28.49% CSS 5.92% HTML 65.59%
framework7 mobile app ios webpack android material template

framework7-template-webpack's Introduction

⛔️ 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 Webpack App Template

A full-featured Framework7 with Webpack setup with hot-reload.

Usage

1. Download this repository

git clone https://github.com/framework7io/framework7-template-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 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-prod

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

framework7-template-webpack's People

Contributors

nolimits4web avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

framework7-template-webpack's Issues

HMR is not working

I make some change in the HTML, just some tiny thing and save.
The change is not getting actioned in the browser (webpack-dev-server) even when I am manually reload the page (http://localhost:8080/).

The change is only seen when aborting the dev server and starting it again.

在Safari运行demo报错

报以下错误:
TypeError: 'undefined' is not a function (evaluating 'Array.from({
length: 12
})')
Viewport argument key "minimal-ui" not recognized and ignored.
Viewport argument key "viewport-fit" not recognized and ignored.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.