7 | 这里展示了多页面模块下放静态文件 8 |
9 | 10 |
14 | ├── dist ├── static │ ├── css │ │ ├── views │ │ │ ├── tools │ │ │ │ ├── bigimage.css │ │ │ │ ├── vuefilter.css │ │ │ │ ├── ajax.css │ │ │ │ └── getQuery.css │ │ │ ├── iconfont │ │ │ │ └── list.css │ │ │ ├── home │ │ │ │ └── list.css │ │ │ ├── vuxDemo │ │ │ │ ├── alert.css │ │ │ │ ├── calendar.css │ │ │ │ └── button.css │ │ │ └── router │ │ │ │ └── details.css │ │ └── vendor.css │ ├── img │ │ └── bg.jpg │ ├── fonts │ │ ├── iconfont.eot │ │ ├── iconfont.ttf │ │ └── iconfont.woff │ └── js │ │ └── views │ │ ├── tools │ │ ├── bigimage.js │ │ ├── vuefilter.js │ │ ├── ajax.js │ │ └── getQuery.js │ │ ├── home │ │ └── list.js │ │ ├── vuxDemo │ │ ├── alert.js │ │ ├── button.js │ │ └── calendar.js │ │ └── router │ │ └── details.js └── views │ ├── home │ └── list.html │ ├── tools │ ├── ajax.html │ ├── bigimage.html │ ├── getQuery.html │ └── vuefilter.html │ ├── iconfont │ └── list.html │ ├── vuxDemo │ ├── alert.html │ ├── button.html │ └── calendar.html │ └── router │ └── details.html ├── config ├── prod.env.js ├── test.env.js ├── dev.env.js └── index.js ├── src ├── assets │ ├── font │ │ ├── iconfont.eot │ │ ├── iconfont.ttf │ │ └── iconfont.woff │ ├── js │ │ ├── vueFilter.js │ │ ├── conf.js │ │ ├── Lib.js │ │ └── common.js │ └── css │ │ └── common.css ├── views │ ├── tools │ │ ├── bigimage │ │ │ ├── assets │ │ │ │ └── bg.jpg │ │ │ ├── bigimage.js │ │ │ ├── bigimage.html │ │ │ └── bigimageApp.vue │ │ ├── ajax │ │ │ ├── ajax.js │ │ │ ├── ajax.html │ │ │ └── ajaxApp.vue │ │ ├── getQuery │ │ │ ├── getQuery.js │ │ │ ├── getQuery.html │ │ │ └── getQueryApp.vue │ │ └── vuefilter │ │ │ ├── vuefilter.js │ │ │ ├── vuefilter.html │ │ │ └── vuefilterApp.vue │ ├── home │ │ └── list │ │ │ ├── list.js │ │ │ ├── list.html │ │ │ └── listApp.vue │ ├── vuxDemo │ │ ├── button │ │ │ ├── button.js │ │ │ ├── button.html │ │ │ └── buttonApp.vue │ │ ├── calendar │ │ │ ├── calendar.js │ │ │ ├── calendar.html │ │ │ └── calendarApp.vue │ │ └── alert │ │ │ ├── alert.js │ │ │ ├── alert.html │ │ │ └── alertApp.vue │ ├── iconfont │ │ └── list │ │ │ ├── list.js │ │ │ └── list.html │ └── router │ │ └── details │ │ ├── details.html │ │ ├── details.js │ │ ├── listApp.vue │ │ └── addApp.vue └── components │ ├── ~tpl.vue │ ├── HbHead.vue │ └── Hello.vue ├── test ├── unit │ ├── .eslintrc │ ├── specs │ │ └── Hello.spec.js │ ├── index.js │ └── karma.conf.js └── e2e │ ├── specs │ └── test.js │ ├── custom-assertions │ └── elementCount.js │ ├── runner.js │ └── nightwatch.conf.js ├── .gitignore ├── .postcssrc.js ├── .babelrc ├── index.html ├── package.json └── README.md /dist/static/css/views/tools/bigimage.css: -------------------------------------------------------------------------------- 1 | img{max-width:100%} -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /dist/static/css/views/tools/vuefilter.css: -------------------------------------------------------------------------------- 1 | .filterBox p{padding:10px;font-size:20px;text-align:center} -------------------------------------------------------------------------------- /dist/static/img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bluefox1688/vue-cli-multi-page/HEAD/dist/static/img/bg.jpg -------------------------------------------------------------------------------- /src/assets/font/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bluefox1688/vue-cli-multi-page/HEAD/src/assets/font/iconfont.eot -------------------------------------------------------------------------------- /src/assets/font/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bluefox1688/vue-cli-multi-page/HEAD/src/assets/font/iconfont.ttf -------------------------------------------------------------------------------- /dist/static/fonts/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bluefox1688/vue-cli-multi-page/HEAD/dist/static/fonts/iconfont.eot -------------------------------------------------------------------------------- /dist/static/fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bluefox1688/vue-cli-multi-page/HEAD/dist/static/fonts/iconfont.ttf -------------------------------------------------------------------------------- /dist/static/fonts/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bluefox1688/vue-cli-multi-page/HEAD/dist/static/fonts/iconfont.woff -------------------------------------------------------------------------------- /src/assets/font/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bluefox1688/vue-cli-multi-page/HEAD/src/assets/font/iconfont.woff -------------------------------------------------------------------------------- /src/views/tools/bigimage/assets/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bluefox1688/vue-cli-multi-page/HEAD/src/views/tools/bigimage/assets/bg.jpg -------------------------------------------------------------------------------- /src/views/home/list/list.js: -------------------------------------------------------------------------------- 1 | 2 | import Vue from 'vue' 3 | import App from './listApp' 4 | 5 | new Vue({ 6 | render: h => h(App) 7 | }).$mount('#app') 8 | -------------------------------------------------------------------------------- /test/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true 4 | }, 5 | "globals": { 6 | "expect": true, 7 | "sinon": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/views/vuxDemo/button/button.js: -------------------------------------------------------------------------------- 1 | 2 | import Vue from 'vue' 3 | import App from './buttonApp' 4 | 5 | new Vue({ 6 | render: h => h(App) 7 | }).$mount('#app') 8 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var devEnv = require('./dev.env') 3 | 4 | module.exports = merge(devEnv, { 5 | NODE_ENV: '"testing"' 6 | }) 7 | -------------------------------------------------------------------------------- /src/views/tools/ajax/ajax.js: -------------------------------------------------------------------------------- 1 | 2 | import Vue from 'vue' 3 | import App from './ajaxApp' 4 | 5 | 6 | 7 | new Vue({ 8 | render: h => h(App) 9 | }).$mount('#app') 10 | -------------------------------------------------------------------------------- /src/views/vuxDemo/calendar/calendar.js: -------------------------------------------------------------------------------- 1 | 2 | import Vue from 'vue' 3 | import App from './calendarApp' 4 | 5 | 6 | new Vue({ 7 | render: h => h(App) 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /src/views/iconfont/list/list.js: -------------------------------------------------------------------------------- 1 | 2 | import Vue from 'vue' 3 | import App from './listApp' 4 | 5 | 6 | 7 | new Vue({ 8 | render: h => h(App) 9 | }).$mount('#app') 10 | -------------------------------------------------------------------------------- /src/views/vuxDemo/alert/alert.js: -------------------------------------------------------------------------------- 1 | 2 | import Vue from 'vue' 3 | import App from './alertApp' 4 | 5 | 6 | 7 | new Vue({ 8 | render: h => h(App) 9 | }).$mount('#app') 10 | -------------------------------------------------------------------------------- /src/views/tools/bigimage/bigimage.js: -------------------------------------------------------------------------------- 1 | 2 | import Vue from 'vue' 3 | import App from './bigimageApp' 4 | 5 | 6 | 7 | new Vue({ 8 | render: h => h(App) 9 | }).$mount('#app') 10 | -------------------------------------------------------------------------------- /src/views/tools/getQuery/getQuery.js: -------------------------------------------------------------------------------- 1 | 2 | import Vue from 'vue' 3 | import App from './getQueryApp' 4 | 5 | 6 | 7 | new Vue({ 8 | render: h => h(App) 9 | }).$mount('#app') 10 | -------------------------------------------------------------------------------- /src/views/tools/vuefilter/vuefilter.js: -------------------------------------------------------------------------------- 1 | 2 | import Vue from 'vue' 3 | import App from './vuefilterApp' 4 | 5 | 6 | 7 | new Vue({ 8 | render: h => h(App) 9 | }).$mount('#app') 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | yarn-error.log 5 | test/unit/coverage 6 | test/e2e/reports 7 | selenium-debug.log 8 | 备份/ 9 | ~tpl/ 10 | .project 11 | .gitignore -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserlist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /dist/static/css/views/iconfont/list.css: -------------------------------------------------------------------------------- 1 | .markdown{overflow:hidden}.markdown li{float:left;width:25%;height:100px;text-align:center}.markdown li .icon{font-size:28px}.markdown li .name{font-size:12px;padding:10px 0}.markdown li .code{font-size:12px} -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }], 4 | "stage-2" 5 | ], 6 | "plugins": ["transform-runtime"], 7 | "comments": false, 8 | "env": { 9 | "test": { 10 | "presets": ["env", "stage-2"], 11 | "plugins": [ "istanbul" ] 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/views/home/list/list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 |7 | 这里展示了多页面模块下放静态文件 8 |
9 | 10 |
14 | 7 | 这里展示了多页面全局过滤器的用法,在 /src/assets/js/vueFilter.js 注册全局过滤器,方便全局调用。 8 |
9 | 10 |16 | {{4546.2222|currency}} 17 |
18 | 19 |21 | {{168|currency('$',0)}} 22 |
23 |25 | {{2172.356258598|currency('$',4)}} 26 |
27 | 28 |7 | 这里展示获取多页面的url参数 8 |
9 | 10 |7 | 这里展示了使用axios获取数据,axios已封装,方便快捷使用,封装参数与jq ajax基本一致,减少学习成本。 8 |
9 | 10 |这里仅展示几个VUE UI的demo,更多组件demo请访问vux UI官网,官网地址:https://vux.li
17 |