├── static └── .gitkeep ├── src ├── modules │ ├── TableDemo │ │ ├── store │ │ │ ├── actions.js │ │ │ ├── mutations.js │ │ │ ├── logger.js │ │ │ └── index.js │ │ ├── Index.html │ │ ├── index.js │ │ ├── component │ │ │ ├── homeCpm.vue │ │ │ ├── baseTable.vue │ │ │ ├── easyTable.vue │ │ │ ├── eTColumnSort.vue │ │ │ ├── eTSpecialColumn.vue │ │ │ ├── eTFrozenColumns.vue │ │ │ ├── eTCustomizeColumn.vue │ │ │ ├── eTCheckBoxSelection.vue │ │ │ └── eTColumnGroup.vue │ │ ├── IndexCpm.vue │ │ ├── data │ │ │ └── DemoData.js │ │ └── router │ │ │ └── index.js │ ├── CarouselDemo │ │ ├── store │ │ │ ├── actions.js │ │ │ ├── mutations.js │ │ │ ├── logger.js │ │ │ └── index.js │ │ ├── index.html │ │ ├── index.js │ │ ├── component │ │ │ ├── homeCpm.vue │ │ │ ├── bootCarousel.vue │ │ │ └── vmaCarousel.vue │ │ ├── Index.vue │ │ └── router │ │ │ └── index.js │ ├── FormLoginDemo │ │ ├── store │ │ │ ├── actions.js │ │ │ ├── mutations.js │ │ │ ├── index.js │ │ │ └── logger.js │ │ ├── login.html │ │ ├── login.js │ │ ├── component │ │ │ ├── homeCpm.vue │ │ │ └── loginCpm.vue │ │ ├── formCpm.vue │ │ └── router │ │ │ └── index.js │ ├── OfficialDemo │ │ ├── store │ │ │ ├── actions.js │ │ │ ├── mutations.js │ │ │ ├── modules │ │ │ │ ├── StatesModule.js │ │ │ │ ├── MutationsModule.js │ │ │ │ ├── AdvanceModule.js │ │ │ │ ├── GettersModule.js │ │ │ │ ├── ExamplesModule.js │ │ │ │ └── ActionsModule.js │ │ │ ├── logger.js │ │ │ └── index.js │ │ ├── app.html │ │ ├── component │ │ │ ├── start │ │ │ │ ├── child_demo01.md │ │ │ │ ├── child_demo06.md │ │ │ │ ├── child_demo03.md │ │ │ │ ├── child_demo02.md │ │ │ │ ├── child_demo04.md │ │ │ │ ├── child_demo05.md │ │ │ │ ├── child_demo07.md │ │ │ │ └── index.vue │ │ │ ├── base │ │ │ │ ├── child_demo01.md │ │ │ │ ├── child_demo04.md │ │ │ │ ├── child_demo03.md │ │ │ │ ├── child_demo05.md │ │ │ │ ├── index.vue │ │ │ │ └── child_demo02.md │ │ │ ├── vuex │ │ │ │ ├── countApp.md │ │ │ │ ├── mapStateCpm.md │ │ │ │ ├── gettersCpm.md │ │ │ │ ├── mutationsCpm.md │ │ │ │ ├── modulesCpm.md │ │ │ │ ├── actionsCpm.md │ │ │ │ └── index.vue │ │ │ ├── vueResource │ │ │ │ ├── index.vue │ │ │ │ ├── jsonpResource.vue │ │ │ │ ├── GetResource.vue │ │ │ │ ├── postResource.vue │ │ │ │ ├── demoResource.md │ │ │ │ ├── putResource.vue │ │ │ │ └── deleteResource.vue │ │ │ ├── improve │ │ │ │ ├── transEffectCpm.md │ │ │ │ ├── nextTickCpm.md │ │ │ │ ├── index.vue │ │ │ │ └── transStateCpm.md │ │ │ ├── examples.vue │ │ │ ├── advance.vue │ │ │ ├── home.vue │ │ │ └── DemoBox.vue │ │ ├── app.js │ │ ├── app.vue │ │ └── router │ │ │ └── index.js │ └── PopupsDemo │ │ ├── store │ │ ├── actions.js │ │ ├── mutations.js │ │ ├── logger.js │ │ └── index.js │ │ ├── index.html │ │ ├── index.js │ │ ├── component │ │ ├── homeCpm.vue │ │ ├── alertCpm.vue │ │ └── modalCpm.vue │ │ ├── IndexCpm.vue │ │ └── router │ │ └── index.js ├── assets │ ├── logo.png │ ├── fonts │ │ ├── iconfont.eot │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ ├── glyphicons-halflings-regular.eot │ │ ├── glyphicons-halflings-regular.ttf │ │ └── glyphicons-halflings-regular.woff │ ├── css │ │ ├── table.css │ │ ├── hljs.css │ │ └── Common.css │ └── js │ │ └── common │ │ ├── util.js │ │ ├── utils.js │ │ └── carousel.js ├── components │ ├── Common │ │ ├── liCpm_01.vue │ │ ├── vError.vue │ │ ├── vPopover.vue │ │ ├── vCarousel.vue │ │ ├── vLoading.vue │ │ ├── vAlert.vue │ │ ├── vTable.vue │ │ ├── vLogin.vue │ │ ├── vModal.vue │ │ └── vCarousel_A.vue │ └── Hello.vue ├── router │ └── index.js ├── main.js └── App.vue ├── .eslintignore ├── config ├── prod.env.js ├── test.env.js ├── dev.env.js └── index.js ├── 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 ├── .editorconfig ├── .postcssrc.js ├── index.html ├── .gitignore ├── .babelrc ├── .eslintrc.js ├── package.json └── README.md /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/modules/TableDemo/store/actions.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/modules/CarouselDemo/store/actions.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/modules/CarouselDemo/store/mutations.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/modules/FormLoginDemo/store/actions.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/store/actions.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/store/mutations.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/modules/PopupsDemo/store/actions.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/modules/PopupsDemo/store/mutations.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/modules/TableDemo/store/mutations.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/modules/FormLoginDemo/store/mutations.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | src/assets/js/**/*.js -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhoou/vue-cli-multipage-bootstrap/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/fonts/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhoou/vue-cli-multipage-bootstrap/HEAD/src/assets/fonts/iconfont.eot -------------------------------------------------------------------------------- /src/assets/fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhoou/vue-cli-multipage-bootstrap/HEAD/src/assets/fonts/iconfont.ttf -------------------------------------------------------------------------------- /src/assets/fonts/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhoou/vue-cli-multipage-bootstrap/HEAD/src/assets/fonts/iconfont.woff -------------------------------------------------------------------------------- /test/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true 4 | }, 5 | "globals": { 6 | "expect": true, 7 | "sinon": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/assets/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhoou/vue-cli-multipage-bootstrap/HEAD/src/assets/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /src/assets/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhoou/vue-cli-multipage-bootstrap/HEAD/src/assets/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /src/assets/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhoou/vue-cli-multipage-bootstrap/HEAD/src/assets/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /src/modules/PopupsDemo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Popup Home 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /src/modules/TableDemo/Index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Table Home 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/modules/CarouselDemo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Carousel 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/components/Common/liCpm_01.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-cli-multipage-bootstrap2 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | test/unit/coverage 8 | test/e2e/reports 9 | selenium-debug.log 10 | 11 | # Editor directories and files 12 | .idea 13 | *.suo 14 | *.ntvs* 15 | *.njsproj 16 | *.sln 17 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import Hello from '@/components/Hello' 4 | 5 | Vue.use(Router) 6 | 7 | export default new Router({ 8 | routes: [ 9 | { 10 | path: '/', 11 | name: 'Hello', 12 | component: Hello 13 | } 14 | ] 15 | }) 16 | -------------------------------------------------------------------------------- /src/components/Common/vError.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /src/modules/FormLoginDemo/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | vue Learn 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue2 Learn 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/store/modules/StatesModule.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/11/30. 3 | */ 4 | const StatesModule = { 5 | state: { 6 | count: 0 7 | }, 8 | mutations: { 9 | increment: state => state.count++, 10 | decrement: state => state.count-- 11 | }, 12 | actions: {}, 13 | getters: {} 14 | } 15 | 16 | export default StatesModule 17 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/store/modules/MutationsModule.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/11/30. 3 | */ 4 | const MutationsModule = { 5 | state: { 6 | result: 1 7 | }, 8 | mutations: { 9 | Calculation (state, payload) { 10 | state.result = 1 + payload.num 11 | } 12 | }, 13 | actions: {}, 14 | getters: {} 15 | } 16 | 17 | export default MutationsModule 18 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-runtime"], 12 | "env": { 13 | "test": { 14 | "presets": ["env", "stage-2"], 15 | "plugins": ["istanbul"] 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /test/unit/specs/Hello.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Hello from '@/components/Hello' 3 | 4 | describe('Hello.vue', () => { 5 | it('should render correct contents', () => { 6 | const Constructor = Vue.extend(Hello) 7 | const vm = new Constructor().$mount() 8 | expect(vm.$el.querySelector('.hello h1').textContent) 9 | .to.equal('Welcome to Your Vue.js App') 10 | }) 11 | }) 12 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/start/child_demo01.md: -------------------------------------------------------------------------------- 1 | ::: demo 采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统 2 | 3 | ``` html 4 | 9 | 19 | ``` 20 | ::: 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import router from './router' 6 | 7 | Vue.config.productionTip = false 8 | 9 | /* eslint-disable no-new */ 10 | new Vue({ 11 | el: '#app', 12 | router, 13 | template: '', 14 | components: { App } 15 | }) 16 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/store/modules/AdvanceModule.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/12/5. 3 | */ 4 | const AdvanceModule = { 5 | state: { 6 | title: '', 7 | Lists: [ 8 | {pname: 'TableHome', text: '实现table的各种复杂功能', url: '/tablehome.html'}, 9 | {pname: '......', text: '敬请期待 please stay tuned !', url: ''} 10 | ] 11 | }, 12 | getters: {}, 13 | mutations: {}, 14 | actions: {} 15 | } 16 | 17 | export default AdvanceModule 18 | -------------------------------------------------------------------------------- /src/modules/FormLoginDemo/store/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/11/28. 3 | */ 4 | import Vue from 'vue' 5 | import Vuex from 'vuex' 6 | 7 | Vue.use(Vuex) 8 | 9 | const store = new Vuex.Store({ 10 | // plugins: [logger], 11 | state: { 12 | title: 'Vue2.0 从入门到精通效果展示', 13 | urlItems: [ 14 | {linkTo: '/home', name: 'Home'}, 15 | {linkTo: '/logindemo', name: 'Login Demo'} 16 | ] 17 | } 18 | }) 19 | 20 | export default store 21 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/start/child_demo06.md: -------------------------------------------------------------------------------- 1 | ::: demo v-model 指令，它使得在表单输入和应用状态中做双向数据绑定 2 | 3 | ``` html 4 | 10 | 11 | 21 | ``` 22 | ::: -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/start/child_demo03.md: -------------------------------------------------------------------------------- 1 | ::: demo v-if 控制切换一个元素的显示 2 | 3 | ``` html 4 | 10 | 11 | 22 | ``` 23 | ::: -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | 14 | 24 | -------------------------------------------------------------------------------- /src/modules/CarouselDemo/store/logger.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/11/30. 3 | */ 4 | import createLogger from 'vuex/dist/logger' 5 | 6 | const logger = createLogger({ 7 | collapsed: false, // 自动展开记录的 mutation 8 | transformer (state) { 9 | // 在开始记录之前转换状态 10 | // 例如，只返回指定的子树 11 | return state.subTree 12 | }, 13 | mutationTransformer (mutation) { 14 | // mutation 按照 { type, payload } 格式记录 15 | // 我们可以按任意方式格式化 16 | return mutation.type 17 | } 18 | }) 19 | 20 | export default logger 21 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/store/logger.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/11/30. 3 | */ 4 | import createLogger from 'vuex/dist/logger' 5 | 6 | const logger = createLogger({ 7 | collapsed: false, // 自动展开记录的 mutation 8 | transformer (state) { 9 | // 在开始记录之前转换状态 10 | // 例如，只返回指定的子树 11 | return state.subTree 12 | }, 13 | mutationTransformer (mutation) { 14 | // mutation 按照 { type, payload } 格式记录 15 | // 我们可以按任意方式格式化 16 | return mutation.type 17 | } 18 | }) 19 | 20 | export default logger 21 | -------------------------------------------------------------------------------- /src/modules/PopupsDemo/store/logger.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/11/30. 3 | */ 4 | import createLogger from 'vuex/dist/logger' 5 | 6 | const logger = createLogger({ 7 | collapsed: false, // 自动展开记录的 mutation 8 | transformer (state) { 9 | // 在开始记录之前转换状态 10 | // 例如，只返回指定的子树 11 | return state.subTree 12 | }, 13 | mutationTransformer (mutation) { 14 | // mutation 按照 { type, payload } 格式记录 15 | // 我们可以按任意方式格式化 16 | return mutation.type 17 | } 18 | }) 19 | 20 | export default logger 21 | -------------------------------------------------------------------------------- /src/modules/TableDemo/store/logger.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/11/30. 3 | */ 4 | import createLogger from 'vuex/dist/logger' 5 | 6 | const logger = createLogger({ 7 | collapsed: false, // 自动展开记录的 mutation 8 | transformer (state) { 9 | // 在开始记录之前转换状态 10 | // 例如，只返回指定的子树 11 | return state.subTree 12 | }, 13 | mutationTransformer (mutation) { 14 | // mutation 按照 { type, payload } 格式记录 15 | // 我们可以按任意方式格式化 16 | return mutation.type 17 | } 18 | }) 19 | 20 | export default logger 21 | -------------------------------------------------------------------------------- /src/modules/FormLoginDemo/store/logger.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/11/30. 3 | */ 4 | import createLogger from 'vuex/dist/logger' 5 | 6 | const logger = createLogger({ 7 | collapsed: false, // 自动展开记录的 mutation 8 | transformer (state) { 9 | // 在开始记录之前转换状态 10 | // 例如，只返回指定的子树 11 | return state.subTree 12 | }, 13 | mutationTransformer (mutation) { 14 | // mutation 按照 { type, payload } 格式记录 15 | // 我们可以按任意方式格式化 16 | return mutation.type 17 | } 18 | }) 19 | 20 | export default logger 21 | -------------------------------------------------------------------------------- /src/modules/CarouselDemo/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/12/7. 3 | */ 4 | import Vue from 'vue' 5 | import 'assets/css/bootstrap.min.css' 6 | import 'assets/css/Common.css' 7 | 8 | import IndexCpm from './Index.vue' 9 | import store from './store' 10 | import router from './router' 11 | 12 | import util from 'jspath/common/util' 13 | 14 | Vue.prototype.utilHelper = util 15 | 16 | /* eslint-disable*/ 17 | new Vue({ 18 | el: '#carousel', 19 | store, 20 | router, 21 | render: page => page(IndexCpm) 22 | }) -------------------------------------------------------------------------------- /src/modules/PopupsDemo/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/12/6. 3 | */ 4 | import Vue from 'vue' 5 | import 'assets/css/bootstrap.min.css' 6 | import 'assets/css/Common.css' 7 | 8 | import IndexCpm from './IndexCpm.vue' 9 | import store from './store' 10 | import router from './router' 11 | 12 | import util from 'jspath/common/util' 13 | 14 | Vue.prototype.utilHelper = util 15 | 16 | /* eslint-disable*/ 17 | new Vue({ 18 | el: '#popuphome', 19 | store, 20 | router, 21 | render: page => page(IndexCpm) 22 | }) -------------------------------------------------------------------------------- /src/modules/OfficialDemo/store/modules/GettersModule.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/11/30. 3 | */ 4 | const GettersModule = { 5 | state: { 6 | todos: [ 7 | {id: 1, text: 'vue', done: true}, 8 | {id: 2, text: 'vue-router', done: false}, 9 | {id: 3, text: 'vuex', done: true} 10 | ] 11 | }, 12 | getters: { 13 | doneTodosCount (state) { 14 | return state.todos.filter(item => item.done) 15 | } 16 | }, 17 | mutations: {}, 18 | actions: {} 19 | } 20 | 21 | export default GettersModule 22 | -------------------------------------------------------------------------------- /test/unit/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | Vue.config.productionTip = false 4 | 5 | // require all test files (files that ends with .spec.js) 6 | const testsContext = require.context('./specs', true, /\.spec$/) 7 | testsContext.keys().forEach(testsContext) 8 | 9 | // require all src files except main.js for coverage. 10 | // you can also change this to match only the subset of files that 11 | // you want coverage for. 12 | const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/) 13 | srcContext.keys().forEach(srcContext) 14 | -------------------------------------------------------------------------------- /src/modules/TableDemo/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/11/30. 3 | */ 4 | import Vue from 'vue' 5 | import 'assets/css/bootstrap.min.css' 6 | import 'assets/css/Common.css' 7 | import 'assets/css/table.css' 8 | 9 | import IndexCpm from './IndexCpm.vue' 10 | import store from './store' 11 | import router from './router' 12 | 13 | import util from 'jspath/common/util' 14 | 15 | Vue.prototype.utilHelper = util 16 | 17 | /* eslint-disable*/ 18 | new Vue({ 19 | el: '#tablehome', 20 | store, 21 | router, 22 | render: page => page(IndexCpm) 23 | }) -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/start/child_demo02.md: -------------------------------------------------------------------------------- 1 | ::: demo 除了绑定插入的文本内容，我们还可以采用这样的方式绑定 DOM 元素属性 2 | 3 | ``` html 4 | 11 | 12 | 22 | ``` 23 | ::: -------------------------------------------------------------------------------- /src/modules/PopupsDemo/store/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/11/28. 3 | */ 4 | import Vue from 'vue' 5 | import Vuex from 'vuex' 6 | // import logger from './logger' // 记录日志 ：logger 插件会生成状态快照，所以仅在开发环境使用。 7 | 8 | Vue.use(Vuex) 9 | 10 | const store = new Vuex.Store({ 11 | // plugins: [logger], 12 | state: { 13 | title: 'Vue2.0 Pop-ups Space 弹框空间走廊', 14 | urlItems: [ 15 | {linkTo: '/home', name: 'Home'}, 16 | {linkTo: '/alertDemo', name: 'Alert 弹窗'}, 17 | {linkTo: '/modalDemo', name: 'Modal 弹窗'} 18 | ] 19 | }, 20 | modules: { 21 | 22 | } 23 | }) 24 | 25 | export default store 26 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/start/child_demo04.md: -------------------------------------------------------------------------------- 1 | ::: demo v-for 指令绑定数据到数据来渲染一个列表 2 | 3 | ``` html 4 | 13 | 14 | 28 | ``` 29 | ::: 30 | -------------------------------------------------------------------------------- /src/assets/css/table.css: -------------------------------------------------------------------------------- 1 | .vtb_toptitle h1{ 2 | text-align: center; 3 | font-weight: bold; 4 | color: #333; 5 | height: 30px; 6 | line-height: 30px; 7 | font-size: 18px; 8 | } 9 | .vtb_title th{ 10 | text-align: center; 11 | } 12 | .vtb_logo{ 13 | width: 18px; 14 | } 15 | .vtb_pager { 16 | padding-left: 0; 17 | margin: 5px 0; 18 | text-align: center; 19 | list-style: none; 20 | } 21 | .vtb_pager li { 22 | display: inline; 23 | } 24 | .vtb_pager li>a, .vtb_pager li>span { 25 | display: inline-block; 26 | padding: 5px 14px; 27 | background-color: #fff; 28 | border: 1px solid #ddd; 29 | border-radius: 15px; 30 | } 31 | -------------------------------------------------------------------------------- /src/modules/FormLoginDemo/login.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/12/14. 3 | */ 4 | 5 | import Vue from 'vue' 6 | import 'assets/css/bootstrap.min.css' 7 | import 'assets/css/Common.css' 8 | 9 | import formCpm from './formCpm' 10 | import store from './store' 11 | import router from './router' 12 | 13 | import util from 'jspath/common/util' 14 | 15 | Vue.prototype.utilHelper = util 16 | 17 | /* eslint-disable*/ 18 | new Vue({ 19 | el: '#login', 20 | store, 21 | router, 22 | render: page => page(formCpm), 23 | http: { 24 | header: { 25 | 'Content-Type': 'application/json' 26 | } 27 | } 28 | }) -------------------------------------------------------------------------------- /src/modules/OfficialDemo/app.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/11/24. 3 | */ 4 | import Vue from 'vue' 5 | import 'assets/css/bootstrap.min.css' 6 | import 'assets/css/Common.css' 7 | import 'assets/css/hljs.css' 8 | 9 | import VApp from './app.vue' 10 | import store from './store' 11 | import router from './router' 12 | 13 | import util from 'jspath/common/util' 14 | 15 | Vue.prototype.utilHelper = util 16 | 17 | import demoBox from './component/DemoBox.vue' 18 | Vue.component('demo-box', demoBox) 19 | 20 | /* eslint-disable no-new */ 21 | new Vue({ 22 | el: '#app', 23 | store, 24 | router, 25 | render: page => page(VApp) 26 | }) 27 | -------------------------------------------------------------------------------- /test/e2e/specs/test.js: -------------------------------------------------------------------------------- 1 | // For authoring Nightwatch tests, see 2 | // http://nightwatchjs.org/guide#usage 3 | 4 | module.exports = { 5 | 'default e2e tests': function (browser) { 6 | // automatically uses dev Server port from /config.index.js 7 | // default: http://localhost:8080 8 | // see nightwatch.conf.js 9 | const devServer = browser.globals.devServerURL 10 | 11 | browser 12 | .url(devServer) 13 | .waitForElementVisible('#app', 5000) 14 | .assert.elementPresent('.hello') 15 | .assert.containsText('h1', 'Welcome to Your Vue.js App') 16 | .assert.elementCount('img', 1) 17 | .end() 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/start/child_demo05.md: -------------------------------------------------------------------------------- 1 | ::: demo v-on 指令绑定一个监听事件用于调用我们 Vue 实例中定义的方法 2 | 3 | ``` html 4 | 10 | 11 | 26 | ``` 27 | ::: 28 | -------------------------------------------------------------------------------- /src/modules/TableDemo/component/homeCpm.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 28 | -------------------------------------------------------------------------------- /src/modules/CarouselDemo/store/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/11/28. 3 | */ 4 | import Vue from 'vue' 5 | import Vuex from 'vuex' 6 | // import logger from './logger' // 记录日志 ：logger 插件会生成状态快照，所以仅在开发环境使用。 7 | 8 | Vue.use(Vuex) 9 | 10 | const store = new Vuex.Store({ 11 | // plugins: [logger], 12 | state: { 13 | title: 'Vue2.0 Carousel Space 轮播空间走廊', 14 | urlItems: [ 15 | {linkTo: '/home', name: 'Home'}, 16 | {linkTo: '/bootstrapDemo', name: 'Bootstrap 轮播'}, 17 | {linkTo: '/vmaDemo', name: '轮播：类型A'}, 18 | {linkTo: '/vmbDemo', name: '轮播：类型B'}, 19 | {linkTo: '/vmcDemo', name: '轮播：类型C'} 20 | ] 21 | } 22 | }) 23 | 24 | export default store 25 | -------------------------------------------------------------------------------- /src/modules/FormLoginDemo/component/homeCpm.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 28 | -------------------------------------------------------------------------------- /src/modules/PopupsDemo/component/homeCpm.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 28 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/base/child_demo01.md: -------------------------------------------------------------------------------- 1 | ::: demo 在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。任何复杂逻辑应当使用计算属性。 2 | 3 | ``` html 4 | 10 | 11 | 28 | ``` 29 | ::: 30 | -------------------------------------------------------------------------------- /src/modules/CarouselDemo/component/homeCpm.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 28 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // http://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parser: 'babel-eslint', 6 | parserOptions: { 7 | sourceType: 'module' 8 | }, 9 | env: { 10 | browser: true, 11 | }, 12 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 13 | extends: 'standard', 14 | // required to lint *.vue files 15 | plugins: [ 16 | 'html' 17 | ], 18 | // add your custom rules here 19 | 'rules': { 20 | // allow paren-less arrow functions 21 | 'arrow-parens': 0, 22 | // allow async-await 23 | 'generator-star-spacing': 0, 24 | // allow debugger during development 25 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/modules/FormLoginDemo/component/loginCpm.vue: -------------------------------------------------------------------------------- 1 | 9 | 30 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/vuex/countApp.md: -------------------------------------------------------------------------------- 1 | ::: demo 最基本的 Vuex 记数应用示例 2 | 3 | ``` html 4 | 13 | 14 | 32 | ``` 33 | ::: -------------------------------------------------------------------------------- /src/modules/OfficialDemo/store/modules/ExamplesModule.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/11/30. 3 | */ 4 | /* eslint-disable*/ 5 | const ExamplesModule = { 6 | state: { 7 | title: 'vue 小项目集锦', 8 | Lists: [ 9 | { pname: 'TableDemo', text: '实现table的各种复杂功能', url: '/tabledemo.html' }, 10 | { pname: 'PopupsDemo', text: '实现各种弹窗功能', url: '/popupsdemo.html' }, 11 | { pname: 'CarouselDemo', text: '各类实现轮播效果', url: '/carouseldemo.html' }, 12 | { pname: 'FormLoginDemo', text: '实现表单登陆功能', url: '/formlogindemo.html' }, 13 | { pname: '......', text: '敬请期待 please stay tuned !', url: '' } 14 | ] 15 | }, 16 | getters: {}, 17 | mutations: {}, 18 | actions: {} 19 | } 20 | 21 | export default ExamplesModule -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/vuex/mapStateCpm.md: -------------------------------------------------------------------------------- 1 | ::: demo Vuex mapState 2 | 3 | ``` html 4 | 13 | 14 | 32 | ``` 33 | ::: -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/vuex/gettersCpm.md: -------------------------------------------------------------------------------- 1 | ::: demo Vuex Getters 2 | 3 | ``` html 4 | 24 | 25 | 35 | ``` 36 | ::: 37 | -------------------------------------------------------------------------------- /test/e2e/custom-assertions/elementCount.js: -------------------------------------------------------------------------------- 1 | // A custom Nightwatch assertion. 2 | // the name of the method is the filename. 3 | // can be used in tests like this: 4 | // 5 | // browser.assert.elementCount(selector, count) 6 | // 7 | // for how to write custom assertions see 8 | // http://nightwatchjs.org/guide#writing-custom-assertions 9 | exports.assertion = function (selector, count) { 10 | this.message = 'Testing if element <' + selector + '> has count: ' + count 11 | this.expected = count 12 | this.pass = function (val) { 13 | return val === this.expected 14 | } 15 | this.value = function (res) { 16 | return res.value 17 | } 18 | this.command = function (cb) { 19 | var self = this 20 | return this.api.execute(function (selector) { 21 | return document.querySelectorAll(selector).length 22 | }, [selector], function (res) { 23 | cb.call(self, res) 24 | }) 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/start/child_demo07.md: -------------------------------------------------------------------------------- 1 | ::: demo v-bind 指令将 todo 传到每一个重复的组件中 2 | 3 | ``` html 4 | 13 | 14 | 35 | ``` 36 | ::: -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/vueResource/index.vue: -------------------------------------------------------------------------------- 1 | 11 | 36 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/improve/transEffectCpm.md: -------------------------------------------------------------------------------- 1 | ::: demo CSS 过渡和动画 ：transition 封装组件 2 | 3 | ``` html 4 | 14 | 15 | 25 | 26 | 40 | 41 | ``` 42 | ::: 43 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/base/child_demo04.md: -------------------------------------------------------------------------------- 1 | ::: demo 列表渲染：todo list 完整的例子 2 | 3 | ``` html 4 | 12 | 13 | 39 | ``` 40 | ::: -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/vuex/mutationsCpm.md: -------------------------------------------------------------------------------- 1 | ::: demo Vuex Mutations 2 | 3 | ``` html 4 | 14 | 15 | 40 | ``` 41 | ::: -------------------------------------------------------------------------------- /src/modules/FormLoginDemo/formCpm.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 34 | -------------------------------------------------------------------------------- /src/modules/PopupsDemo/IndexCpm.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 34 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/app.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 36 | -------------------------------------------------------------------------------- /src/modules/CarouselDemo/Index.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 36 | -------------------------------------------------------------------------------- /src/modules/FormLoginDemo/router/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/12/14. 3 | */ 4 | import Vue from 'vue' 5 | import VueRouter from 'vue-router' 6 | 7 | Vue.use(VueRouter) 8 | 9 | const homeCpm = r => require.ensure([], () => r(require('../component/homeCpm')), 'form_Home') 10 | const loginCpm = r => require.ensure([], () => r(require('../component/loginCpm')), 'form_Login') 11 | const errorCpm = r => require.ensure([], () => r(require('components/Common/vError')), 'error') 12 | 13 | const baseUrl = '' // 多页面路径配置 14 | 15 | const routes = [ 16 | {path: baseUrl + '/', redirect: baseUrl + '/home'}, 17 | {path: baseUrl + '/home', component: homeCpm}, 18 | {path: baseUrl + '/loginDemo', component: loginCpm}, 19 | {path: '*', component: errorCpm} 20 | ] 21 | 22 | const router = new VueRouter({ 23 | hashbang: true, // 将路径格式化为#!开头 24 | history: true, // use history=false when testing 25 | // mode: 'history', 26 | base: __dirname, 27 | linkActiveClass: 'v-link-active', 28 | routes // （缩写）相当于 routes: routes 29 | }) 30 | 31 | export default router 32 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/base/child_demo03.md: -------------------------------------------------------------------------------- 1 | ::: demo 绑定-HTML-Class 2 | 3 | ``` html 4 | 10 | 11 | 38 | ``` 39 | ::: 40 | 41 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/base/child_demo05.md: -------------------------------------------------------------------------------- 1 | ::: demo v-on 指令监听 DOM 事件来触发一些 JavaScript 代码 2 | 3 | ``` html 4 | 16 | 17 | 43 | ``` 44 | ::: -------------------------------------------------------------------------------- /test/unit/karma.conf.js: -------------------------------------------------------------------------------- 1 | // This is a karma config file. For more details see 2 | // http://karma-runner.github.io/0.13/config/configuration-file.html 3 | // we are also using it with karma-webpack 4 | // https://github.com/webpack/karma-webpack 5 | 6 | var webpackConfig = require('../../build/webpack.test.conf') 7 | 8 | module.exports = function (config) { 9 | config.set({ 10 | // to run in additional browsers: 11 | // 1. install corresponding karma launcher 12 | // http://karma-runner.github.io/0.13/config/browsers.html 13 | // 2. add it to the `browsers` array below. 14 | browsers: ['PhantomJS'], 15 | frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'], 16 | reporters: ['spec', 'coverage'], 17 | files: ['./index.js'], 18 | preprocessors: { 19 | './index.js': ['webpack', 'sourcemap'] 20 | }, 21 | webpack: webpackConfig, 22 | webpackMiddleware: { 23 | noInfo: true 24 | }, 25 | coverageReporter: { 26 | dir: './coverage', 27 | reporters: [ 28 | { type: 'lcov', subdir: '.' }, 29 | { type: 'text-summary' } 30 | ] 31 | } 32 | }) 33 | } 34 | -------------------------------------------------------------------------------- /src/modules/TableDemo/store/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/11/28. 3 | */ 4 | import Vue from 'vue' 5 | import Vuex from 'vuex' 6 | // import logger from './logger' // 记录日志 ：logger 插件会生成状态快照，所以仅在开发环境使用。 7 | 8 | Vue.use(Vuex) 9 | 10 | const store = new Vuex.Store({ 11 | // plugins: [logger], 12 | state: { 13 | title: 'Vue2.0 Table Space 表格空间', 14 | urlItems: [ 15 | {linkTo: '/home', name: 'Home'}, 16 | {linkTo: '/basetable', name: '基础篇: base'}, 17 | { 18 | linkTo: '/easytable', 19 | name: 'EasyTable', 20 | isDropdown: true, 21 | children: [ 22 | {linkTo: '/etbase', name: 'Base'}, 23 | {linkTo: '/columngroup', name: 'Column Group'}, 24 | {linkTo: '/frozencolumns', name: 'Frozen Columns'}, 25 | {linkTo: '/checkboxs', name: 'CheckBox Selection'}, 26 | {linkTo: '/columnsort', name: 'Column Sort'}, 27 | {linkTo: '/specialcolumn', name: 'Special Column'}, 28 | {linkTo: '/customizecolumn', name: 'Customize Column'} 29 | ] 30 | } 31 | ] 32 | }, 33 | getter: {} 34 | }) 35 | 36 | export default store 37 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/examples.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 39 | -------------------------------------------------------------------------------- /src/modules/CarouselDemo/component/bootCarousel.vue: -------------------------------------------------------------------------------- 1 | 13 | 41 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/store/modules/ActionsModule.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/11/30. 3 | */ 4 | import store from '../index' 5 | 6 | const ActionsModule = { 7 | state: { 8 | numOne: 0, 9 | numTwo: 0, 10 | result: '请输入结果哦！' 11 | }, 12 | mutations: { 13 | CalculationAsync (state, payload) { 14 | state.result = payload.answer === 'T' ? 'Good!' : 'Sorry!' 15 | }, 16 | ClearResult (state) { 17 | state.result = '' 18 | } 19 | }, 20 | // Action 提交的是 mutation，而不是直接变更状态。 21 | // Action 可以包含任意异步操作。 22 | actions: { 23 | clearResult: ({ commit }) => commit('ClearResult'), 24 | CalculationAsync ({ commit }, answer) { 25 | return store.dispatch('clearResult').then(() => { 26 | setTimeout(() => { 27 | commit('CalculationAsync', answer) 28 | }, 500) 29 | }) 30 | } 31 | }, 32 | // 可以认为是 store 的计算属性 33 | getters: { 34 | getNumOne: state => { 35 | return state.numOne + Math.floor(Math.random() * 10 + 1) 36 | }, 37 | getNumTwo: state => { 38 | return state.numTwo + Math.floor(Math.random() * 10 + 1) 39 | } 40 | } 41 | } 42 | 43 | export default ActionsModule 44 | -------------------------------------------------------------------------------- /src/modules/PopupsDemo/router/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/11/28. 3 | */ 4 | import Vue from 'vue' 5 | import VueRouter from 'vue-router' 6 | 7 | Vue.use(VueRouter) 8 | 9 | const homeCpm = r => require.ensure([], () => r(require('../component/homeCpm')), 'Popup_Home') 10 | const alertCpm = r => require.ensure([], () => r(require('../component/alertCpm')), 'Popup_alert') 11 | const modalCpm = r => require.ensure([], () => r(require('../component/modalCpm')), 'Popup_modal') 12 | const errorCpm = r => require.ensure([], () => r(require('components/Common/vError')), 'error') 13 | 14 | const baseUrl = '' // 多页面路径配置 15 | 16 | const routes = [ 17 | {path: baseUrl + '/', redirect: baseUrl + '/home'}, 18 | {path: baseUrl + '/home', component: homeCpm}, 19 | {path: baseUrl + '/alertDemo', component: alertCpm}, 20 | {path: baseUrl + '/modalDemo', component: modalCpm}, 21 | {path: '*', component: errorCpm} 22 | ] 23 | 24 | const router = new VueRouter({ 25 | hashbang: true, // 将路径格式化为#!开头 26 | history: true, // use history=false when testing 27 | // mode: 'history', 28 | base: __dirname, 29 | linkActiveClass: 'v-link-active', 30 | routes // （缩写）相当于 routes: routes 31 | }) 32 | 33 | export default router 34 | -------------------------------------------------------------------------------- /test/e2e/runner.js: -------------------------------------------------------------------------------- 1 | // 1. start the dev server using production config 2 | process.env.NODE_ENV = 'testing' 3 | var server = require('../../build/dev-server.js') 4 | 5 | server.ready.then(() => { 6 | // 2. run the nightwatch test suite against it 7 | // to run in additional browsers: 8 | // 1. add an entry in test/e2e/nightwatch.conf.json under "test_settings" 9 | // 2. add it to the --env flag below 10 | // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox` 11 | // For more information on Nightwatch's config file, see 12 | // http://nightwatchjs.org/guide#settings-file 13 | var opts = process.argv.slice(2) 14 | if (opts.indexOf('--config') === -1) { 15 | opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js']) 16 | } 17 | if (opts.indexOf('--env') === -1) { 18 | opts = opts.concat(['--env', 'chrome']) 19 | } 20 | 21 | var spawn = require('cross-spawn') 22 | var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' }) 23 | 24 | runner.on('exit', function (code) { 25 | server.close() 26 | process.exit(code) 27 | }) 28 | 29 | runner.on('error', function (err) { 30 | server.close() 31 | throw err 32 | }) 33 | }) 34 | -------------------------------------------------------------------------------- /test/e2e/nightwatch.conf.js: -------------------------------------------------------------------------------- 1 | require('babel-register') 2 | var config = require('../../config') 3 | 4 | // http://nightwatchjs.org/gettingstarted#settings-file 5 | module.exports = { 6 | src_folders: ['test/e2e/specs'], 7 | output_folder: 'test/e2e/reports', 8 | custom_assertions_path: ['test/e2e/custom-assertions'], 9 | 10 | selenium: { 11 | start_process: true, 12 | server_path: require('selenium-server').path, 13 | host: '127.0.0.1', 14 | port: 4444, 15 | cli_args: { 16 | 'webdriver.chrome.driver': require('chromedriver').path 17 | } 18 | }, 19 | 20 | test_settings: { 21 | default: { 22 | selenium_port: 4444, 23 | selenium_host: 'localhost', 24 | silent: true, 25 | globals: { 26 | devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port) 27 | } 28 | }, 29 | 30 | chrome: { 31 | desiredCapabilities: { 32 | browserName: 'chrome', 33 | javascriptEnabled: true, 34 | acceptSslCerts: true 35 | } 36 | }, 37 | 38 | firefox: { 39 | desiredCapabilities: { 40 | browserName: 'firefox', 41 | javascriptEnabled: true, 42 | acceptSslCerts: true 43 | } 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/modules/CarouselDemo/router/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/11/28. 3 | */ 4 | import Vue from 'vue' 5 | import VueRouter from 'vue-router' 6 | 7 | Vue.use(VueRouter) 8 | 9 | const homeCpm = r => require.ensure([], () => r(require('../component/homeCpm')), 'carousel_Home') 10 | const bootCarousel = r => require.ensure([], () => r(require('../component/bootCarousel')), 'carousel_boot') 11 | const vmaCarousel = r => require.ensure([], () => r(require('../component/vmaCarousel')), 'carousel_vma') 12 | const errorCpm = r => require.ensure([], () => r(require('components/Common/vError')), 'error') 13 | 14 | const baseUrl = '' // 多页面路径配置 15 | 16 | const routes = [ 17 | {path: baseUrl + '/', redirect: baseUrl + '/home'}, 18 | {path: baseUrl + '/home', component: homeCpm}, 19 | {path: baseUrl + '/bootstrapDemo', component: bootCarousel}, 20 | {path: baseUrl + '/vmaDemo', component: vmaCarousel}, 21 | {path: '*', component: errorCpm} 22 | ] 23 | 24 | const router = new VueRouter({ 25 | hashbang: true, // 将路径格式化为#!开头 26 | history: true, // use history=false when testing 27 | // mode: 'history', 28 | base: __dirname, 29 | linkActiveClass: 'v-link-active', 30 | routes // （缩写）相当于 routes: routes 31 | }) 32 | 33 | export default router 34 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/advance.vue: -------------------------------------------------------------------------------- 1 | 21 | 43 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/vuex/modulesCpm.md: -------------------------------------------------------------------------------- 1 | ::: demo Vuex Modules 2 | 3 | ``` html 4 | 19 | 20 | 45 | ``` 46 | ::: 47 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/vuex/actionsCpm.md: -------------------------------------------------------------------------------- 1 | ::: demo Vuex Actions 2 | 3 | ``` html 4 | 14 | 15 | 47 | ``` 48 | ::: 49 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/improve/nextTickCpm.md: -------------------------------------------------------------------------------- 1 | ::: demo 为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调在 DOM 更新完成后就会调用。 2 | 3 | ``` html 4 | 15 | 16 | 49 | ``` 50 | ::: 51 | -------------------------------------------------------------------------------- /src/modules/CarouselDemo/component/vmaCarousel.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 38 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/home.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 34 | 35 | 36 | 39 | -------------------------------------------------------------------------------- /src/assets/css/hljs.css: -------------------------------------------------------------------------------- 1 | .hljs { 2 | background: #333 !important; 3 | color: white; 4 | } 5 | 6 | .hljs-name, 7 | .hljs-strong { 8 | font-weight: bold; 9 | } 10 | 11 | .hljs-code, 12 | .hljs-emphasis { 13 | font-style: italic; 14 | } 15 | 16 | .hljs-tag { 17 | color: #62c8f3; 18 | } 19 | 20 | .hljs-variable, 21 | .hljs-template-variable, 22 | .hljs-selector-id, 23 | .hljs-selector-class { 24 | color: #ade5fc; 25 | } 26 | 27 | .hljs-string, 28 | .hljs-bullet { 29 | color: #a2fca2; 30 | } 31 | 32 | .hljs-type, 33 | .hljs-title, 34 | .hljs-section, 35 | .hljs-attribute, 36 | .hljs-quote, 37 | .hljs-built_in, 38 | .hljs-builtin-name { 39 | color: #ffa; 40 | } 41 | 42 | .hljs-number, 43 | .hljs-symbol, 44 | .hljs-bullet { 45 | color: #d36363; 46 | } 47 | 48 | .hljs-keyword, 49 | .hljs-selector-tag, 50 | .hljs-literal { 51 | color: #fcc28c; 52 | } 53 | 54 | .hljs-comment, 55 | .hljs-deletion, 56 | .hljs-code { 57 | color: #888; 58 | } 59 | 60 | .hljs-regexp, 61 | .hljs-link { 62 | color: #c6b4f0; 63 | } 64 | 65 | .hljs-meta { 66 | color: #fc9b9b; 67 | } 68 | 69 | .hljs-deletion { 70 | background-color: #fc9b9b; 71 | color: #333; 72 | } 73 | 74 | .hljs-addition { 75 | background-color: #a2fca2; 76 | color: #333; 77 | } 78 | 79 | .hljs a { 80 | color: inherit; 81 | } 82 | 83 | .hljs a:focus, 84 | .hljs a:hover { 85 | color: inherit; 86 | text-decoration: underline; 87 | } 88 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/improve/index.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 49 | -------------------------------------------------------------------------------- /src/components/Hello.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 33 | 34 | 35 | 54 | -------------------------------------------------------------------------------- /src/components/Common/vPopover.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 40 | 63 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/store/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/11/28. 3 | */ 4 | import Vue from 'vue' 5 | import Vuex from 'vuex' 6 | import VueResource from 'vue-resource' 7 | 8 | // import logger from './logger.manage' // 记录日志 ：logger 插件会生成状态快照，所以仅在开发环境使用。 9 | 10 | import StatesModule from './modules/StatesModule' 11 | import GettersModule from './modules/GettersModule' 12 | import MutationsModule from './modules/MutationsModule' 13 | import ActionsModule from './modules/ActionsModule' 14 | import ExamplesModule from './modules/ExamplesModule' 15 | import AdvanceModule from './modules/AdvanceModule' 16 | 17 | Vue.use(Vuex) 18 | Vue.use(VueResource) 19 | 20 | const store = new Vuex.Store({ 21 | // plugins: [logger], 22 | state: { 23 | title: 'Vue2.x 从入门到精通效果展示', 24 | urlItems: [ 25 | { linkTo: '/home', name: 'Home' }, 26 | { linkTo: '/startdemo', name: '入门篇: start' }, 27 | { linkTo: '/basedemo', name: '基础篇: base' }, 28 | { linkTo: '/improvedemo', name: '提高篇：improve' }, 29 | { linkTo: '/advancedemo', name: '进阶篇：advance' }, 30 | { linkTo: '/vuerouter', name: 'vue-router' }, 31 | { linkTo: '/vueresource', name: 'vue-resource' }, 32 | { linkTo: '/vuex', name: 'Vuex' }, 33 | { linkTo: '/examples', name: '案例：Examples' } 34 | ] 35 | }, 36 | modules: { 37 | stateDemo: StatesModule, 38 | getterDemo: GettersModule, 39 | mutationDemo: MutationsModule, 40 | actionDemo: ActionsModule, 41 | exampleDemo: ExamplesModule, 42 | advanceDemo: AdvanceModule 43 | } 44 | }) 45 | 46 | export default store 47 | -------------------------------------------------------------------------------- /src/modules/TableDemo/IndexCpm.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 48 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/vuex/index.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 63 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/base/index.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 59 | -------------------------------------------------------------------------------- /src/modules/TableDemo/data/DemoData.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/12/1. 3 | */ 4 | module.exports = [ 5 | { 6 | id: 'm_1', 7 | threadID: 't_1', 8 | threadName: 'Jing and Bill', 9 | authorName: 'Bill', 10 | text: 'Hey Jing, want to give a Flux talk at ForwardJS?', 11 | timestamp: Date.now() - 99999 12 | }, 13 | { 14 | id: 'm_2', 15 | threadID: 't_1', 16 | threadName: 'Jing and Bill', 17 | authorName: 'Bill', 18 | text: 'Seems like a pretty cool conference.', 19 | timestamp: Date.now() - 89999 20 | }, 21 | { 22 | id: 'm_3', 23 | threadID: 't_1', 24 | threadName: 'Jing and Bill', 25 | authorName: 'Jing', 26 | text: 'Sounds good. Will they be serving dessert?', 27 | timestamp: Date.now() - 79999 28 | }, 29 | { 30 | id: 'm_4', 31 | threadID: 't_2', 32 | threadName: 'Dave and Bill', 33 | authorName: 'Bill', 34 | text: 'Hey Dave, want to get a beer after the conference?', 35 | timestamp: Date.now() - 69999 36 | }, 37 | { 38 | id: 'm_5', 39 | threadID: 't_2', 40 | threadName: 'Dave and Bill', 41 | authorName: 'Dave', 42 | text: 'Totally! Meet you at the hotel bar.', 43 | timestamp: Date.now() - 59999 44 | }, 45 | { 46 | id: 'm_6', 47 | threadID: 't_3', 48 | threadName: 'Functional Heads', 49 | authorName: 'Bill', 50 | text: 'Hey Brian, are you going to be talking about functional stuff?', 51 | timestamp: Date.now() - 49999 52 | }, 53 | { 54 | id: 'm_7', 55 | threadID: 't_3', 56 | threadName: 'Bill and Brian', 57 | authorName: 'Brian', 58 | text: 'At ForwardJS? Yeah, of course. See you there!', 59 | timestamp: Date.now() - 39999 60 | } 61 | ] 62 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'], 18 | // Run the build command with an extra argument to 19 | // View the bundle analyzer report after build finishes: 20 | // `npm run build --report` 21 | // Set to `true` or `false` to always turn it on or off 22 | bundleAnalyzerReport: process.env.npm_config_report 23 | }, 24 | dev: { 25 | env: require('./dev.env'), 26 | port: 9091, 27 | autoOpenBrowser: true, 28 | assetsSubDirectory: 'static', 29 | assetsPublicPath: '/', 30 | proxyTable: {}, 31 | // CSS Sourcemaps off by default because relative paths are "buggy" 32 | // with this option, according to the CSS-Loader README 33 | // (https://github.com/webpack/css-loader#sourcemaps) 34 | // In our experience, they generally work as expected, 35 | // just be aware of this issue when enabling this option. 36 | cssSourceMap: false, 37 | cacheBusting: true 38 | } 39 | } -------------------------------------------------------------------------------- /src/components/Common/vCarousel.vue: -------------------------------------------------------------------------------- 1 | 27 | 33 | 55 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/base/child_demo02.md: -------------------------------------------------------------------------------- 1 | ::: demo 通过 watch 选项，来响应数据的变化。 2 | 3 | ``` html 4 | 13 | 14 | 61 | ``` 62 | ::: 63 | -------------------------------------------------------------------------------- /src/modules/TableDemo/component/baseTable.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 52 | -------------------------------------------------------------------------------- /src/components/Common/vLoading.vue: -------------------------------------------------------------------------------- 1 | 10 | 21 | 87 | 88 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/start/index.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 67 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/improve/transStateCpm.md: -------------------------------------------------------------------------------- 1 | ::: demo 过渡状态 2 | 3 | ``` html 4 | 20 | 21 | 72 | 73 | 80 | 81 | ``` 82 | ::: 83 | 84 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/router/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/11/28. 3 | */ 4 | import Vue from 'vue' 5 | import VueRouter from 'vue-router' 6 | 7 | Vue.use(VueRouter) 8 | 9 | const baseCpm = r => require.ensure([], () => r(require('../component/base/index')), 'Official_Base') 10 | const homeCpm = r => require.ensure([], () => r(require('../component/home')), 'Official_Home') 11 | const startCpm = r => require.ensure([], () => r(require('../component/start/index')), 'Official_Start') 12 | const improveCpm = r => require.ensure([], () => r(require('../component/improve/index')), 'Official_Improve') 13 | const advanceCpm = r => require.ensure([], () => r(require('../component/advance')), 'Official_Advance') 14 | const vueResource = r => require.ensure([], () => r(require('../component/vueResource/index')), 'Official_vueResource') 15 | const vuexCpm = r => require.ensure([], () => r(require('../component/vuex/index')), 'Official_Vuex') 16 | const exampleCpm = r => require.ensure([], () => r(require('../component/examples')), 'Official_Example') 17 | const errorCpm = r => require.ensure([], () => r(require('components/Common/vError')), 'error') 18 | 19 | const baseUrl = '' // 多页面路径配置 20 | 21 | const routes = [ 22 | { path: baseUrl + '/', redirect: baseUrl + '/home' }, 23 | { path: baseUrl + '/home', component: homeCpm }, 24 | { path: baseUrl + '/startdemo', component: startCpm }, 25 | { path: baseUrl + '/basedemo', component: baseCpm }, 26 | { path: baseUrl + '/improvedemo', component: improveCpm }, 27 | { path: baseUrl + '/advancedemo', component: advanceCpm }, 28 | { path: baseUrl + '/vueresource', component: vueResource }, 29 | { path: baseUrl + '/vuex', component: vuexCpm }, 30 | { path: baseUrl + '/examples', component: exampleCpm }, 31 | { path: '*', component: errorCpm } 32 | ] 33 | 34 | /*eslint-disable */ 35 | const router = new VueRouter({ 36 | hashbang: true, // 将路径格式化为#!开头 37 | history: true, // use history=false when testing 38 | // mode: 'history', 39 | base: __dirname, 40 | linkActiveClass: 'v-link-active', 41 | routes // （缩写）相当于 routes: routes 42 | }) 43 | 44 | export default router -------------------------------------------------------------------------------- /src/modules/TableDemo/component/easyTable.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 64 | -------------------------------------------------------------------------------- /src/modules/TableDemo/component/eTColumnSort.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 64 | -------------------------------------------------------------------------------- /src/modules/TableDemo/component/eTSpecialColumn.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 65 | -------------------------------------------------------------------------------- /src/modules/TableDemo/component/eTFrozenColumns.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 65 | -------------------------------------------------------------------------------- /src/modules/TableDemo/router/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/11/28. 3 | */ 4 | import Vue from 'vue' 5 | import VueRouter from 'vue-router' 6 | 7 | Vue.use(VueRouter) 8 | 9 | const homeCpm = r => require.ensure([], () => r(require('../component/homeCpm')), 'Table_Home') 10 | const baseTable = r => require.ensure([], () => r(require('../component/baseTable')), 'Table_Base') 11 | const etbase = r => require.ensure([], () => r(require('../component/easyTable')), 'Table_easy') 12 | const complexTitle = r => require.ensure([], () => r(require('../component/eTColumnGroup')), 'easyTable_columngroup') 13 | const frozenColumns = r => require.ensure([], () => r(require('../component/eTFrozenColumns')), 'easyTable_frozencolumns') 14 | const checkboxs = r => require.ensure([], () => r(require('../component/eTCheckBoxSelection')), 'easyTable_checkbox') 15 | const columnSort = r => require.ensure([], () => r(require('../component/eTColumnSort')), 'easyTable_columnsort') 16 | const specialColumn = r => require.ensure([], () => r(require('../component/eTSpecialColumn')), 'easyTable_specialColumn') 17 | const customizeColumn = r => require.ensure([], () => r(require('../component/eTCustomizeColumn')), 'easyTable_customizeColumn') 18 | const errorCpm = r => require.ensure([], () => r(require('components/Common/vError')), 'error') 19 | 20 | const baseUrl = '' // 多页面路径配置 21 | 22 | const et = { 23 | template: '' 24 | } 25 | 26 | const routes = [ 27 | {path: baseUrl + '/', redirect: baseUrl + '/home'}, 28 | {path: baseUrl + '/home', component: homeCpm}, 29 | {path: baseUrl + '/basetable', component: baseTable}, 30 | { 31 | path: baseUrl + '/easytable', 32 | component: et, 33 | children: [ 34 | {path: 'etbase', component: etbase}, 35 | {path: 'columngroup', component: complexTitle}, 36 | {path: 'frozencolumns', component: frozenColumns}, 37 | {path: 'checkboxs', component: checkboxs}, 38 | {path: 'columnsort', component: columnSort}, 39 | {path: 'specialcolumn', component: specialColumn}, 40 | {path: 'customizecolumn', component: customizeColumn} 41 | ]}, 42 | {path: '*', component: errorCpm} 43 | ] 44 | 45 | const router = new VueRouter({ 46 | hashbang: true, // 将路径格式化为#!开头 47 | history: true, // use history=false when testing 48 | // mode: 'history', 49 | base: __dirname, 50 | linkActiveClass: 'v-link-active', 51 | routes // （缩写）相当于 routes: routes 52 | }) 53 | 54 | export default router 55 | -------------------------------------------------------------------------------- /src/modules/TableDemo/component/eTCustomizeColumn.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 73 | -------------------------------------------------------------------------------- /src/assets/js/common/util.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zhoou on 2016/12/1. 3 | */ 4 | var utilHelper = { 5 | coerce: { 6 | // Convert a string to booleam. Otherwise, return the value without modification, so if is not boolean, Vue throw a warning. 7 | boolean: val => (typeof val === 'string' ? val === '' || val === 'true' ? true : (val === 'false' || val === 'null' || val === 'undefined' ? false : val) : val), 8 | // Attempt to convert a string value to a Number. Otherwise, return 0. 9 | number: (val, alt = null) => (typeof val === 'number' ? val : val === undefined || val === null || isNaN(Number(val)) ? alt : Number(val)), 10 | // Attempt to convert to string any value, except for null or undefined. 11 | string: val => (val === undefined || val === null ? '' : val + ''), 12 | // Pattern accept RegExp, function, or string (converted to RegExp). Otherwise return null. 13 | pattern: val => (val instanceof Function || val instanceof RegExp ? val : typeof val === 'string' ? new RegExp(val) : null) 14 | }, 15 | getLocalUrl: function () { 16 | let target = window.location.protocol + '//' + window.location.host 17 | return target 18 | }, 19 | getScrollBarWidth: function () { 20 | if (document.documentElement.scrollHeight <= document.documentElement.clientHeight) { 21 | return 0 22 | } 23 | let inner = document.createElement('p') 24 | inner.style.width = '100%' 25 | inner.style.height = '200px' 26 | 27 | let outer = document.createElement('div') 28 | outer.style.position = 'absolute' 29 | outer.style.top = '0px' 30 | outer.style.left = '0px' 31 | outer.style.visibility = 'hidden' 32 | outer.style.width = '200px' 33 | outer.style.height = '150px' 34 | outer.style.overflow = 'hidden' 35 | outer.appendChild(inner) 36 | 37 | document.body.appendChild(outer) 38 | let w1 = inner.offsetWidth 39 | outer.style.overflow = 'scroll' 40 | let w2 = inner.offsetWidth 41 | if (w1 === w2) w2 = outer.clientWidth 42 | document.body.removeChild(outer) 43 | return (w1 - w2) 44 | }, 45 | compile: function (code) { 46 | let c = String.fromCharCode(code.charCodeAt(0) + code.length) 47 | for (let i = 1; i < code.length; i++) { 48 | c += String.fromCharCode(code.charCodeAt(i) + code.charCodeAt(i - 1)) 49 | } 50 | return escape(c) 51 | }, 52 | uncompile: function (code) { 53 | code = unescape(code) 54 | let c = String.fromCharCode(code.charCodeAt(0) - code.length) 55 | for (let i = 1; i < code.length; i++) { 56 | c += String.fromCharCode(code.charCodeAt(i) - c.charCodeAt(i - 1)) 57 | } 58 | return c 59 | } 60 | } 61 | 62 | export default utilHelper 63 | 64 | -------------------------------------------------------------------------------- /src/components/Common/vAlert.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 86 | 87 | 112 | -------------------------------------------------------------------------------- /src/components/Common/vTable.vue: -------------------------------------------------------------------------------- 1 | 39 | 82 | 85 | -------------------------------------------------------------------------------- /src/modules/TableDemo/component/eTCheckBoxSelection.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 77 | 83 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/DemoBox.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 47 | 109 | -------------------------------------------------------------------------------- /src/components/Common/vLogin.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 67 | 92 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/vueResource/jsonpResource.vue: -------------------------------------------------------------------------------- 1 | 63 | 98 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/vueResource/GetResource.vue: -------------------------------------------------------------------------------- 1 | 64 | 99 | -------------------------------------------------------------------------------- /src/modules/PopupsDemo/component/alertCpm.vue: -------------------------------------------------------------------------------- 1 | 45 | 92 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cli-multipage-bootstrap", 3 | "version": "2.1.0", 4 | "description": "A Vue.js2.x project with Bootstrap", 5 | "author": "zhoou <1773963119@qq.com>", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "start": "node build/dev-server.js", 10 | "build": "node build/build.js", 11 | "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run", 12 | "e2e": "node test/e2e/runner.js", 13 | "test": "npm run unit && npm run e2e", 14 | "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" 15 | }, 16 | "dependencies": { 17 | "vue": "^2.5.16", 18 | "vue-router": "^3.0.1", 19 | "vuex": "^3.0.1" 20 | }, 21 | "devDependencies": { 22 | "@tweenjs/tween.js": "^17.2.0", 23 | "autoprefixer": "^7.1.2", 24 | "axios": "^0.18.0", 25 | "babel-core": "^6.26.3", 26 | "babel-eslint": "^7.2.3", 27 | "babel-loader": "^7.1.4", 28 | "babel-plugin-istanbul": "^4.1.4", 29 | "babel-plugin-transform-runtime": "^6.23.0", 30 | "babel-preset-env": "^1.7.0", 31 | "babel-preset-stage-2": "^6.24.1", 32 | "babel-register": "^6.26.0", 33 | "bootstrap-validator": "^0.11.9", 34 | "chai": "^3.5.0", 35 | "chalk": "^2.4.1", 36 | "chromedriver": "^2.31.0", 37 | "color-js": "^1.0.4", 38 | "connect-history-api-fallback": "^1.3.0", 39 | "copy-webpack-plugin": "^4.0.1", 40 | "cross-env": "^5.0.5", 41 | "cross-spawn": "^5.1.0", 42 | "css-loader": "^0.28.11", 43 | "cssnano": "^3.10.0", 44 | "eslint": "^4.19.1", 45 | "eslint-config-standard": "^6.2.1", 46 | "eslint-friendly-formatter": "^3.0.0", 47 | "eslint-loader": "^2.0.0", 48 | "eslint-plugin-html": "^3.0.0", 49 | "eslint-plugin-promise": "^3.4.0", 50 | "eslint-plugin-standard": "^2.0.1", 51 | "eventsource-polyfill": "^0.9.6", 52 | "express": "^4.16.3", 53 | "file-loader": "^1.1.11", 54 | "friendly-errors-webpack-plugin": "^1.6.1", 55 | "glob": "^7.1.2", 56 | "highlight.js": "^9.12.0", 57 | "html-webpack-plugin": "^3.2.0", 58 | "http-proxy-middleware": "^0.17.4", 59 | "inject-loader": "^3.0.0", 60 | "jquery": "^2.1.4", 61 | "karma": "^1.7.0", 62 | "karma-coverage": "^1.1.1", 63 | "karma-mocha": "^1.3.0", 64 | "karma-phantomjs-launcher": "^1.0.4", 65 | "karma-phantomjs-shim": "^1.4.0", 66 | "karma-sinon-chai": "^1.3.1", 67 | "karma-sourcemap-loader": "^0.3.7", 68 | "karma-spec-reporter": "0.0.31", 69 | "karma-webpack": "^2.0.4", 70 | "lodash": "^4.17.10", 71 | "lolex": "^1.6.0", 72 | "markdown-it": "^8.4.1", 73 | "markdown-it-container": "^2.0.0", 74 | "mini-css-extract-plugin": "^0.4.0", 75 | "mocha": "^3.5.0", 76 | "nightwatch": "^0.9.12", 77 | "opn": "^5.1.0", 78 | "optimize-css-assets-webpack-plugin": "^2.0.0", 79 | "ora": "^1.2.0", 80 | "phantomjs-prebuilt": "^2.1.14", 81 | "rimraf": "^2.6.0", 82 | "selenium-server": "^3.0.1", 83 | "semver": "^5.5.0", 84 | "shelljs": "^0.8.2", 85 | "sinon": "^2.4.1", 86 | "sinon-chai": "^2.13.0", 87 | "url-loader": "^1.0.1", 88 | "vue-loader": "^14.2.3", 89 | "vue-markdown-loader": "^2.4.1", 90 | "vue-resource": "^1.5.1", 91 | "vue-style-loader": "^4.1.0", 92 | "vue-template-compiler": "^2.5.16", 93 | "webpack": "^4.11.0", 94 | "webpack-bundle-analyzer": "^2.9.0", 95 | "webpack-cli": "^3.0.2", 96 | "webpack-dev-middleware": "^1.12.2", 97 | "webpack-hot-middleware": "^2.22.2", 98 | "webpack-merge": "^4.1.2" 99 | }, 100 | "engines": { 101 | "node": ">= 6.0.0", 102 | "npm": ">= 3.0.0" 103 | }, 104 | "browserslist": [ 105 | "> 1%", 106 | "last 2 versions", 107 | "not ie <= 8" 108 | ] 109 | } 110 | -------------------------------------------------------------------------------- /src/modules/TableDemo/component/eTColumnGroup.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 85 | -------------------------------------------------------------------------------- /src/modules/PopupsDemo/component/modalCpm.vue: -------------------------------------------------------------------------------- 1 | 53 | 107 | -------------------------------------------------------------------------------- /src/components/Common/vModal.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 142 | 177 | -------------------------------------------------------------------------------- /src/assets/css/Common.css: -------------------------------------------------------------------------------- 1 | html,body,h1{ 2 | padding:0; 3 | margin: 0; 4 | } 5 | 6 | body>h1{ 7 | text-align: center; 8 | font-size:20px; 9 | padding:20px 0; 10 | font-weight: bold; 11 | color:#c7254e; 12 | } 13 | .bs-example { 14 | position: relative; 15 | padding: 16px; 16 | margin: 0 -15px 15px; 17 | border-color: #e5e5e5 #eee #eee; 18 | border-style: solid; 19 | border-width: 1px 0; 20 | -webkit-box-shadow: inset 0 3px 6px rgba(0,0,0,.05); 21 | box-shadow: inset 0 3px 6px rgba(0,0,0,.05); 22 | } 23 | .bs-example:after { 24 | position: absolute; 25 | top: 15px; 26 | left: 15px; 27 | font-size: 12px; 28 | font-weight: 700; 29 | color: #959595; 30 | text-transform: uppercase; 31 | letter-spacing: 1px; 32 | content: "实例"; 33 | } 34 | .btn-clipboard { 35 | position: absolute; 36 | top: 0; 37 | right: 0; 38 | z-index: 10; 39 | display: block; 40 | padding: 2px 8px; 41 | font-size: 12px; 42 | color: #fff; 43 | cursor: pointer; 44 | background-color: #c7254e; 45 | border: 1px solid #e1e1e8; 46 | border-radius: 0 4px 0 4px; 47 | } 48 | .highlight { 49 | margin-bottom: 14px; 50 | background-color: #333; 51 | border: 1px solid #eee; 52 | border-radius: 4px; 53 | display: block; 54 | overflow-x: auto; 55 | position: relative; 56 | padding: 0 0.6em; 57 | line-height: 1.1em; 58 | max-height: 560px; 59 | } 60 | .highlight pre { 61 | word-break: normal; 62 | background-color: transparent; 63 | line-height: 1.5em; 64 | border: 0; 65 | display: flex; 66 | overflow: initial; 67 | } 68 | .highlight .line { 69 | min-height: 1.5em; 70 | color: #fff; 71 | } 72 | 73 | pre .keyword, pre .attribute { 74 | color: #e96900; 75 | } 76 | 77 | pre .string{ 78 | color: #42b983; 79 | } 80 | 81 | pre .tag{ 82 | color: #2973b7; 83 | } 84 | pre .number, pre .literal { 85 | color: #ae81ff; 86 | } 87 | .pagelink{ 88 | text-align: center; 89 | } 90 | .demo { 91 | border:1px solid peachpuff; 92 | border-radius: 2px; 93 | background-color: gainsboro; 94 | padding: 10px; 95 | margin-top: 20px; 96 | min-height: 66px; 97 | font-size: 1.2em; 98 | line-height: 1.5em; 99 | -webkit-user-select: none; 100 | -moz-user-select: none; 101 | -ms-user-select: none; 102 | user-select: none; 103 | } 104 | .highdemo{ 105 | height: 560px; 106 | } 107 | [v-cloak] { 108 | display: none; 109 | } 110 | @media (min-width: 768px){ 111 | .bs-example { 112 | margin-right: 0; 113 | margin-left: 0; 114 | background-color: #fff; 115 | border-color: #ddd; 116 | border-width: 1px; 117 | border-radius: 4px 4px 0 0; 118 | -webkit-box-shadow: none; 119 | box-shadow: none; 120 | overflow: auto; 121 | } 122 | } 123 | .hello { 124 | text-align:center 125 | } 126 | .hello .link { 127 | padding:20px; 128 | } 129 | .hello h1,.hello h2 { 130 | font-weight: normal; 131 | } 132 | 133 | .hello ul { 134 | list-style-type: none; 135 | padding: 0; 136 | } 137 | 138 | .hello li { 139 | display: inline-block; 140 | margin: 0 10px; 141 | } 142 | 143 | a { 144 | color: #42b983; 145 | } 146 | .example .items { 147 | text-align:center; 148 | border:1px solid #42b983; 149 | padding:10px; 150 | margin-bottom:20px; 151 | min-height:104px; 152 | } 153 | .example .name { 154 | font-size:16px; 155 | font-weight:bold; 156 | padding-top:10px; 157 | } 158 | #app,#table,#carousel,#popuphome,#form { 159 | font-family: 'Avenir', Helvetica, Arial, sans-serif; 160 | -webkit-font-smoothing: antialiased; 161 | -moz-osx-font-smoothing: grayscale; 162 | color: #2c3e50; 163 | margin-top: 60px; 164 | } 165 | .container>h1{ 166 | color: #c7254e; 167 | font-weight: bold; 168 | margin-bottom: 20px; 169 | text-align: center; 170 | font-size: 30px; 171 | } 172 | .container ul.nav{ 173 | margin-bottom: 30px; 174 | background: #eee; 175 | padding: 10px; 176 | } 177 | #navs li a.v-link-active{ 178 | color: #fff; 179 | background-color: #428bca; 180 | } 181 | .slide-left-enter, .slide-right-leave-active { 182 | /*animation: bounce-in .2s;*/ 183 | transition: all .2s ease; 184 | } 185 | .slide-left-leave-active, .slide-right-enter { 186 | /*animation: bounce-out .2s;*/ 187 | transition: all .2s ease; 188 | } 189 | 190 | @font-face { 191 | font-family: 'iconfont'; 192 | src: url('../fonts/iconfont.eot'); /* IE9*/ 193 | src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 194 | url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */ 195 | url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ 196 | url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ 197 | } 198 | 199 | .iconfont{ 200 | font-family:"iconfont" !important; 201 | font-size:16px; 202 | font-style:normal; 203 | -webkit-font-smoothing: antialiased; 204 | -webkit-text-stroke-width: 0.2px; 205 | -moz-osx-font-smoothing: grayscale; 206 | } 207 | 208 | -------------------------------------------------------------------------------- /src/components/Common/vCarousel_A.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 89 | 154 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue Learn 2 | 3 | > A Vue.js2.0 project with Bootstrap which integrated the vue official online examples to components and some components build by myself to anyone who interested in . 4 | 5 |
6 | vue-cli-multipage-bootstrap-new 7 | vue-cli-multipage-bootstrap 8 |
9 | 10 | ## Components 11 | * [Alert 组件](/src/components/Common/vAlert.vue) 12 | * [Modal 组件](/src/components/Common/vModal.vue) 13 | * [Table 组件](/src/components/Common/vTable.vue) 14 | * [Carousel 组件](/src/components/Common/vCarousel.vue) 15 | * [Loading 组件](/src/components/Common/vLoading.vue) 16 | * [Login 组件](/src/components/Common/vLogin.vue) 17 | * [Error 组件](/src/components/Common/vError.vue) 18 | 19 | ## Dev Environment 20 | 21 | `npm install` 22 | 23 | `npm run dev` 24 | 25 | ### The initial access path： 26 | 33 | 34 | you can click the nav '案例：Examples' and choice 'TableHome' to jump to another project 'tablehome.html'. 35 | 36 | ## Prod Environment 37 | 38 | `npm install` 39 | 40 | `npm run build` 41 | 42 | Please take the published content to the local server IIS or on another server you like , 43 | 44 | and then the initial access path ：(serverIP)/officialdemo.html 45 | 46 | ## Build Setup 47 | 48 | ``` bash 49 | # 安装vue-cli 50 | npm install -g vue-cli 51 | 52 | # 使用vue-cli初始化项目 53 | vue init webpack my-project 54 | 55 | # 进入到目录 56 | cd my-project 57 | 58 | # install dependencies 59 | npm install 60 | 61 | # serve with hot reload at localhost:8080 62 | npm run dev 63 | 64 | # build for production with minification 65 | npm run build 66 | 67 | # run unit tests 68 | npm run unit 69 | 70 | # run e2e tests 71 | npm run e2e 72 | 73 | # run all tests 74 | npm test 75 | ``` 76 | ## 多页面配置 77 | 78 | #### webpack.base.conf.js 配置： 79 | 

 80 | var entries = getEntry('./src/module/*/*.js'); // 获得入口js文件
 81 | 
 82 | function getEntry(globPath) {
 83 |   var entries = {},
 84 |     basename, tmp, pathname;
 85 | 
 86 |   glob.sync(globPath).forEach(function (entry) {
 87 |     basename = path.basename(entry, path.extname(entry));
 88 |     tmp = entry.split('/').splice(-3);
 89 |     pathname = tmp.splice(1, 1).toString().toLowerCase(); // 正确输出js和html的路径
 90 |     entries[pathname] = entry;
 91 |   });
 92 |   return entries;
 93 | }
 94 |
95 | 其中入口entry修改成如下： 96 | 

 97 | entry: Object.assign(entries,{
 98 |     vendors : ['jquery', 'bootstrap']
 99 |   })
100 |
101 | 102 | #### webpack.dev.conf.js 配置： 103 | 

104 | function getEntry(globPath) {
105 |   var entries = {},
106 |     basename, tmp, pathname;
107 | 
108 |   glob.sync(globPath).forEach(function (entry) {
109 |     basename = path.basename(entry, path.extname(entry));
110 |     tmp = entry.split('/').splice(-3);
111 |     pathname = tmp.splice(1, 1).toString().toLowerCase();
112 |     entries[pathname] = entry;
113 |   });
114 | 
115 |   return entries;
116 | }
117 | 
118 | var pages = getEntry('./src/module/**/*.html');
119 | 
120 | for (var pathname in pages) {
121 |   // 配置生成的html文件，定义路径等
122 |   var conf = {
123 |     filename: pathname + '.html',
124 |     template: pages[pathname], // 模板路径
125 |     inject: true              // js插入位置
126 |   };
127 |   // 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象
128 |   module.exports.plugins.push(new HtmlWebpackPlugin(conf));
129 | }
130 |
131 | 132 | #### webpack.prod.conf.js 配置： 133 | 

134 |  function getEntry(globPath) {
135 |   var entries = {},
136 |     basename, tmp, pathname;
137 | 
138 |   glob.sync(globPath).forEach(function (entry) {
139 |     basename = path.basename(entry, path.extname(entry));
140 |     tmp = entry.split('/').splice(-3);
141 |     pathname = tmp.splice(1, 1).toString().toLowerCase();
142 |     entries[pathname] = entry;
143 |   });
144 |   return entries;
145 | }
146 | var pages = getEntry('./src/module/*/*.html');
147 | for (var pathname in pages) {
148 |   // 配置生成的html文件，定义路径等
149 |   var conf = {
150 |     filename: pathname + '.html',
151 |     template: pages[pathname], // 模板路径
152 |     inject: true,              // js插入位置
153 |     minify: {
154 |       removeComments: true,
155 |       collapseWhitespace: true,
156 |       removeAttributeQuotes: true
157 |       // more options:
158 |       // https://github.com/kangax/html-minifier#options-quick-reference
159 |     },
160 |     // necessary to consistently work with multiple chunks via CommonsChunkPlugin
161 |     chunksSortMode: 'dependency'
162 |   };
163 |   // 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象
164 |   webpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
165 | }
166 |
167 | 168 | ## markdown配置 169 | 170 | 详见：build\webpack.markdown.js 171 | 主要使用的插件：[markdown-it](https://github.com/markdown-it/markdown-it) 172 | 173 | 174 | Welcome guidance ！！ 175 | -------------------------------------------------------------------------------- /src/assets/js/common/utils.js: -------------------------------------------------------------------------------- 1 | // coerce convert som types of data into another type 2 | export const coerce = { 3 | // Convert a string to booleam. Otherwise, return the value without modification, so if is not boolean, Vue throw a warning. 4 | boolean: val => (typeof val === 'string' ? val === '' || val === 'true' ? true : (val === 'false' || val === 'null' || val === 'undefined' ? false : val) : val), 5 | // Attempt to convert a string value to a Number. Otherwise, return 0. 6 | number: (val, alt = null) => (typeof val === 'number' ? val : val === undefined || val === null || isNaN(Number(val)) ? alt : Number(val)), 7 | // Attempt to convert to string any value, except for null or undefined. 8 | string: val => (val === undefined || val === null ? '' : val + ''), 9 | // Pattern accept RegExp, function, or string (converted to RegExp). Otherwise return null. 10 | pattern: val => (val instanceof Function || val instanceof RegExp ? val : typeof val === 'string' ? new RegExp(val) : null) 11 | } 12 | 13 | export function getJSON (url) { 14 | var request = new window.XMLHttpRequest() 15 | var data = {} 16 | // p (-simulated- promise) 17 | var p = { 18 | then (fn1, fn2) { return p.done(fn1).fail(fn2) }, 19 | catch (fn) { return p.fail(fn) }, 20 | always (fn) { return p.done(fn).fail(fn) } 21 | }; 22 | ['done', 'fail'].forEach(name => { 23 | data[name] = [] 24 | p[name] = (fn) => { 25 | if (fn instanceof Function) data[name].push(fn) 26 | return p 27 | } 28 | }) 29 | p.done(JSON.parse) 30 | request.onreadystatechange = () => { 31 | if (request.readyState === 4) { 32 | let e = {status: request.status} 33 | if (request.status === 200) { 34 | try { 35 | var response = request.responseText 36 | for (var i in data.done) { 37 | var value = data.done[i](response) 38 | if (value !== undefined) { response = value } 39 | } 40 | } catch (err) { 41 | data.fail.forEach(fail => fail(err)) 42 | } 43 | } else { 44 | data.fail.forEach(fail => fail(e)) 45 | } 46 | } 47 | } 48 | request.open('GET', url) 49 | request.setRequestHeader('Accept', 'application/json') 50 | request.send() 51 | return p 52 | } 53 | 54 | export function getScrollBarWidth () { 55 | if (document.documentElement.scrollHeight <= document.documentElement.clientHeight) { 56 | return 0 57 | } 58 | console.log(2) 59 | let inner = document.createElement('p') 60 | inner.style.width = '100%' 61 | inner.style.height = '200px' 62 | 63 | let outer = document.createElement('div') 64 | outer.style.position = 'absolute' 65 | outer.style.top = '0px' 66 | outer.style.left = '0px' 67 | outer.style.visibility = 'hidden' 68 | outer.style.width = '200px' 69 | outer.style.height = '150px' 70 | outer.style.overflow = 'hidden' 71 | outer.appendChild(inner) 72 | 73 | document.body.appendChild(outer) 74 | let w1 = inner.offsetWidth 75 | outer.style.overflow = 'scroll' 76 | let w2 = inner.offsetWidth 77 | if (w1 === w2) w2 = outer.clientWidth 78 | 79 | document.body.removeChild(outer) 80 | 81 | return (w1 - w2) 82 | } 83 | 84 | // return all the translations or the default language (english) 85 | export function translations (lang = 'en') { 86 | let text = { 87 | daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], 88 | limit: 'Limit reached ({{limit}} items max).', 89 | loading: 'Loading...', 90 | minLength: 'Min. Length', 91 | months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], 92 | notSelected: 'Nothing Selected', 93 | required: 'Required', 94 | search: 'Search' 95 | } 96 | return window.VueStrapLang ? window.VueStrapLang(lang) : text 97 | } 98 | 99 | // delayer: set a function that execute after a delay 100 | // @params (function, delay_prop or value, default_value) 101 | export function delayer (fn, varTimer, ifNaN = 100) { 102 | function toInt (el) { return /^[0-9]+$/.test(el) ? Number(el) || 1 : null } 103 | var timerId 104 | return function (...args) { 105 | if (timerId) clearTimeout(timerId) 106 | timerId = setTimeout(() => { 107 | fn.apply(this, args) 108 | }, toInt(varTimer) || toInt(this[varTimer]) || ifNaN) 109 | } 110 | } 111 | 112 | // Fix a vue instance Lifecycle to vue 1/2 (just the basic elements, is not a real parser, so this work only if your code is compatible with both) 113 | export function VueFixer (vue) { 114 | var vue2 = !window.Vue || !window.Vue.partial 115 | var mixin = { 116 | computed: { 117 | vue2 () { return !this.$dispatch } 118 | } 119 | } 120 | if (!vue2) { 121 | if (vue.beforeCreate) { 122 | mixin.create = vue.beforeCreate 123 | delete vue.beforeCreate 124 | } 125 | if (vue.beforeMount) { 126 | vue.beforeCompile = vue.beforeMount 127 | delete vue.beforeMount 128 | } 129 | if (vue.mounted) { 130 | vue.ready = vue.mounted 131 | delete vue.mounted 132 | } 133 | } else { 134 | if (vue.beforeCompile) { 135 | vue.beforeMount = vue.beforeCompile 136 | delete vue.beforeCompile 137 | } 138 | if (vue.compiled) { 139 | mixin.compiled = vue.compiled 140 | delete vue.compiled 141 | } 142 | if (vue.ready) { 143 | vue.mounted = vue.ready 144 | delete vue.ready 145 | } 146 | } 147 | if (!vue.mixins) { vue.mixins = [] } 148 | vue.mixins.unshift(mixin) 149 | return vue 150 | } 151 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/vueResource/postResource.vue: -------------------------------------------------------------------------------- 1 | 103 | 164 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/vueResource/demoResource.md: -------------------------------------------------------------------------------- 1 | ::: demo 采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统 2 | 3 | ``` html 4 | 76 | 205 | 211 | ``` 212 | ::: 213 | -------------------------------------------------------------------------------- /src/assets/js/common/carousel.js: -------------------------------------------------------------------------------- 1 | /* ======================================================================== 2 | * Bootstrap: carousel.js v3.3.0 3 | * http://getbootstrap.com/javascript/#carousel 4 | * ======================================================================== 5 | * Copyright 2011-2014 Twitter, Inc. 6 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 7 | * ======================================================================== */ 8 | 9 | 10 | +function ($) { 11 | 'use strict'; 12 | 13 | // CAROUSEL CLASS DEFINITION 14 | // ========================= 15 | 16 | var Carousel = function (element, options) { 17 | this.$element = $(element) 18 | this.$indicators = this.$element.find('.carousel-indicators') 19 | this.options = options 20 | this.paused = 21 | this.sliding = 22 | this.interval = 23 | this.$active = 24 | this.$items = null 25 | 26 | this.options.keyboard && this.$element.on('keydown.bs.carousel', $.proxy(this.keydown, this)) 27 | 28 | this.options.pause == 'hover' && !('ontouchstart' in document.documentElement) && this.$element 29 | .on('mouseenter.bs.carousel', $.proxy(this.pause, this)) 30 | .on('mouseleave.bs.carousel', $.proxy(this.cycle, this)) 31 | } 32 | 33 | Carousel.VERSION = '3.3.0' 34 | 35 | Carousel.TRANSITION_DURATION = 600 36 | 37 | Carousel.DEFAULTS = { 38 | interval: 5000, 39 | pause: 'hover', 40 | wrap: true, 41 | keyboard: true 42 | } 43 | 44 | Carousel.prototype.keydown = function (e) { 45 | switch (e.which) { 46 | case 37: this.prev(); break 47 | case 39: this.next(); break 48 | default: return 49 | } 50 | 51 | e.preventDefault() 52 | } 53 | 54 | Carousel.prototype.cycle = function (e) { 55 | e || (this.paused = false) 56 | 57 | this.interval && clearInterval(this.interval) 58 | 59 | this.options.interval 60 | && !this.paused 61 | && (this.interval = setInterval($.proxy(this.next, this), this.options.interval)) 62 | 63 | return this 64 | } 65 | 66 | Carousel.prototype.getItemIndex = function (item) { 67 | this.$items = item.parent().children('.item') 68 | return this.$items.index(item || this.$active) 69 | } 70 | 71 | Carousel.prototype.getItemForDirection = function (direction, active) { 72 | var delta = direction == 'prev' ? -1 : 1 73 | var activeIndex = this.getItemIndex(active) 74 | var itemIndex = (activeIndex + delta) % this.$items.length 75 | return this.$items.eq(itemIndex) 76 | } 77 | 78 | Carousel.prototype.to = function (pos) { 79 | var that = this 80 | var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active')) 81 | 82 | if (pos > (this.$items.length - 1) || pos < 0) return 83 | 84 | if (this.sliding) return this.$element.one('slid.bs.carousel', function () { that.to(pos) }) // yes, "slid" 85 | if (activeIndex == pos) return this.pause().cycle() 86 | 87 | return this.slide(pos > activeIndex ? 'next' : 'prev', this.$items.eq(pos)) 88 | } 89 | 90 | Carousel.prototype.pause = function (e) { 91 | e || (this.paused = true) 92 | 93 | if (this.$element.find('.next, .prev').length && $.support.transition) { 94 | this.$element.trigger($.support.transition.end) 95 | this.cycle(true) 96 | } 97 | 98 | this.interval = clearInterval(this.interval) 99 | 100 | return this 101 | } 102 | 103 | Carousel.prototype.next = function () { 104 | if (this.sliding) return 105 | return this.slide('next') 106 | } 107 | 108 | Carousel.prototype.prev = function () { 109 | if (this.sliding) return 110 | return this.slide('prev') 111 | } 112 | 113 | Carousel.prototype.slide = function (type, next) { 114 | var $active = this.$element.find('.item.active') 115 | var $next = next || this.getItemForDirection(type, $active) 116 | var isCycling = this.interval 117 | var direction = type == 'next' ? 'left' : 'right' 118 | var fallback = type == 'next' ? 'first' : 'last' 119 | var that = this 120 | 121 | if (!$next.length) { 122 | if (!this.options.wrap) return 123 | $next = this.$element.find('.item')[fallback]() 124 | } 125 | 126 | if ($next.hasClass('active')) return (this.sliding = false) 127 | 128 | var relatedTarget = $next[0] 129 | var slideEvent = $.Event('slide.bs.carousel', { 130 | relatedTarget: relatedTarget, 131 | direction: direction 132 | }) 133 | this.$element.trigger(slideEvent) 134 | if (slideEvent.isDefaultPrevented()) return 135 | 136 | this.sliding = true 137 | 138 | isCycling && this.pause() 139 | 140 | if (this.$indicators.length) { 141 | this.$indicators.find('.active').removeClass('active') 142 | var $nextIndicator = $(this.$indicators.children()[this.getItemIndex($next)]) 143 | $nextIndicator && $nextIndicator.addClass('active') 144 | } 145 | 146 | var slidEvent = $.Event('slid.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) // yes, "slid" 147 | if ($.support.transition && this.$element.hasClass('slide')) { 148 | $next.addClass(type) 149 | $next[0].offsetWidth // force reflow 150 | $active.addClass(direction) 151 | $next.addClass(direction) 152 | $active 153 | .one('bsTransitionEnd', function () { 154 | $next.removeClass([type, direction].join(' ')).addClass('active') 155 | $active.removeClass(['active', direction].join(' ')) 156 | that.sliding = false 157 | setTimeout(function () { 158 | that.$element.trigger(slidEvent) 159 | }, 0) 160 | }) 161 | .emulateTransitionEnd(Carousel.TRANSITION_DURATION) 162 | } else { 163 | $active.removeClass('active') 164 | $next.addClass('active') 165 | this.sliding = false 166 | this.$element.trigger(slidEvent) 167 | } 168 | 169 | isCycling && this.cycle() 170 | 171 | return this 172 | } 173 | 174 | 175 | // CAROUSEL PLUGIN DEFINITION 176 | // ========================== 177 | 178 | function Plugin(option) { 179 | return this.each(function () { 180 | var $this = $(this) 181 | var data = $this.data('bs.carousel') 182 | var options = $.extend({}, Carousel.DEFAULTS, $this.data(), typeof option == 'object' && option) 183 | var action = typeof option == 'string' ? option : options.slide 184 | 185 | if (!data) $this.data('bs.carousel', (data = new Carousel(this, options))) 186 | if (typeof option == 'number') data.to(option) 187 | else if (action) data[action]() 188 | else if (options.interval) data.pause().cycle() 189 | }) 190 | } 191 | 192 | var old = $.fn.carousel 193 | 194 | $.fn.carousel = Plugin 195 | $.fn.carousel.Constructor = Carousel 196 | 197 | 198 | // CAROUSEL NO CONFLICT 199 | // ==================== 200 | 201 | $.fn.carousel.noConflict = function () { 202 | $.fn.carousel = old 203 | return this 204 | } 205 | 206 | 207 | // CAROUSEL DATA-API 208 | // ================= 209 | 210 | var clickHandler = function (e) { 211 | var href 212 | var $this = $(this) 213 | var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7 214 | if (!$target.hasClass('carousel')) return 215 | var options = $.extend({}, $target.data(), $this.data()) 216 | var slideIndex = $this.attr('data-slide-to') 217 | if (slideIndex) options.interval = false 218 | 219 | Plugin.call($target, options) 220 | 221 | if (slideIndex) { 222 | $target.data('bs.carousel').to(slideIndex) 223 | } 224 | 225 | e.preventDefault() 226 | } 227 | 228 | $(document) 229 | .on('click.bs.carousel.data-api', '[data-slide]', clickHandler) 230 | .on('click.bs.carousel.data-api', '[data-slide-to]', clickHandler) 231 | 232 | $(window).on('load', function () { 233 | $('[data-ride="carousel"]').each(function () { 234 | var $carousel = $(this) 235 | Plugin.call($carousel, $carousel.data()) 236 | }) 237 | }) 238 | 239 | }(jQuery); 240 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/vueResource/putResource.vue: -------------------------------------------------------------------------------- 1 | 149 | 235 | -------------------------------------------------------------------------------- /src/modules/OfficialDemo/component/vueResource/deleteResource.vue: -------------------------------------------------------------------------------- 1 | 158 | 258 | --------------------------------------------------------------------------------