• This repository has been archived on 07/Oct/2019
  • Stars
    star
    384
  • Rank 111,726 (Top 3 %)
  • Language Vue
  • License
    MIT License
  • Created almost 8 years ago
  • Updated about 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

⛔️ 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

More Repositories

1

framework7

Full featured HTML framework for building iOS & Android apps
JavaScript
18,045
star
2

framework7-vue

Deprecated! Build full featured iOS & Android apps using Framework7 & Vue
Vue
674
star
3

framework7-icons

Free iOS-icons font for Framework7
HTML
205
star
4

framework7-website

Framework7 website for contributing and offline usage
JavaScript
160
star
5

framework7-template-react

Deprecated! Framework7 React starter app template with hot-reload & css extraction
JavaScript
107
star
6

framework7-appstore-react

iOS App Store UI
JavaScript
91
star
7

framework7-cli

Framework7 command line utility
JavaScript
89
star
8

framework7-template-vue-simple

Deprecated! Simple Framework7 Vue starter app template in a single HTML file
HTML
82
star
9

framework7-plugin-keypad

Keypad plugin extends Framework7 with additional custom keyboards
JavaScript
75
star
10

framework7-recipes

Framework7 proof of concept templates, layouts and scripts
HTML
68
star
11

ToDo7

Framework7 todo demo app
CSS
62
star
12

framework7-plugin-3d-panels

Framework7 plugin to add 3d effect for side panels
JavaScript
61
star
13

Weather7-Material

Framework7 weather demo app in Material style
JavaScript
49
star
14

framework7-template-tabs

Deprecated! Framework7 tabs (multiple views) starter app template
HTML
40
star
15

framework7-template-single-view

Deprecated! Framework7 single view starter app template
HTML
34
star
16

framework7-plugin-feeds

Framework7 Feeds plugin brings easy RSS feeds integration into Framework7 app.
JavaScript
33
star
17

Weather7

Framework7 weather demo app
CSS
29
star
18

framework7-nextjs-starter

JavaScript
26
star
19

framework7-template-webpack

Deprecated! Framework7 Vue Webpack starter app template with hot-reload & css extraction
HTML
24
star
20

framework7-template-vue-browserify

Depreacated! Framework7 Vue with Browserify starter app template with hot-reload & css extraction
Vue
21
star
21

framework7-template-split-view

Deprecated! Framework7 split view starter app template
HTML
19
star
22

framework7-react-static-template

A static JavaScript template for Framework7 React
JavaScript
13
star
23

framework7-loader

JavaScript
8
star
24

rollup-plugin-framework7

Rollup & Vite plugin to load Framework7 single file components
JavaScript
7
star
25

framework7-cli-template-tabs

Tabs template for Framework7 CLI
HTML
2
star
26

framework7-cli-template-singleview

Default Single View template for Framework7 CLI
HTML
2
star
27

framework7-cli-scripts

Framework7 CLI cordova hooks and scripts
JavaScript
1
star
28

.github

1
star
29

blog.framework7.io

JavaScript
1
star