framework7io / framework7-template-vue-webpack Goto Github PK

View Code? Open in Web Editor NEW

386.0 25.0 136.0 258 KB

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

Home Page: https://framework7.io/vue/

License: MIT License

JavaScript 40.26% HTML 5.99% Vue 45.45% CSS 8.30%

framework7 vuejs vue webpack mobile ios app material android template

framework7-template-vue-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 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

framework7-template-vue-webpack's People

Contributors

Stargazers

Watchers

Forkers

cuulee centrual jumplee henninghorn marwein josephmax liaohao1222 lemonadezz idcmardelplata kilho37 belinchung kerrishotts davigmacode richard-z-95 ameliepoulain92 mine1590 rvanzon enterstudio yijiaqingilm cloudlychee yuxxer sirceljm iamxiaoma cosmoiler wumingwei ekodedypurnomo laurocky linglong117 yanhuizen youhan1983 owmjess georgetassiano jpylypiw ywb1005 zoosky walterzou hohoyao valnub jethrowong brunocroh hupanfeng zhengzihang yunhor yu3ver kirinhuang xuyanjun999 0xsullivan zouyang2015 mdj20130907 xiyue0814 jeremyb1991 ankit-dave w3cui yingying8420 rahulyhg miayotlan fedyapetrenko tarklish jhonja93 iimmer tyson-marks29 normaneil astinone77 protongustave nabil-g bishallimbu ahmzyjazzy c-h-lin tiersept qhobeey touchrank-dev sunsern 294650171 uzlopak johnnyyanw flashbuffer xfront lovelydong alt-123 blockdev88 howq ndenys650 chenxu-javascript liuchaooo akandebolaji nailaojiang ipwnosx harimau99 cxiling snowdream hukai123 bamboo5 danielmoralesc dut3062796s qkdreyer czmole ultravail yevlee wlsgithub xymingjun

framework7-template-vue-webpack's Issues

Popup close link not work

Thanks of #1, #5，I got this project running now.

Another issue: the popup close button not work

<f7-link close-popup>Close</f7-link>

If I add the class manually, it works:

<f7-link close-popup class="close-popup">Close</f7-link>

suppose .! , i want to set about.vue to my default view rather than app.vue how to config router or i haven't know how to go any inner view to direct main page app.vue not using $router.back() function ?

npm run dev is very slow

npm run dev recompile project is very slow when change file

Q: Webpack 4

Since this is now the new cutting edge version, wouldn't it make sense to update the project to support Webpack 4?

From what I read, there are some breaking changes from v3 to v4 and I don't know how much work it is (I have yet to read the docs). But generally it would be great to have a really 'current' repository.

Any opinions?

cpy is not added in devDependencies

The package cpy is needed for the copy-fonts script that is executed on postinstall, but cpy is not added to the package.json.

npm install -g cpy-cli solves the problem.

i want to use vue-router

I would like to use vue-router to do navigation can be achieved
i try , but failed
console log && error info

[Vue warn]: Error in render function: "TypeError: Cannot read property 'matched' of undefined"

found in

---> <App> at F:\Work\GitHub\DTiT-FE-Mobile\src\App.vue
       <Root>
cl.error @ dtit.js?4f89:523
warn @ vue.esm.js?65d7:479
handleError @ vue.esm.js?65d7:562
Vue._render @ vue.esm.js?65d7:4130
updateComponent @ vue.esm.js?65d7:2538
get @ vue.esm.js?65d7:2881
Watcher @ vue.esm.js?65d7:2870
mountComponent @ vue.esm.js?65d7:2542
Vue$3.$mount @ vue.esm.js?65d7:7863
Vue$3.$mount @ vue.esm.js?65d7:10066
init @ vue.esm.js?65d7:3501
createComponent @ vue.esm.js?65d7:5147
createElm @ vue.esm.js?65d7:5090
patch @ vue.esm.js?65d7:5606
Vue._update @ vue.esm.js?65d7:2414
updateComponent @ vue.esm.js?65d7:2538
get @ vue.esm.js?65d7:2881
Watcher @ vue.esm.js?65d7:2870
mountComponent @ vue.esm.js?65d7:2542
Vue$3.$mount @ vue.esm.js?65d7:7863
Vue$3.$mount @ vue.esm.js?65d7:10066
Vue._init @ vue.esm.js?65d7:4236
Vue$3 @ vue.esm.js?65d7:4321
(anonymous) @ main.js?1c90:29
(anonymous) @ app.js:857
__webpack_require__ @ app.js:660
fn @ app.js:86
(anonymous) @ app.js:1229
__webpack_require__ @ app.js:660
(anonymous) @ app.js:709
(anonymous) @ app.js:712
dtit.js?4f89:523 TypeError: Cannot read property 'matched' of undefined
    at render (vue-router.esm.js?880d:68)
    at createFunctionalComponent (vue.esm.js?65d7:3459)
    at createComponent (vue.esm.js?65d7:3618)
    at _createElement (vue.esm.js?65d7:3797)
    at createElement (vue.esm.js?65d7:3736)
    at vm._c (vue.esm.js?65d7:4076)
    at Proxy.render (App.vue?4f33:107)
    at VueComponent.Vue._render (vue.esm.js?65d7:4128)
    at VueComponent.updateComponent (vue.esm.js?65d7:2538)
    at Watcher.get (vue.esm.js?65d7:2881)

my code:

//main.js
/* eslint-disable */
new Vue({
  el: '#app',
  router,
  template: '<app :title.sync="title"/>',
  // Init Framework7 by passing parameters here
  framework7: {
    root: '#app',
    /* Uncomment to enable Material theme: */
    // material: true,
    // routes
  },
  // Register App Component
  components: {
    app: App
  },
  data: {
    title: "APP Demo"
  }
});

Media List view

I want create a infinite scroll list view for the media items (songs). how to add songs storage path link to individual media item ?
I tried this but failed

<li> <a href="/item/" class="item-link"> <div class="item-content"> <div class="item-media"> <img src='image.jpg'> </div> <div class="item-inner"> <div class="item-title-row"> <div class="item-title">Item Title</div> <div class="item-after">Read more</div> </div> <div class="item-subtitle">Item Subtitle</div> <div class="item-text">Some text</div> </div> </div> </a> </li>

Please guide

SyntaxError: import declarations may only appear at top level of a module

Hi
I just installed though the instructions and this is what I get after running the dev server:
SyntaxError: import declarations may only appear at top level of a module

Any idea how to fix it?

Does`t work v-on on f7-timeline-item

Hi, Please help me. I have code:

<f7-timeline>
              <f7-timeline-item 
                  v-for="item in timeline"
                  :key="item"
                  :day="item.time" 
                  month="" 
                  inner 
                  :content="item.name"
                  v-on:click="clicked"
              ></f7-timeline-item>
</f7-timeline>

<script>
	export default {
		data() {
            return {
                loggin: true,
                timeline: [
                    {
                        id: 1,
                        time: '12:56',
                        name: '...'
                    },
                    ...
                    {
                        id: 2,
                        time: '12:56',
                        name: '...'
                    }
                ]
            };
        },
        methods: {
            clicked() {
                console.log('123');
            }
        }
	};
</script>

shasum check failed

npm ERR! shasum check failed for C:\Users\ICEFFFFF\AppData\Local\Temp\npm-3380-41d3a417\registry.npmjs.org\material-design-icons-\material-design-icons-3.0.1.tgz
npm ERR! Expected: 9a71c48747218ebca51e51a66da682038cdcb7bf
npm ERR! Actual: ed0ab22830538012444ff4213e52cd0224a693ab
npm ERR! From: https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz

how to resolve this? i'd tried a 10 times and yet still got the problem.

window.f7 undefined in app.vue

new Vue({
  el: '#app',
  template: '<app/>',
  // Init Framework7 by passing parameters here
  framework7: {
    root: '#app',
    /* Uncomment to enable Material theme: */
    // material: true,
    routes: Routes,
  },
  // Register App Component
  components: {
    app: App
  }
});

Can i use the window.f7 in app.vue?
I want to define this app.vue as my home page,thank you.

plugin css usage issue

Hi,

have used a plugin for leaflet integration
https://www.npmjs.com/package/vue2-leaflet

but when we try to import css it's not showing image files as it creating wrong paths even if it converts it into inline images

so is there any option to skip plugin files from webpack merge or any other options to handle it.

One command install is NOT WORKING!

One command install

Hey @nolimits4web
I'm trying to install it with following command:

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

But at last it is showing the following:

 ERROR  Failed to compile with 8 errors                                                                                              7:32:07 PM

 error  in ./src/app.vue

Syntax Error: Unexpected token {


 @ ./src/main.js 21:0-24
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./src/pages/dynamic-route.vue

Syntax Error: Unexpected token {


 @ ./src/routes.js 4:0-57
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./src/pages/home.vue

Syntax Error: Unexpected token {


 @ ./src/routes.js 1:0-40
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./src/pages/about.vue

Syntax Error: Unexpected token {


 @ ./src/routes.js 2:0-42
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./src/pages/not-found.vue

Syntax Error: Unexpected token {

Screenshot:

Please help me to resolve this.

How to use Framewor7-Vue and Vue-Router in typescript

Hi, all:

I want to use Framework7-Vue and Typescirpt with Webpack. I initialize the Framework7-Vue as follow in the main.ts:

import * as Vue from 'vue'
import * as VueRouter from 'vue-router'

var Framework7 = require('framework7');

// Import F7 Vue Plugin
var Framework7Vue = require('framework7-vue');

// Import F7 iOS Theme Styles
import 'framework7/dist/css/framework7.ios.min.css'
import 'framework7/dist/css/framework7.ios.colors.min.css'

Vue.use(Framework7Vue);
Vue.use(VueRouter);

After compiled successfuly, there are some errors in the browser:

[Vue warn]: Error when rendering root instance:
warn @ app.bundle.js:2478
Vue._render @ app.bundle.js:4180
updateComponent @ app.bundle.js:4566
get @ app.bundle.js:4889
Watcher @ app.bundle.js:4881
Vue.mount @ app.bundle.js:4565
Vue$3.$mount @ app.bundle.js:8129
Vue$3.$mount @ app.bundle.js:10500
(anonymous) @ app.bundle.js:16284
webpack_require @ app.bundle.js:20
(anonymous) @ app.bundle.js:42307
webpack_require @ app.bundle.js:20
module.exports.ctor.super @ app.bundle.js:66
(anonymous) @ app.bundle.js:69

Uncaught TypeError: Cannot read property 'matched' of undefined
at render (app.bundle.js:13237)
at createFunctionalComponent (app.bundle.js:3641)
at createComponent (app.bundle.js:3595)
at _createElement (app.bundle.js:4083)
at createElement (app.bundle.js:4037)
at Proxy.vm._c (app.bundle.js:4135)
at Proxy.eval (eval at makeFunction (app.bundle.js:10433), :2:55)
at Vue$3.Vue._render (app.bundle.js:4173)
at Vue$3.updateComponent (app.bundle.js:4566)
at Watcher.get (app.bundle.js:4889)

I think this error is caused by the vue-router.
My questions:

How to disable the framework7 default router in the Framework7-Vue?
How to use the vue-router in the Framework7-vue with typescript?

Thanks a lot.

npm install, npm run dev = undefined

I'm getting undefined after default install.
Do I need to set up something to get first page working?

Cordova plugins not work

in my case
cordova add plugin theplugin
and npm run build or dev
plugin not work with error message when access Navigator
ex. camera plugin https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/index.html

$theme.material always false

After importing the framework7-material css and initializing f7 as such:

new Vue({
    ...
    framework7: {
        root: '#hub',
        material: true,
        routes: Routes,
        pushState: true,
    },
    ...
})

When using $theme.material in the views, it never evaluates correctly, and $theme.ios is true.

In any view: {{ $theme.ios ? 'iOS' : 'Material' }} <= iOS

framework7: ^1.6.4
framework7-vue: ^0.9.2
vue: ^2.2.4

项目结构和你说明文档没对上

src / components - 具有自定义.vue组件的文件夹

这个目录没有
src / assets - 具有静态资源的文件夹（图像）
　css　不是也放在assets目录下吗

can not load static folder files in dev mode

I copy a.js in static folder, add code
'<script src="static/a.js"></script>' in index.html.
and run 'npm run dev', open console panel in browser, it shows not found a.js

Uncaught ReferenceError: DOM7 is not defined

This error appears when framework7 is imported: Uncaught ReferenceError: dom7 is not defined.

I have verified that DOM7 is correctly in the framework7.js file, however for some reason the webpack ignores or loses the variable.

Webpack version 2.6.1

the result render undefined

I'm follow below scirpt to init an app to my local Mac

$ git clone https://github.com/nolimits4web/Framework7-Vue-Webpack-Template F7-Vue-Webpack-Demo
$ cd F7-Vue-Webpack-Demo
$ cnpm install
$ cnpm run dev

and got this error on browser:

<div class="panel panel-left panel-reveal layout-dark">undefined</div>
<div class="views">undefined</div>
....

how I can use the framwork7 plugins API in this project?

had check the f7+Vue doc support contact list via http://framework7.io/vue/contacts-list.html
but I want to add the index by f7 plugin like this: https://github.com/boynet/Framework7-Indexed-List-plugin

How I can use&add this plugin in the F7+Vue+Webpack+template?

Many Thanks! Wait for your help.

[Documentation] Assets put into src/assets are not copied over

Assets put in src/assets (as in documentation) are not copied to www.

There's a config/index.js though where we can manipulate the output.

assetsSubDirectory: 'static',

Maybe you should mention that in the docs (and fix the docs in this regard).

Documentation for use Framework7+Vue

Hi,

I'm new to this javascripts world with Framework7+Vue+Webpack development and I have difficult to understand which documentation i must read for app development.
For example in the template I have a form example page but how can I handling a button click and keep form data in my function on javascript?

npm run serve not working

cloned this repo

npm i
npm run serve // as per the readme.md

Error : Missing script serve

note : npm run dev is working

Update framework7-vue version inside package.json

Hello,

In package.json Framework7-Vue version is 0.7.0 and it throws errors like

[Vue warn]: existing instance property "dividerOrGroupTitle" will be overwritten by a computed property with the same name. 
(found in component <f7-list-item>)

please update to 0.7.2 for fix.

Note: Npm doesn't contains 0.7.2 version currently. Because of that, you need to update framework7-vue dependency to https://github.com/nolimits4web/Framework7-Vue-Webpack-Template.git manually.

Added package.json change to #6
Please check template folder.

[Vue warn]: "style" is a reserved attribute and cannot be used as component prop.

The warning display when open the Form Page.

How to make this template compatible to both platform?

Hi,
I'm looking forward for this template do support for both Android and iOS platform. With this compatibility, I can develop much powerful app with its dynamically.
Thanks! 😄

Refer: https://framework7.io/tutorials/maintain-both-ios-and-material-themes-in-single-app.html

JavaScript Heap Overflow

 WAIT  Compiling...                                                                                                                                     17:03:11

 95% emitting
<--- Last few GCs --->

[14396:000001B47770CD30] 16015683 ms: Mark-sweep 1391.5 (1422.3) -> 1391.5 (1422.8) MB, 128.2 / 0.0 ms  allocation failure GC in old space requested
[14396:000001B47770CD30] 16015814 ms: Mark-sweep 1391.5 (1422.8) -> 1391.5 (1413.8) MB, 131.5 / 0.0 ms  last resort GC in old space requested
[14396:000001B47770CD30] 16015950 ms: Mark-sweep 1391.5 (1413.8) -> 1391.5 (1413.8) MB, 135.4 / 0.0 ms  last resort GC in old space requested


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0000019927D25EE1 <JSObject>
    1: new constructor(aka Buffer) [buffer.js:~147] [pc=00000230102F9CD8](this=000000A18E91C181 <Buffer map = 000002D8A2CC20A9>,arg=000000A18E91C159 <Very long string[10762161]>,encodingOrOffset=0000019927D35CE1 <String[4]: utf8>,length=00000150E2102311 <undefined>)
    2: arguments adaptor frame: 2->3
    5: writeOut(aka writeOut) [D:\XXXXX\Src\XXXXX\XXXXX.Frontend\node_modules\webpack\...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: node_module_register
 2: v8::internal::FatalProcessOutOfMemory
 3: v8::internal::FatalProcessOutOfMemory
 4: v8::internal::Factory::NewRawTwoByteString
 5: v8::internal::Smi::SmiPrint
 6: v8::internal::AllocationSpaceName
 7: v8::String::WriteUtf8
 8: v8::internal::PagedSpace::SetUp
 9: node::Buffer::New
10: node::Buffer::New
11: 000002300FE7ABE6
npm ERR! code ELIFECYCLE
npm ERR! errno 3
npm ERR! [email protected] dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 3
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\jckod\AppData\Roaming\npm-cache\_logs\2018-04-24T20_03_13_314Z-debug.log

packages.json:

{
	"name": "framework7-template-vue-webpack",
	"version": "2.0.0",
	"description": "Framework7 Vue Webpack starter app template",
	"scripts": {
		"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
		"start": "npm run dev",
		"build": "node build/build.js",
		"copy-fonts": "cpy node_modules/material-design-icons/iconfont/*.{eot,ttf,woff,woff2} src/fonts",
		"postinstall": "npm run copy-fonts"
	},
	"repository": {
		"type": "git",
		"url": "git+https://github.com/framework7io/framework7-template-vue-webpack.git"
	},
	"keywords": [
		"ios",
		"webpack",
		"framework7",
		"vue",
		"vuejs",
		"material",
		"mobile",
		"app",
		"f7"
	],
	"author": "Vladimir Kharlampidi",
	"license": "MIT",
	"bugs": {
		"url": "https://github.com/framework7io/framework7-template-vue-webpack/issues"
	},
	"homepage": "http://framework7.io/vue/",
	"dependencies": {
		"axios": "^0.18.0",
		"crypto-js": "^3.1.9-1",
		"framework7": "^2.2.1",
		"framework7-vue": "^2.2.1",
		"lscache": "^1.1.0",
		"lz-string": "^1.4.4",
		"nprogress": "^0.2.0",
		"v-money": "^0.8.1",
		"vue": "^2.5.16",
		"vue-the-mask": "^0.11.1",
		"vue-timeago": "^3.4.4",
		"vue-toasted": "^1.1.24",
		"vuex": "^3.0.1",
		"material-design-icons": "^3.0.1"
	},
	"devDependencies": {
		"autoprefixer": "^8.3.0",
		"babel-core": "^6.22.1",
		"babel-helper-vue-jsx-merge-props": "^2.0.3",
		"babel-loader": "^7.1.4",
		"babel-plugin-syntax-jsx": "^6.18.0",
		"babel-plugin-transform-runtime": "^6.22.0",
		"babel-plugin-transform-vue-jsx": "^3.7.0",
		"babel-preset-env": "^1.3.2",
		"babel-preset-stage-2": "^6.22.0",
		"chalk": "^2.4.0",
		"copy-webpack-plugin": "^4.5.0",
		"cpy": "^6.0.0",
		"cpy-cli": "^1.0.1",
		"css-loader": "^0.28.11",
		"extract-text-webpack-plugin": "^3.0.0",
		"file-loader": "^1.1.11",
		"friendly-errors-webpack-plugin": "^1.7.0",
		"html-webpack-plugin": "^3.2.0",
		"node-notifier": "^5.1.2",
		"node-sass": "^4.8.3",
		"optimize-css-assets-webpack-plugin": "^3.2.0",
		"ora": "^1.4.0",
		"portfinder": "^1.0.13",
		"postcss-import": "^11.1.0",
		"postcss-loader": "^2.1.4",
		"postcss-url": "^7.3.2",
		"rimraf": "^2.6.0",
		"sass-loader": "^6.0.7",
		"semver": "^5.3.0",
		"shelljs": "^0.7.6",
		"uglifyjs-webpack-plugin": "^1.2.5",
		"url-loader": "^1.0.1",
		"vue-loader": "^14.2.2",
		"vue-style-loader": "^4.1.0",
		"vue-template-compiler": "^2.5.16",
		"webpack": "^3.11.0",
		"webpack-bundle-analyzer": "^2.11.1",
		"webpack-dev-server": "^2.11.2",
		"webpack-merge": "^4.1.2"
	},
	"engines": {
		"node": ">= 6.0.0",
		"npm": ">= 3.0.0"
	},
	"browserslist": [
		"> 1%",
		"last 2 versions",
		"not ie <= 8"
	]
}

framework7-icons npm package is not working in this webpack template

After npm install framework7-icons --save, the icons are not available in both dev and build env.
Only default icons (e.g. <f7-link icon="icon-bars" open-panel="left"></f7-link>) works properly.

<f7-icon f7="refresh"></f7-icon> fails to show up. (display blank only)

I am wondering whether it is related to the webpack font copying process. I need some advices to fix this. Meanwhile I manually copy the framework7-icons source to my app source to make things work.

How to separate the style file into the formation of on-demand loading may be better

hi，
How to separate the style file into the formation of on-demand loading may be better
or not like this
import Framework7Theme from 'framework7/dist/css/framework7.ios.min.css'
import Framework7ThemeColors from 'framework7/dist/css/framework7.ios.colors.min.css'

this.$router.load(...) undefined in app.vue

Hello Vladimir and Framework7 community,

@Cyber-host opened issue about that at caiobiodere/cordova-template-framework7-vue-webpack#3

I tried same thing in webpack template and it not worked in webpack template too. i checked this object in with console.log and there is no router component.

Have a great day!

How to show page by url

For example, How to show about page when i visit url like http://mydomain/#/about/ .

f7-input v-model issue

I am facing issue with v-model in f7-input. Below is the error that I am getting "Invalid prop: type check failed for prop "value". Expected String, Number, Array, got InputEvent."

Steps to reproduce

Download framework7-template-vue-webpack
Install npm packages with "npm install"
Edit about.vue page to add below input element
Add script block to about.vue as below

Run the app and navigate to about page, we get the value in textbox as "[object InputEvent]" and in the console window it gives "Invalid prop: type check failed for prop "value". Expected String, Number, Array, got InputEvent." eror

swiper not working

                            for (var i = 0; i < rs.data.banners.length; i++) {
                                homeIndexVue.banners.push(rs.data.banners[i]);
                            }
                            Vue.nextTick(function() { //异步更新队列
                                console.log(homeIndexVue.banners);
                                new Swiper('.banner', {
                                    pagination: '.swiper-pagination',
                                    loop: true,
                                    autoplay: 3000,
                                });

                            });

when i try to use this code to finish a swiper, it just show me one picture, swiper not working.How can i change the code?thank you

Not Working On Android4.4.4 Device In Cordova

follow the steps and copy www to cordova project
cordova add android
cordova run android
the app view freeze after my first click,and there is no error in console;

framework7 npm package hasn't contains .min.css files in dist/css folder

Hello,

When you install framework7 with npm install framework7 framework7 dist/css folder hasn't minified css files.

Framework7-Vue-Webpack-Template/src/main.js

// Import F7 iOS Theme Styles
import Framework7Theme from 'framework7/dist/css/framework7.ios.min.css'
import Framework7ThemeColors from 'framework7/dist/css/framework7.ios.colors.min.css'
/* OR for Material Theme:
import Framework7Theme from 'framework7/dist/css/framework7.material.min.css'
import Framework7ThemeColors from 'framework7/dist/css/framework7.material.colors.min.css'
*/

must change to:

// Import F7 iOS Theme Styles
import Framework7Theme from 'framework7/dist/css/framework7.ios.css'
import Framework7ThemeColors from 'framework7/dist/css/framework7.ios.colors.css'
/* OR for Material Theme:
import Framework7Theme from 'framework7/dist/css/framework7.material.css'
import Framework7ThemeColors from 'framework7/dist/css/framework7.material.colors.css'
*/

How to install cordova plugins?

Hi everyone, so I just downloaded this starter template. So far everything is good, however, I would like to know if it's possible to install cordova plugins and how to install them in this starter template.

I tried installing them normally opening the directory of my project in the terminal and using:
cordova plugin add my-plugin

But I get the following error:
Error: Current working directory is not a Cordova-based project..

Any help is greatly appreciated! :)

Unexpected token import

I downloaded this template and ran npm install as well as npm run dev.

When the browser starts, I see a blank page and this error message in console:

The error seems to occur here in main.js:

So, first I thought something was wrong with transpiling ES6 to ES5 in the bundled app.js but it looks fine: app.js.zip

What's going on?

Using Node v6.2.0

vue-cli · ENOENT

after the command -

vue init framework7io/Framework7-Vue-Webpack-Template test

result is :

  vue-cli · ENOENT: no such file or directory, scandir 'C:\Users\{username}\.vue-templates\framework7io-Framework7-Vue-Webpack-Template\template'

any ideas ? ....

Lazy loading pages

In router, some pages that are loaded later in the app, I try to load like this for webpack optimization.
const HomePage = resolve => require(['./HomePage.vue'], resolve);
Instead of
const HomePage from './HomePage.vue';
These pages work but just not the first time they are accessed. Any idea how I could fix this?
Probably useful for not just me!

vue router async

How to use in framework7 - vue routing webpack asynchronous loading components

Has an example with webpack4 ?

the "Left panel" do not disapeared

i clone to local and just run .

use material theme.

and i got this ....

the "Left panel " do not disapeared.

it is not problem in ios theme.

please help !!!

Hot reloading issue

Pull this repo
npm install
npm run dev
Open app.vue
Change WELCOME TO MY APP to something else: works as intended
Change js: page is reloaded and is now blank (I have to F5 to reload it manually)

Log says only app.js:30 XHR finished loading: GET "http://localhost:8080/5a71d1bfb73baa7d2efc.hot-update.json

Left panel do not close

Testing this template inside cordova and run on Android device 6.0.1 (and emulator). Cannot close left or right panel by click on the central main page. Cannot open pages like About. Material mode and css enabled.

All that mentioned works fine in browser mode, and on ios emulator.

Install fails via vue-cli

I tried to install the template via vue-cli but didn't work:

$ vue init nolimits4web/Framework7-Vue-Webpack-Template mytest
vue-cli · ENOENT: no such file or directory, scandir '/var/folders/7s/qrv4cn4d6xv0t350mzb0wl2m0000gn/T/vue-template-3f402w9/template'

If I do the same with my own template, it works.

Using latest vue version 2.6.0 here.

Is vue-cli not supported? I thought this template is based on the Vue Webpack Boilterplate and should thus work with vue-cli.

vue-style-loader useable not working

import HomeCityStyles from 'style-loader/useable!css-loader!../../css/home/city.css'

ERROR in ./~/.0.25.0@css-loader!./~/.1.0.0@vue-style-loader!./~/.0.25.0@css-loader!./src/css/home/city.css
Module build failed: Unknown word (5:1)

  3 | // load the styles
  4 | var content = require("!!../../../node_modules/.0.25.0@css-loader/index.js!./city.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
    | ^
  6 | // add the styles to the DOM
  7 | var update = require("!../../../node_modules/.1.0.0@vue-style-loader/addStyles.js")(content, {});
  8 | if(content.locals) module.exports = content.locals;

 @ ./~/.0.15.0@style-loader/useable.js!./~/.0.25.0@css-loader!./src/css/home/city.css 3:14-192
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  1.47 MB       0
webpack: Failed to compile.

how do i use router.beforeEach in F7-VUE?

router.beforeEach

framework7io / framework7-template-vue-webpack Goto Github PK

framework7-template-vue-webpack's Introduction

⛔️ DEPRECATED

Framework7 Vue + Webpack App Template

Usage

1. Download this repository

2. Instal dependencies

3. Run the app

4. Build app for production

Use with cordova

One command install

Build Setup

Project Structure

framework7-template-vue-webpack's People

Contributors

Stargazers

Watchers

Forkers

framework7-template-vue-webpack's Issues

Screenshot:

packages.json:

Recommend Projects

Recommend Topics

Recommend Org