├── static ├── .gitkeep └── json │ ├── home.json │ └── user.json ├── .eslintignore ├── src ├── assets │ └── logo.png ├── store │ ├── modules │ │ ├── orm │ │ │ ├── reports.js │ │ │ ├── users.js │ │ │ └── datasets.js │ │ ├── products.js │ │ └── home.js │ └── index.js ├── components │ └── userList │ │ └── preUser.vue ├── service │ └── api │ │ ├── home.js │ │ └── user.js ├── utils │ ├── setIosTitl.js │ ├── apiPath.js │ └── util.js ├── page │ ├── product │ │ ├── components │ │ │ └── preProduct.vue │ │ └── product.vue │ ├── user │ │ └── user.vue │ ├── pageTalk │ │ └── homeProduct.js │ └── home │ │ └── home.vue ├── App.vue ├── main.js └── router │ └── index.js ├── config ├── prod.env.js ├── test.env.js ├── dev.env.js └── index.js ├── test └── unit │ ├── .eslintrc │ ├── specs │ └── user.spec.js │ ├── index.js │ └── karma.conf.js ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── index.html ├── .babelrc ├── README.md ├── .eslintrc.js └── package.json /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | /test/unit/coverage/ 6 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/didiaohu/architect/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /static/json/home.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"桃", 3 | "size":"大的", 4 | "price":"5元/斤", 5 | "station":"杭州", 6 | "customer":"老人和小孩" 7 | } -------------------------------------------------------------------------------- /test/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true 4 | }, 5 | "globals": { 6 | "expect": true, 7 | "sinon": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const devEnv = require('./dev.env') 4 | 5 | module.exports = merge(devEnv, { 6 | NODE_ENV: '"testing"' 7 | }) 8 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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 | 9 | # Editor directories and files 10 | .idea 11 | .vscode 12 | *.suo 13 | *.ntvs* 14 | *.njsproj 15 | *.sln 16 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/store/modules/orm/reports.js: -------------------------------------------------------------------------------- 1 | const state = { 2 | } 3 | 4 | // getters 5 | const getters = { 6 | 7 | } 8 | 9 | // actions 10 | const actions = { 11 | 12 | } 13 | 14 | // mutations 15 | const mutations = { 16 | 17 | } 18 | 19 | export default { 20 | state, 21 | getters, 22 | actions, 23 | mutations 24 | } -------------------------------------------------------------------------------- /src/store/modules/orm/users.js: -------------------------------------------------------------------------------- 1 | const state = { 2 | } 3 | 4 | // getters 5 | const getters = { 6 | 7 | } 8 | 9 | // actions 10 | const actions = { 11 | 12 | } 13 | 14 | // mutations 15 | const mutations = { 16 | 17 | } 18 | 19 | export default { 20 | state, 21 | getters, 22 | actions, 23 | mutations 24 | } -------------------------------------------------------------------------------- /src/store/modules/orm/datasets.js: -------------------------------------------------------------------------------- 1 | const state = { 2 | } 3 | 4 | // getters 5 | const getters = { 6 | 7 | } 8 | 9 | // actions 10 | const actions = { 11 | 12 | } 13 | 14 | // mutations 15 | const mutations = { 16 | 17 | } 18 | 19 | export default { 20 | state, 21 | getters, 22 | actions, 23 | mutations 24 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vuetemplate 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/components/userList/preUser.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /test/unit/specs/user.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import User from '@/page/user/user'; 3 | 4 | describe('User.vue', () => { 5 | it('User页面中的H4标题应为页面引入通用组件', () => { 6 | const Constructor = Vue.extend(User); 7 | const vm = new Constructor().$mount(); 8 | expect(vm.$el.querySelector('.user h4').textContent).to.equal('页面引入通用组件'); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /src/service/api/home.js: -------------------------------------------------------------------------------- 1 | export const getProducts = (shop) => { 2 | fetch('static/json/home.json')// options省略表示get 3 | .then(function (response) { 4 | return response.json();// 生成json, 5 | }) 6 | .then(function (data) { 7 | shop(data); 8 | console.log() 9 | }).catch(function () { 10 | }); 11 | }; 12 | -------------------------------------------------------------------------------- /src/service/api/user.js: -------------------------------------------------------------------------------- 1 | export const getUser = user => { 2 | fetch('static/json/user.json') // options省略表示get 3 | .then(function (response) { 4 | return response.json() // 生成json, 5 | }) 6 | .then(function (data) { 7 | console.log(data) 8 | user(data) 9 | }) 10 | .catch(function () { 11 | console.log('Oops, error') 12 | }) 13 | } 14 | -------------------------------------------------------------------------------- /src/utils/setIosTitl.js: -------------------------------------------------------------------------------- 1 | // 修改在IOS微信中 title无法修改的问题 2 | export const setTitle=function(t) { 3 | document.title = t; 4 | var i = document.createElement('iframe'); 5 | i.src = '//www.rrjc.com/favicon.ico'; 6 | i.style.display = 'none'; 7 | i.onload = function() { 8 | setTimeout(function() { 9 | i.remove(); 10 | }, 9); 11 | }; 12 | document.body.appendChild(i); 13 | }; -------------------------------------------------------------------------------- /src/page/product/components/preProduct.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /.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-vue-jsx", "transform-runtime"], 12 | "env": { 13 | "test": { 14 | "presets": ["env", "stage-2"], 15 | "plugins": ["transform-vue-jsx", "istanbul"] 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 23 | -------------------------------------------------------------------------------- /static/json/user.json: -------------------------------------------------------------------------------- 1 | { 2 | "success": 1, 3 | "message": 1, 4 | "data": { 5 | "list": [{ 6 | "name": "名字1", 7 | "age": "6岁", 8 | "education": "小学" 9 | }, { 10 | "name": "名字2", 11 | "age": "12岁", 12 | "education": "小学" 13 | }, { 14 | "name": "名字3", 15 | "age": "18岁", 16 | "education": "大学" 17 | }], 18 | "pageNum": 14250, 19 | "pages": 31848, 20 | "total": 82518, 21 | "pageSize": 50821 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /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/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 ElementUI from 'element-ui' 6 | import 'element-ui/lib/theme-chalk/index.css' 7 | import router from './router' 8 | import store from './store' 9 | 10 | Vue.config.productionTip = false 11 | 12 | Vue.use(ElementUI) 13 | 14 | /* eslint-disable no-new */ 15 | new Vue({ 16 | el: '#app', 17 | store, 18 | router, 19 | components: { App }, 20 | template: '' 21 | }) 22 | -------------------------------------------------------------------------------- /src/page/user/user.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import createPersistedState from 'vuex-persistedstate' 4 | import home from './modules/home' 5 | import products from './modules/products' 6 | import datasets from './modules/orm/datasets.js' 7 | import reports from './modules/orm/reports.js' 8 | import users from './modules/orm/users.js' 9 | 10 | Vue.use(Vuex) 11 | 12 | export default new Vuex.Store({ 13 | modules: { 14 | home, 15 | products, 16 | datasets, 17 | reports, 18 | users, 19 | }, 20 | plugins: [createPersistedState({ storage: window.sessionStorage })] 21 | }) 22 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Router from 'vue-router'; 3 | import Home from '@/page/home/home'; 4 | import User from '@/page/user/user'; 5 | import Product from '@/page/product/product'; 6 | Vue.use(Router); 7 | 8 | export default new Router({ 9 | mode: 'history', 10 | routes: [ 11 | { 12 | path: '/', 13 | name: 'Home', 14 | component: Home 15 | }, 16 | { 17 | path: '/user', 18 | name: 'User', 19 | component: User 20 | }, 21 | { 22 | path: '/Product', 23 | name: 'Product', 24 | component: Product 25 | } 26 | ] 27 | }); 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vuetemplate 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # build for production and view the bundle analyzer report 18 | npm run build --report 19 | 20 | # run unit tests 21 | npm run unit 22 | 23 | # run all tests 24 | npm test 25 | ``` 26 | 27 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 28 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parserOptions: { 6 | parser: 'babel-eslint' 7 | }, 8 | env: { 9 | browser: true, 10 | }, 11 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 12 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 13 | extends: ['plugin:vue/essential'], 14 | // required to lint *.vue files 15 | plugins: [ 16 | 'vue' 17 | ], 18 | // add your custom rules here 19 | rules: { 20 | // allow debugger during development 21 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/store/modules/products.js: -------------------------------------------------------------------------------- 1 | 2 | // initial state 3 | const state = { 4 | productPeach: '我是桃子', 5 | productApple: '我是苹果', 6 | homeToProduct:'' 7 | } 8 | 9 | // getters 10 | const getters = { 11 | allProductsPeach: state => state.productPeach, 12 | allProductsApple: state => state.productApple, 13 | homeToProduct:state=>state.homeToProduct 14 | } 15 | 16 | // actions 17 | const actions = { 18 | getAllProductsPeach ({ commit },products) { 19 | commit('setProductsPeach', products) 20 | }, 21 | getHomeToProduct({commit},data){ 22 | commit('changeHomeToProduct',data) 23 | } 24 | } 25 | 26 | // mutations 27 | const mutations = { 28 | setProductsPeach (state,data) { 29 | state.productPeach = data 30 | }, 31 | changeHomeToProduct (state,data) { 32 | state.homeToProduct = data 33 | } 34 | } 35 | 36 | export default { 37 | state, 38 | getters, 39 | actions, 40 | mutations 41 | } -------------------------------------------------------------------------------- /src/store/modules/home.js: -------------------------------------------------------------------------------- 1 | import * as home from '@/service/api/home' 2 | 3 | // initial state 4 | const state = { 5 | all: '我是all', 6 | productToHome:'我是productTo' 7 | } 8 | 9 | // getters 10 | const getters = { 11 | allProducts: state => state.all, 12 | productToHome: state => state.productToHome 13 | } 14 | 15 | // actions 16 | const actions = { 17 | getAllProducts ({ commit }) { 18 | home.getProducts((products) => { 19 | commit('setProducts', products) 20 | }) 21 | }, 22 | getProductToHome({commit},data){ 23 | console.log('product将值传入home触发啦') 24 | commit('changeProductToHome',data) 25 | } 26 | } 27 | 28 | // mutations 29 | const mutations = { 30 | setProducts (state,products) { 31 | state.all = products 32 | }, 33 | changeProductToHome (state,data) { 34 | state.productToHome = data 35 | console.log(state.productToHome) 36 | } 37 | } 38 | 39 | export default { 40 | state, 41 | getters, 42 | actions, 43 | mutations 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 karmaConfig(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 | browsers: ['Chrome'], 16 | frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'], 17 | reporters: ['spec', 'coverage'], 18 | files: ['./index.js'], 19 | preprocessors: { 20 | './index.js': ['webpack', 'sourcemap'] 21 | }, 22 | webpack: webpackConfig, 23 | webpackMiddleware: { 24 | noInfo: true 25 | }, 26 | coverageReporter: { 27 | dir: './coverage', 28 | reporters: [{ type: 'lcov', subdir: '.' }, { type: 'text-summary' }] 29 | } 30 | }); 31 | }; 32 | -------------------------------------------------------------------------------- /src/utils/apiPath.js: -------------------------------------------------------------------------------- 1 | let path = '/api', 2 | origin = location.origin, 3 | origins = [ 4 | 'https://wap.rrjc.com', //生产环境 5 | 'https://mobile.rrjc.com', //域名二 6 | 'https://102mobile.rrjc.com', //预发布环境 7 | 'https://23mobile.szrrjc.com', //23测试环境 8 | 'http://23mobile.szrrjc.com', //23测试环境 9 | 'http://109mobile.szrrjc.com', //109测试环境 10 | 'https://108mobile.szrrjc.com', //108测试环境 11 | 'http://114mobile.szrrjc.com', //114测试环境 12 | 'http://116mobile.szrrjc.com', //116测试环境 13 | 'http://178mobile.szrrjc.com', //178测试环境 14 | 'http://179mobile.szrrjc.com', //179测试环境 15 | 'https://115mobile.szrrjc.com', // 115测试环境 16 | 'http://115mobile.szrrjc.com', // 115测试环境 17 | 'https://110mobile.szrrjc.com', // 110测试环境 18 | 'http://110mobile.szrrjc.com', // 110测试环境 19 | 'http://172.19.10.112:180', // 112测试环境 20 | 'https://172.19.10.112:180' // 112测试环境 21 | ]; 22 | for (var i = 0; i < origins.length; i++) { 23 | if (origin == origins[i]) { 24 | // return origin + path; 25 | // break; 26 | } 27 | } 28 | //根据测试要求使用相应api地址 29 | // return 'http://192.168.3.115'+ path; 30 | export const apiPath='http://172.19.10.20' + path; -------------------------------------------------------------------------------- /src/page/product/product.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 59 | 60 | 61 | 66 | -------------------------------------------------------------------------------- /src/utils/util.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 时间戳格式 3 | * @param {*} date 4 | */ 5 | const formatTime = date => { 6 | const year = date.getFullYear(); 7 | const month = date.getMonth() + 1; 8 | const day = date.getDate(); 9 | const hour = date.getHours(); 10 | const minute = date.getMinutes(); 11 | const second = date.getSeconds(); 12 | 13 | return ( 14 | [year, month, day].map(formatNumber).join('/') + 15 | ' ' + 16 | [hour, minute, second].map(formatNumber).join(':') 17 | ); 18 | }; 19 | 20 | /** 21 | * 合并object对象 obj2：合并源 22 | */ 23 | const mergeObj = (obj1, obj2) => { 24 | for (var key in obj2) obj1[key] = obj2[key]; 25 | return obj1; 26 | }; 27 | 28 | /** 29 | * 修改在IOS微信中 title无法修改的问题 30 | * @param {*} title 31 | */ 32 | const setTitle = title => { 33 | document.title = title; 34 | var i = document.createElement('iframe'); 35 | i.src = '//www.rrjc.com/favicon.ico'; 36 | i.style.display = 'none'; 37 | i.onload = function() { 38 | setTimeout(function() { 39 | i.remove(); 40 | }, 9); 41 | }; 42 | document.body.appendChild(i); 43 | }; 44 | 45 | /** 46 | * 设置本地存储 47 | * @param {*} name 48 | * @param {*} val 49 | */ 50 | const setlocalStorage = (name, val) => { 51 | localStorage.setItem(name, val); 52 | }; 53 | 54 | /** 55 | * 截取url参数 56 | * @param {*指定参数名} name 57 | */ 58 | const getQueryString = name => { 59 | var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); 60 | var r = window.location.search.substr(1).match(reg); 61 | if (r != null) { 62 | return unescape(r[2]); 63 | } 64 | return null; 65 | }; 66 | 67 | /** 68 | * 设置活动入口链接，参数：{a标签id : 活动页面pathname} 69 | * @param {*活动页面pathname} obj 70 | */ 71 | const setOutHref = obj => { 72 | for (key in obj) 73 | document.getElementById(key).href = location.origin + obj[key]; 74 | }; 75 | 76 | module.exports = { 77 | formatTime, 78 | mergeObj, 79 | setTitle, 80 | setlocalStorage, 81 | getQueryString, 82 | setOutHref 83 | }; 84 | -------------------------------------------------------------------------------- /src/page/pageTalk/homeProduct.js: -------------------------------------------------------------------------------- 1 | // import Vue from 'vue' 2 | import vuexIndex from '@/store/index' 3 | 4 | /** 5 | * 抽象中介者 6 | */ 7 | class Mediator { 8 | /** 9 | * 一个示例操作 10 | * 11 | * @param colleague 发送消息的同事类 12 | * @param message 消息内容 13 | */ 14 | operate(){ 15 | throw new Error("This method must be overwritten!"); 16 | } 17 | } 18 | 19 | /** 20 | *具体中介者 21 | */ 22 | class ConcreteMediator extends Mediator { 23 | constructor() { 24 | super(); 25 | // 持有的具体同事类 26 | this.firstColleague = new FirstColleague(this), 27 | this.secondColleague = new SecondColleague(this); 28 | } 29 | operate(colleague, message) { 30 | // 同事类之间的交互通过中介者进行。 31 | // 这里只演示了两个同事类。 32 | if(colleague instanceof FirstColleague){ 33 | this.firstColleague.receive(message); 34 | } else if(colleague instanceof SecondColleague) { 35 | this.secondColleague.receive(message); 36 | } 37 | } 38 | } 39 | 40 | /** 41 | * 抽象同事类，如果类，如果具体的同事类之间没有公共的行为，其实可以不用抽象同事类。 42 | */ 43 | class AbstractColleague { 44 | constructor(mediator) { 45 | this._mediator = mediator; 46 | } 47 | send() { 48 | throw new Error("This method must be overwritten!"); 49 | } 50 | receive() { 51 | throw new Error("This method must be overwritten!"); 52 | } 53 | } 54 | 55 | /** 56 | * 具体同事类 57 | */ 58 | class FirstColleague extends AbstractColleague{ 59 | constructor(mediator) { 60 | super(mediator); 61 | } 62 | // 向中介者发送消息。 63 | send(message){ 64 | this._mediator.operate(this, message); 65 | } 66 | // 从中介者接收到的消息。 67 | receive(message){ 68 | // console.log("First Colleague 收到消息：" + message); 69 | vuexIndex.dispatch('getHomeToProduct',message); 70 | } 71 | } 72 | 73 | /** 74 | * 具体同事类 75 | */ 76 | class SecondColleague extends AbstractColleague { 77 | constructor(mediator) { 78 | super(mediator); 79 | } 80 | // 向中介者发送消息。 81 | send(message) { 82 | this._mediator.operate(this, message); 83 | } 84 | // 从中介者接收到的消息。 85 | receive(message) { 86 | // console.log("Second Colleague 收到消息：" + message); 87 | vuexIndex.dispatch('getProductToHome',message) 88 | } 89 | } 90 | 91 | // 把同事类注册到中介者 92 | let mediator = new ConcreteMediator(); 93 | export const firstColleague = new FirstColleague(mediator); 94 | export const secondColleague = new SecondColleague(mediator); 95 | // 同事类之间通过中介者交互 96 | 97 | // firstColleague.send("Hello World"); 98 | // secondColleague.send("Word Count"); 99 | 100 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: {}, 14 | 15 | // Various Dev Server settings 16 | host: 'localhost', // can be overwritten by process.env.HOST 17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 18 | autoOpenBrowser: false, 19 | errorOverlay: true, 20 | notifyOnErrors: true, 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 22 | 23 | // Use Eslint Loader? 24 | // If true, your code will be linted during bundling and 25 | // linting errors and warnings will be shown in the console. 26 | useEslint: true, 27 | // If true, eslint errors and warnings will also be shown in the error overlay 28 | // in the browser. 29 | showEslintErrorsInOverlay: false, 30 | 31 | /** 32 | * Source Maps 33 | */ 34 | 35 | // https://webpack.js.org/configuration/devtool/#development 36 | devtool: 'cheap-module-eval-source-map', 37 | 38 | // If you have problems debugging vue-files in devtools, 39 | // set this to false - it *may* help 40 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 41 | cacheBusting: true, 42 | 43 | cssSourceMap: true 44 | }, 45 | 46 | build: { 47 | // Template for index.html 48 | index: path.resolve(__dirname, '../dist/index.html'), 49 | 50 | // Paths 51 | assetsRoot: path.resolve(__dirname, '../dist'), 52 | assetsSubDirectory: 'static', 53 | assetsPublicPath: '/', 54 | 55 | /** 56 | * Source Maps 57 | */ 58 | 59 | productionSourceMap: true, 60 | // https://webpack.js.org/configuration/devtool/#production 61 | devtool: '#source-map', 62 | 63 | // Gzip off by default as many popular static hosts such as 64 | // Surge or Netlify already gzip all static assets for you. 65 | // Before setting to `true`, make sure to: 66 | // npm install --save-dev compression-webpack-plugin 67 | productionGzip: false, 68 | productionGzipExtensions: ['js', 'css'], 69 | 70 | // Run the build command with an extra argument to 71 | // View the bundle analyzer report after build finishes: 72 | // `npm run build --report` 73 | // Set to `true` or `false` to always turn it on or off 74 | bundleAnalyzerReport: process.env.npm_config_report 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuetemplate", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "zhuangpeifen ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run", 11 | "test": "npm run unit", 12 | "lint": "eslint --ext .js,.vue src test/unit", 13 | "build": "node build/build.js" 14 | }, 15 | "dependencies": { 16 | "element-ui": "^2.3.9", 17 | "vue": "^2.5.2", 18 | "vue-router": "^3.0.1", 19 | "vuex": "^3.0.1", 20 | "vuex-persistedstate": "^2.5.4" 21 | 22 | }, 23 | "devDependencies": { 24 | "autoprefixer": "^7.1.2", 25 | "babel-core": "^6.22.1", 26 | "babel-eslint": "^8.2.1", 27 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 28 | "babel-loader": "^7.1.1", 29 | "babel-plugin-istanbul": "^4.1.1", 30 | "babel-plugin-syntax-jsx": "^6.18.0", 31 | "babel-plugin-transform-runtime": "^6.22.0", 32 | "babel-plugin-transform-vue-jsx": "^3.5.0", 33 | "babel-preset-env": "^1.3.2", 34 | "babel-preset-stage-2": "^6.22.0", 35 | "chai": "^4.1.2", 36 | "chalk": "^2.0.1", 37 | "copy-webpack-plugin": "^4.0.1", 38 | "cross-env": "^5.0.1", 39 | "css-loader": "^0.28.0", 40 | "eslint": "^4.15.0", 41 | "eslint-friendly-formatter": "^3.0.0", 42 | "eslint-loader": "^1.7.1", 43 | "eslint-plugin-vue": "^4.0.0", 44 | "extract-text-webpack-plugin": "^3.0.0", 45 | "file-loader": "^1.1.4", 46 | "friendly-errors-webpack-plugin": "^1.6.1", 47 | "html-webpack-plugin": "^2.30.1", 48 | "inject-loader": "^3.0.0", 49 | "karma": "^1.4.1", 50 | "karma-coverage": "^1.1.1", 51 | "karma-mocha": "^1.3.0", 52 | "karma-chrome-launcher": "^2.2.0", 53 | "karma-phantomjs-launcher": "^1.0.2", 54 | "karma-phantomjs-shim": "^1.4.0", 55 | "karma-sinon-chai": "^1.3.1", 56 | "karma-sourcemap-loader": "^0.3.7", 57 | "karma-spec-reporter": "0.0.31", 58 | "karma-webpack": "^2.0.2", 59 | "mocha": "^3.2.0", 60 | "node-notifier": "^5.1.2", 61 | "optimize-css-assets-webpack-plugin": "^3.2.0", 62 | "ora": "^1.2.0", 63 | "phantomjs-prebuilt": "^2.1.14", 64 | "portfinder": "^1.0.13", 65 | "postcss-import": "^11.0.0", 66 | "postcss-loader": "^2.0.8", 67 | "postcss-url": "^7.2.1", 68 | "rimraf": "^2.6.0", 69 | "semver": "^5.3.0", 70 | "shelljs": "^0.7.6", 71 | "sinon": "^4.0.0", 72 | "sinon-chai": "^2.8.0", 73 | "uglifyjs-webpack-plugin": "^1.1.1", 74 | "url-loader": "^0.5.8", 75 | "vue-loader": "^13.3.0", 76 | "vue-style-loader": "^3.0.1", 77 | "vue-template-compiler": "^2.5.2", 78 | "webpack": "^3.6.0", 79 | "webpack-bundle-analyzer": "^2.9.0", 80 | "webpack-dev-server": "^2.9.1", 81 | "webpack-merge": "^4.1.0" 82 | }, 83 | "engines": { 84 | "node": ">= 6.0.0", 85 | "npm": ">= 3.0.0" 86 | }, 87 | "browserslist": [ 88 | "> 1%", 89 | "last 2 versions", 90 | "not ie <= 8" 91 | ] 92 | } 93 | -------------------------------------------------------------------------------- /src/page/home/home.vue: -------------------------------------------------------------------------------- 1 | 85 | 100 | 101 | --------------------------------------------------------------------------------