├── template ├── src │ ├── pages │ │ ├── home │ │ │ ├── home.css │ │ │ ├── home.js │ │ │ └── home.html │ │ ├── index │ │ │ ├── index.css │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── message │ │ │ ├── message.css │ │ │ ├── message.js │ │ │ └── message.html │ │ └── person │ │ │ ├── person.css │ │ │ ├── person.js │ │ │ └── person.html │ ├── assets │ │ └── img │ │ │ ├── home.png │ │ │ ├── message.png │ │ │ ├── person.png │ │ │ ├── home-active.png │ │ │ ├── message-active.png │ │ │ └── person-active.png │ └── common │ │ ├── js │ │ ├── app.js │ │ └── dom.js │ │ └── css │ │ └── app.css ├── .gitignore ├── static │ ├── lib │ │ ├── fonts │ │ │ └── mui.ttf │ │ ├── css │ │ │ └── mui.min.css │ │ └── js │ │ │ └── mui.min.js │ └── manifest.json ├── postcss.config.js ├── template.js ├── vendor.config.json ├── template.html ├── package.json └── gulpfile.js ├── README.md ├── package.json ├── LICENSE └── meta.js /template/src/pages/home/home.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /template/src/pages/index/index.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /template/src/pages/message/message.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /template/src/pages/person/person.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /template/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ -------------------------------------------------------------------------------- /template/src/assets/img/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-html5plus/vue-html5plus-template/HEAD/template/src/assets/img/home.png -------------------------------------------------------------------------------- /template/static/lib/fonts/mui.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-html5plus/vue-html5plus-template/HEAD/template/static/lib/fonts/mui.ttf -------------------------------------------------------------------------------- /template/src/assets/img/message.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-html5plus/vue-html5plus-template/HEAD/template/src/assets/img/message.png -------------------------------------------------------------------------------- /template/src/assets/img/person.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-html5plus/vue-html5plus-template/HEAD/template/src/assets/img/person.png -------------------------------------------------------------------------------- /template/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('postcss-cssnext'), 4 | require('postcss-import') 5 | ] 6 | } -------------------------------------------------------------------------------- /template/src/assets/img/home-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-html5plus/vue-html5plus-template/HEAD/template/src/assets/img/home-active.png -------------------------------------------------------------------------------- /template/src/assets/img/message-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-html5plus/vue-html5plus-template/HEAD/template/src/assets/img/message-active.png -------------------------------------------------------------------------------- /template/src/assets/img/person-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue-html5plus/vue-html5plus-template/HEAD/template/src/assets/img/person-active.png -------------------------------------------------------------------------------- /template/template.js: -------------------------------------------------------------------------------- 1 | new Vue({ 2 | el: '#app', 3 | data: { 4 | 5 | }, 6 | plusReady () { 7 | 8 | }, 9 | methods: { 10 | 11 | } 12 | }) -------------------------------------------------------------------------------- /template/src/pages/person/person.js: -------------------------------------------------------------------------------- 1 | new Vue({ 2 | el: '#app', 3 | data: { 4 | 5 | }, 6 | plusReady () { 7 | 8 | }, 9 | methods: { 10 | 11 | } 12 | }) -------------------------------------------------------------------------------- /template/src/pages/message/message.js: -------------------------------------------------------------------------------- 1 | new Vue({ 2 | el: '#app', 3 | data: { 4 | 5 | }, 6 | plusReady () { 7 | 8 | }, 9 | methods: { 10 | 11 | } 12 | }) -------------------------------------------------------------------------------- /template/vendor.config.json: -------------------------------------------------------------------------------- 1 | [ 2 | "node_modules/vue/dist/vue.min.js", 3 | "node_modules/babel-polyfill/dist/polyfill.min.js", 4 | "node_modules/vue-html5plus/lib/vue-html5plus.js" 5 | ] -------------------------------------------------------------------------------- /template/src/common/js/app.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | const loadHTML = (response) => { 3 | let code = document.createElement('code') 4 | code.innerHTML = response 5 | return code 6 | } 7 | 8 | window.app = { 9 | loadHTML 10 | }; 11 | })(window); 12 | 13 | -------------------------------------------------------------------------------- /template/src/common/css/app.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --white: #fff; 3 | --grey: #1e1e1d; 4 | --yellow: #ffad15; 5 | --offwhite: #f8f8f8; 6 | --red: #ff0000; 7 | --appColor: #26a2ff; 8 | } 9 | .mui-bar.mui-bar-nav { 10 | background-color: var(--appColor); 11 | box-shadow: none; 12 | } 13 | .mui-bar.mui-bar-nav .mui-title, 14 | .mui-bar.mui-bar-nav .mui-icon { 15 | color: #fff; 16 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-html5plus-template 2 | 3 | A template for building App with vue.js and html5plus. 4 | 5 | ## Usage 6 | 7 | install vue-cli： 8 | 9 | ``` 10 | $ npm install -g vue-cli 11 | ``` 12 | 13 | download template： 14 | ``` 15 | $ vue init vue-html5plus/vue-html5plus-template my-project 16 | $ cd my-project 17 | $ npm install 18 | $ npm run start 19 | $ npm run dev 20 | ``` 21 | -------------------------------------------------------------------------------- /template/src/pages/home/home.js: -------------------------------------------------------------------------------- 1 | new Vue({ 2 | el: '#app', 3 | data: { 4 | city: '', 5 | networkType: '' 6 | }, 7 | plusReady () { 8 | // 获取定位信息 9 | this.$geolocation.getCurrentPosition().then((position) => { 10 | this.city = position.address.city; 11 | console.log(JSON.stringify(position)); 12 | }).catch((error) => { 13 | console.log(error); 14 | }); 15 | // 获取网络信息 16 | this.networkType = this.$networkinfo.getCurrentNetworkType(); 17 | console.log(this.networkType); 18 | }, 19 | mounted () { 20 | console.log(JSON.stringify(this.os)); 21 | } 22 | }) -------------------------------------------------------------------------------- /template/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /template/src/pages/person/person.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | person 16 |
17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /template/src/pages/message/message.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | message 16 |
17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-html5plus-template", 3 | "version": "1.0.0", 4 | "description": "A template for building App with vue.js and html5plus.", 5 | "main": "meta.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/plus-project/vue-html5plus-template.git" 12 | }, 13 | "keywords": [ 14 | "vue", 15 | "html5plus" 16 | ], 17 | "author": "zhaomenghuan", 18 | "license": "MIT", 19 | "bugs": { 20 | "url": "https://github.com/plus-project/vue-html5plus-template/issues" 21 | }, 22 | "homepage": "https://github.com/plus-project/vue-html5plus-template#readme" 23 | } 24 | -------------------------------------------------------------------------------- /template/src/pages/home/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
定位城市：\{{city}}
17 |
网络信息：\{{networkType}}
18 |
19 |
20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 小青年 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "helpers": { 3 | "if_or": function (v1, v2, options) { 4 | if (v1 || v2) { 5 | return options.fn(this); 6 | } 7 | return options.inverse(this); 8 | } 9 | }, 10 | "prompts": { 11 | "name": { 12 | "type": "string", 13 | "required": true, 14 | "message": "Project name" 15 | }, 16 | "appid": { 17 | "type": "string", 18 | "required": true, 19 | "message": "appid id" 20 | }, 21 | "version": { 22 | "type": "string", 23 | "required": false, 24 | "message": "Project version", 25 | "default": "1.0" 26 | }, 27 | "description": { 28 | "type": "string", 29 | "required": false, 30 | "message": "Project description", 31 | "default": "A Vue.js + html5plus project" 32 | }, 33 | "author": { 34 | "type": "string", 35 | "message": "Author" 36 | } 37 | }, 38 | "completeMessage": "To get started:\n\n {{^inPlace}}cd {{destDirName}}\n {{/inPlace}}npm install\n npm run start\n\n npm run dev\n\nDocumentation can be found at https://github.com/vue-html5plus/vue-html5plus-template" 39 | }; -------------------------------------------------------------------------------- /template/src/pages/index/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

\{{title}}

17 |
18 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /template/src/pages/index/index.js: -------------------------------------------------------------------------------- 1 | mui.init(); 2 | 3 | var currentWebview; 4 | 5 | new Vue({ 6 | el: '#app', 7 | data: { 8 | title: '首页', 9 | activeTab: 'home', 10 | styles: { 11 | top: '45px', 12 | bottom: '51px' 13 | }, 14 | tabs: [ 15 | {name: 'home', label: '首页', title: '首页'}, 16 | {name: 'message', label: '消息', title: '消息'}, 17 | {name: 'person', label: '我的', title: '个人中心'} 18 | ] 19 | }, 20 | filters: { 21 | srcHelper: function(value, activeTab) { 22 | value = (value === activeTab) ? value + '-active' : value; 23 | return `../../assets/img/${value}.png`; 24 | } 25 | }, 26 | plusReady () { 27 | currentWebview = plus.webview.getLaunchWebview(); 28 | this.creatView(this.activeTab); 29 | }, 30 | methods: { 31 | creatView (targetTab) { 32 | let targetUrl = `_www/pages/${targetTab}/${targetTab}.html`; 33 | let targetWebview = plus.webview.getWebviewById(targetTab); 34 | if(!targetWebview) { 35 | targetWebview = plus.webview.create(targetUrl, targetTab, this.styles); 36 | currentWebview.append(targetWebview); 37 | } 38 | targetWebview.show("fade-in", 300); 39 | }, 40 | changeView (targetTab, title) { 41 | if(targetTab == this.activeTab) return; 42 | this.creatView(targetTab); 43 | plus.webview.hide(this.activeTab); 44 | this.title = title; 45 | this.activeTab = targetTab; 46 | } 47 | } 48 | }) -------------------------------------------------------------------------------- /template/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-html5plus-template", 3 | "version": "1.0.0", 4 | "description": "A template for building App with vue.js and html5plus.", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "gulp init", 8 | "clean": "gulp clean", 9 | "dev": "cross-env NODE_ENV=development gulp", 10 | "build": "cross-env NODE_ENV=production gulp build" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/plus-templates/vue-html5plus-template.git" 15 | }, 16 | "keywords": [ 17 | "vuejs", 18 | "html5plus" 19 | ], 20 | "author": "zhaomenghuan", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/plus-templates/vue-html5plus-template/issues" 24 | }, 25 | "homepage": "https://github.com/plus-templates/vue-html5plus-template#readme", 26 | "devDependencies": { 27 | "babel-preset-env": "^1.5.2", 28 | "cross-env": "^5.0.1", 29 | "gulp": "^3.9.1", 30 | "gulp-babel": "^6.1.2", 31 | "gulp-cached": "^1.1.1", 32 | "gulp-concat": "^2.6.1", 33 | "gulp-eslint": "^4.0.0", 34 | "gulp-htmlmin": "^3.0.0", 35 | "gulp-if": "^2.0.2", 36 | "gulp-minify-css": "^1.2.4", 37 | "gulp-postcss": "^7.0.0", 38 | "gulp-remember": "^0.3.1", 39 | "gulp-strip-debug": "^1.1.0", 40 | "gulp-sync": "^0.1.4", 41 | "gulp-uglify": "^3.0.0", 42 | "gulp-watch": "^4.3.11", 43 | "postcss-cssnext": "^2.11.0", 44 | "postcss-import": "^10.0.0" 45 | }, 46 | "dependencies": { 47 | "babel-polyfill": "^6.23.0", 48 | "vue": "^2.3.4", 49 | "vue-html5plus": "^1.0.0" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /template/gulpfile.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const fs = require('fs'); 3 | const gulp = require('gulp'); 4 | const gulpsync = require('gulp-sync')(gulp); 5 | const watch = require('gulp-watch'); 6 | const eslint = require('gulp-eslint'); 7 | const uglify = require('gulp-uglify'); // 压缩代码 8 | const concat = require('gulp-concat'); // 合并文件 9 | const gulpif = require('gulp-if'); // 条件判断 10 | const stripDebug = require('gulp-strip-debug');// 删除日志 11 | const minifycss = require('gulp-minify-css'); // 压缩css 12 | const htmlmin = require('gulp-htmlmin'); 13 | const del = require("del"); // 删除文件 14 | const cached = require('gulp-cached'); 15 | const remember = require('gulp-remember'); 16 | const babel = require('gulp-babel'); 17 | const postcss = require('gulp-postcss'); 18 | 19 | // SOURCES CONFIG 20 | const source = { 21 | static: { 22 | src: './static/**/*', 23 | dist: './dist/' 24 | }, 25 | scripts: { 26 | src: './src/**/**/*.js', 27 | dist: './dist/' 28 | }, 29 | styles: { 30 | src: './src/**/**/*.css', 31 | dist: './dist/' 32 | }, 33 | htmls: { 34 | src: './src/**/**/*.html', 35 | dist: './dist/' 36 | }, 37 | assets: { 38 | src: './src/assets/**/*', 39 | dist: './dist/assets/' 40 | } 41 | }; 42 | 43 | // 编译 .js 文件 44 | function buildJS(src, dist) { 45 | gulp.src(src) 46 | .pipe(babel({ 47 | presets: ['env'] 48 | })) 49 | .pipe(gulpif(process.env.NODE_ENV === 'production', uglify())) 50 | .pipe(gulpif(process.env.NODE_ENV === 'production', stripDebug())) 51 | .pipe(gulp.dest(dist)); 52 | } 53 | 54 | // 编译 .css 文件 55 | function buildCSS(src, dist) { 56 | gulp.src(src) 57 | .pipe(postcss()) 58 | .pipe(gulpif(process.env.NODE_ENV === 'production', minifycss())) 59 | .pipe(gulp.dest(dist)); 60 | } 61 | 62 | // 压缩 .html 文件 63 | function buildHTML(src, dist) { 64 | gulp.src(src) 65 | .pipe(gulpif(process.env.NODE_ENV === 'production', htmlmin({ 66 | removeComments: true,//清除HTML注释 67 | collapseWhitespace: true,//压缩HTML 68 | collapseBooleanAttributes: true,//省略布尔属性的值 69 | removeEmptyAttributes: true,//删除所有空格作属性值 70 | removeScriptTypeAttributes: true,//删除