├── README.md ├── generator ├── index.js └── template │ └── src │ ├── app.js │ ├── app.vue │ ├── css │ ├── app.css │ └── icons.css │ ├── index.html │ ├── pages │ ├── about.vue │ ├── dynamic-route.vue │ ├── form.vue │ ├── home.vue │ ├── not-found.vue │ ├── panel-left.vue │ └── panel-right.vue │ └── routes.js ├── index.js ├── logo.png ├── package-lock.json ├── package.json └── prompts.js /README.md: -------------------------------------------------------------------------------- 1 | # vue-cli-plugin-framework7 2 | 3 | Vue CLI 3 plugin for adding Framework7 support to project using framework7-vue. 4 | 5 | (Project forked from: https://github.com/NataliaTepluhina/vue-cli-plugin-rx) 6 | 7 | ## How to Use 8 | 9 | You need Vue CLI 3 installed globally as a pre-requisite. If you don't have it, please run 10 | 11 | ``` 12 | npm install -g @vue/cli 13 | ``` 14 | 15 | Create a new Project 16 | 17 | ``` 18 | vue create project-name 19 | ``` 20 | 21 | Enter insiede the directory project and install vue-cli-plugin-framework7 22 | 23 | ``` 24 | cd project-name 25 | ``` 26 | 27 | To add Framework7 support to your vue-cli-powered project, run the following command in the project root folder: 28 | 29 | ``` 30 | vue add framework7 31 | ``` 32 | 33 | You will be prompted to choose if you want to add the Framewor7 example application. 34 | 35 | If you pick `yes` option, the example application will replace the example Vue App in your project (attention, the framework7 package is about 165MB). 36 | 37 | Run 38 | 39 | ``` 40 | npm run serve 41 | ``` 42 | 43 | and browse to http://localhost:8080/ to test your new Vue Framework7 Boilerplate project. :-) 44 | 45 | 46 | ### Reference 47 | 48 | Project forked from: https://github.com/NataliaTepluhina/vue-cli-plugin-rx 49 | 50 | Framework7 Vue Documentation: http://framework7.io/vue 51 | 52 | Template converted from: https://github.com/framework7io/framework7-template-vue-webpack 53 | -------------------------------------------------------------------------------- /generator/index.js: -------------------------------------------------------------------------------- 1 | module.exports = (api, options, rootOptions) => { 2 | api.extendPackage({ 3 | dependencies: { 4 | "framework7": "^3.4.3", 5 | "framework7-vue": "^3.4.3", 6 | "material-design-icons": "^3.0.1", 7 | "framework7-icons": "^0.9.1" 8 | }, 9 | devDependencies: { 10 | "css-loader": "^1.0.0", 11 | "cpy-cli": "^2.0.0" 12 | }, 13 | scripts: { 14 | "copy-fonts": "cpy node_modules/framework7-icons/fonts/*.* src/fonts && cpy node_modules/material-design-icons/iconfont/*.{eot,ttf,woff,woff2} src/fonts", 15 | "postinstall": "npm run copy-fonts" 16 | } 17 | }); 18 | 19 | if (options.addExampleApplication) { 20 | api.render('./template', { 21 | ...options, 22 | }); 23 | } 24 | 25 | let f7LinesImport = `\n\nimport Framework7 from 'framework7/framework7.esm.bundle.js';\n\nimport Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle.js'\n`; 26 | 27 | let f7StyleImport = `// Import F7 Styles\nimport 'framework7/css/framework7.css';\n\n// Import Icons and App Custom Styles\nimport './css/icons.css';\nimport './css/app.css';\n` 28 | 29 | let f7LinesUse = `\nFramework7.use(Framework7Vue)\n`; 30 | 31 | 32 | 33 | api.onCreateComplete(() => { 34 | // inject to main.js 35 | const fs = require('fs'); 36 | const ext = api.hasPlugin('typescript') ? 'ts' : 'js'; 37 | const mainPath = api.resolve(`./src/main.${ext}`); 38 | 39 | // get content 40 | let contentMain = fs.readFileSync(mainPath, { encoding: 'utf-8' }); 41 | const lines = contentMain.split(/\r?\n/g).reverse(); 42 | 43 | // inject import 44 | const lastImportIndex = lines.findIndex(line => line.match(/^import/)); 45 | lines[lastImportIndex] += f7LinesImport + f7StyleImport+ f7LinesUse; 46 | 47 | // modify app 48 | contentMain = lines.reverse().join('\n'); 49 | fs.writeFileSync(mainPath, contentMain, { encoding: 'utf-8' }); 50 | }); 51 | }; 52 | -------------------------------------------------------------------------------- /generator/template/src/app.js: -------------------------------------------------------------------------------- 1 | // Import Vue 2 | import Vue from 'vue'; 3 | 4 | // Import F7 5 | import Framework7 from 'framework7/framework7.esm.bundle.js'; 6 | 7 | // Import F7 Vue Plugin 8 | import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle.js'; 9 | 10 | // Import F7 Styles 11 | import Framework7Styles from 'framework7/css/framework7.css'; 12 | 13 | // Import Icons and App Custom Styles 14 | import IconsStyles from './css/icons.css'; 15 | import AppStyles from './css/app.css'; 16 | 17 | // Import App Component 18 | import App from './app.vue'; 19 | 20 | // Init F7 Vue Plugin 21 | Framework7.use(Framework7Vue) 22 | 23 | // Init App 24 | new Vue({ 25 | el: '#app', 26 | template: '', 27 | 28 | // Register App Component 29 | components: { 30 | app: App 31 | } 32 | }); 33 | -------------------------------------------------------------------------------- /generator/template/src/app.vue: -------------------------------------------------------------------------------- 1 | 62 | 63 | 82 | -------------------------------------------------------------------------------- /generator/template/src/css/app.css: -------------------------------------------------------------------------------- 1 | /* Your app styles here */ -------------------------------------------------------------------------------- /generator/template/src/css/icons.css: -------------------------------------------------------------------------------- 1 | /* Material Icons Font (for MD theme) */ 2 | @font-face { 3 | font-family: 'Material Icons'; 4 | font-style: normal; 5 | font-weight: 400; 6 | src: url(../fonts/MaterialIcons-Regular.eot); /* For IE6-8 */ 7 | src: local('Material Icons'), 8 | local('MaterialIcons-Regular'), 9 | url(../fonts/MaterialIcons-Regular.woff2) format('woff2'), 10 | url(../fonts/MaterialIcons-Regular.woff) format('woff'), 11 | url(../fonts/MaterialIcons-Regular.ttf) format('truetype'); 12 | } 13 | 14 | .material-icons { 15 | font-family: 'Material Icons'; 16 | font-weight: normal; 17 | font-style: normal; 18 | font-size: 24px; /* Preferred icon size */ 19 | display: inline-block; 20 | line-height: 1; 21 | text-transform: none; 22 | letter-spacing: normal; 23 | word-wrap: normal; 24 | white-space: nowrap; 25 | direction: ltr; 26 | 27 | /* Support for all WebKit browsers. */ 28 | -webkit-font-smoothing: antialiased; 29 | /* Support for Safari and Chrome. */ 30 | text-rendering: optimizeLegibility; 31 | 32 | /* Support for Firefox. */ 33 | -moz-osx-font-smoothing: grayscale; 34 | 35 | /* Support for IE. */ 36 | font-feature-settings: 'liga'; 37 | } 38 | 39 | /* Framework7 Icons Font (for iOS theme) */ 40 | @font-face { 41 | font-family: 'Framework7 Icons'; 42 | font-style: normal; 43 | font-weight: 400; 44 | src: url("../fonts/Framework7Icons-Regular.eot"); 45 | src: url("../fonts/Framework7Icons-Regular.woff2") format("woff2"), 46 | url("../fonts/Framework7Icons-Regular.woff") format("woff"), 47 | url("../fonts/Framework7Icons-Regular.ttf") format("truetype"); 48 | } 49 | 50 | .f7-icons { 51 | font-family: 'Framework7 Icons'; 52 | font-weight: normal; 53 | font-style: normal; 54 | font-size: 25px; 55 | line-height: 1; 56 | letter-spacing: normal; 57 | text-transform: none; 58 | display: inline-block; 59 | white-space: nowrap; 60 | word-wrap: normal; 61 | direction: ltr; 62 | -webkit-font-smoothing: antialiased; 63 | text-rendering: optimizeLegibility; 64 | -moz-osx-font-smoothing: grayscale; 65 | -webkit-font-feature-settings: "liga"; 66 | -moz-font-feature-settings: "liga=1"; 67 | -moz-font-feature-settings: "liga"; 68 | font-feature-settings: "liga"; 69 | text-align: center; 70 | } 71 | -------------------------------------------------------------------------------- /generator/template/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | My App 22 | 23 | 24 | 25 |
26 | 27 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /generator/template/src/pages/about.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | -------------------------------------------------------------------------------- /generator/template/src/pages/dynamic-route.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /generator/template/src/pages/form.vue: -------------------------------------------------------------------------------- 1 | 103 | 104 | 107 | -------------------------------------------------------------------------------- /generator/template/src/pages/home.vue: -------------------------------------------------------------------------------- 1 | 52 | 55 | -------------------------------------------------------------------------------- /generator/template/src/pages/not-found.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /generator/template/src/pages/panel-left.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /generator/template/src/pages/panel-right.vue: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /generator/template/src/routes.js: -------------------------------------------------------------------------------- 1 | import HomePage from './pages/home.vue'; 2 | import AboutPage from './pages/about.vue'; 3 | import FormPage from './pages/form.vue'; 4 | import DynamicRoutePage from './pages/dynamic-route.vue'; 5 | import NotFoundPage from './pages/not-found.vue'; 6 | 7 | import PanelLeftPage from './pages/panel-left.vue'; 8 | import PanelRightPage from './pages/panel-right.vue'; 9 | 10 | export default [ 11 | { 12 | path: '/', 13 | component: HomePage, 14 | }, 15 | { 16 | path: '/panel-left/', 17 | component: PanelLeftPage, 18 | }, 19 | { 20 | path: '/panel-right/', 21 | component: PanelRightPage, 22 | }, 23 | { 24 | path: '/about/', 25 | component: AboutPage, 26 | }, 27 | { 28 | path: '/form/', 29 | component: FormPage, 30 | }, 31 | { 32 | path: '/dynamic-route/blog/:blogId/post/:postId/', 33 | component: DynamicRoutePage, 34 | }, 35 | { 36 | path: '(.*)', 37 | component: NotFoundPage, 38 | }, 39 | ]; 40 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = (api, opts) => {} -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etino/vue-cli-plugin-framework7/376e61399dd531619b371c4d8b87e9339fbff101/logo.png -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cli-plugin-framework7", 3 | "version": "0.1.0", 4 | "lockfileVersion": 1 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cli-plugin-framework7", 3 | "version": "0.1.0", 4 | "description": "Vue-cli 3 plugin for adding Framework7 support to project using framework7-vue", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/etino/vue-cli-plugin-framework7" 9 | }, 10 | "keywords": [ 11 | "vue", 12 | "vue-cli", 13 | "framework7", 14 | "framework7-vue" 15 | ], 16 | "author": "Stefano Giraldi ", 17 | "license": "MIT", 18 | "homepage": "https://github.com/etino/vue-cli-plugin-framework7#readme", 19 | "dependencies": {} 20 | } 21 | -------------------------------------------------------------------------------- /prompts.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | { 3 | name: `addExampleApplication`, 4 | type: 'confirm', 5 | message: 'Add Framework7 Vue Example Application?', 6 | default: false, 7 | }, 8 | ]; 9 | --------------------------------------------------------------------------------