├── config
    ├── prod.env.js
    ├── test.env.js
    ├── dev.env.js
    └── index.js
├── src
    ├── common
    │   ├── img
    │   │   └── rwtx.png
    │   ├── video
    │   │   └── test.mp4
    │   ├── css
    │   │   └── font
    │   │   │   ├── reducto_condensed_ssi_condensed-webfont.eot
    │   │   │   ├── reducto_condensed_ssi_condensed-webfont.ttf
    │   │   │   ├── reducto_condensed_ssi_condensed-webfont.woff
    │   │   │   └── reducto_condensed_ssi_condensed-webfont.woff2
    │   └── js
    │   │   ├── viewport
    │   │       └── viewport1366.js
    │   │   └── store.js
    ├── api
    │   ├── url.js
    │   └── http.js
    ├── util
    │   ├── mixins
    │   │   ├── locale.js
    │   │   ├── emitter.js
    │   │   └── clickOutside.js
    │   ├── secret.js
    │   ├── utils
    │   │   ├── secret.js
    │   │   ├── tools.js
    │   │   └── valid.js
    │   └── tools.js
    ├── framePage
    │   ├── App.vue
    │   ├── index.html
    │   ├── components
    │   │   ├── login.vue
    │   │   ├── theme.vue
    │   │   ├── account.vue
    │   │   └── index.vue
    │   ├── index.js
    │   └── router
    │   │   └── index.js
    ├── modules
    │   ├── homemodule
    │   │   ├── App.vue
    │   │   ├── components
    │   │   │   └── index.vue
    │   │   ├── index.js
    │   │   ├── router
    │   │   │   └── index.js
    │   │   └── index.html
    │   ├── bbsmodule
    │   │   ├── App.vue
    │   │   ├── components
    │   │   │   └── index.vue
    │   │   ├── index.js
    │   │   ├── router
    │   │   │   └── index.js
    │   │   └── index.html
    │   ├── blogmodule
    │   │   ├── App.vue
    │   │   ├── components
    │   │   │   └── index.vue
    │   │   ├── index.js
    │   │   ├── router
    │   │   │   └── index.js
    │   │   └── index.html
    │   ├── musicmodule
    │   │   ├── App.vue
    │   │   ├── components
    │   │   │   └── index.vue
    │   │   ├── index.js
    │   │   ├── router
    │   │   │   └── index.js
    │   │   └── index.html
    │   ├── socialmodule
    │   │   ├── App.vue
    │   │   ├── index.js
    │   │   ├── components
    │   │   │   └── index.vue
    │   │   ├── router
    │   │   │   └── index.js
    │   │   └── index.html
    │   ├── storemodule
    │   │   ├── App.vue
    │   │   ├── components
    │   │   │   └── index.vue
    │   │   ├── index.js
    │   │   ├── router
    │   │   │   └── index.js
    │   │   └── index.html
    │   ├── clubmodule
    │   │   ├── App.vue
    │   │   ├── components
    │   │   │   └── index.vue
    │   │   ├── index.js
    │   │   ├── router
    │   │   │   └── index.js
    │   │   └── index.html
    │   ├── coursemodule
    │   │   ├── App.vue
    │   │   ├── components
    │   │   │   └── index.vue
    │   │   ├── index.js
    │   │   ├── router
    │   │   │   └── index.js
    │   │   └── index.html
    │   ├── textmodule
    │   │   ├── App.vue
    │   │   ├── components
    │   │   │   └── index.vue
    │   │   ├── index.js
    │   │   ├── router
    │   │   │   └── index.js
    │   │   └── index.html
    │   ├── productmodule
    │   │   ├── App.vue
    │   │   ├── components
    │   │   │   └── index.vue
    │   │   ├── index.js
    │   │   ├── router
    │   │   │   └── index.js
    │   │   └── index.html
    │   └── supportmodule
    │   │   ├── App.vue
    │   │   ├── components
    │   │       └── index.vue
    │   │   ├── index.js
    │   │   ├── router
    │   │       └── index.js
    │   │   └── index.html
    ├── components
    │   ├── HelloWorld.vue
    │   └── Pagenation.vue
    ├── assets
    │   └── css
    │   │   └── style.css
    └── vuex
    │   ├── store.js
    │   └── readme.txt
├── static
    └── webfavicon
    │   └── favicon.ico
├── test
    ├── unit
    │   ├── .eslintrc
    │   ├── specs
    │   │   └── HelloWorld.spec.js
    │   ├── index.js
    │   └── karma.conf.js
    └── e2e
    │   ├── specs
    │       └── test.js
    │   ├── custom-assertions
    │       └── elementCount.js
    │   ├── nightwatch.conf.js
    │   └── runner.js
├── document
    ├── vue-multipage-platform-project.docx
    ├── vuex
    │   ├── vueX.txt
    │   ├── store.js
    │   └── Vuexstore.vue
    ├── router
    │   ├── index.js
    │   └── router.txt
    ├── main.txt
    └── component.txt
├── .editorconfig
├── .postcssrc.js
├── moduletemplate
    ├── index.html
    ├── App.vue
    └── main.js
├── .eslintignore
├── .babelrc
├── README.md
├── projectConfig
    └── index.js
├── package.json
└── .eslintrc.js


/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 |   NODE_ENV: '"production"'
4 | }
5 | 


--------------------------------------------------------------------------------
/src/common/img/rwtx.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Titans1001/vue-multipage-platform-project/HEAD/src/common/img/rwtx.png


--------------------------------------------------------------------------------
/src/common/video/test.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Titans1001/vue-multipage-platform-project/HEAD/src/common/video/test.mp4


--------------------------------------------------------------------------------
/static/webfavicon/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Titans1001/vue-multipage-platform-project/HEAD/static/webfavicon/favicon.ico


--------------------------------------------------------------------------------
/test/unit/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": { 
 3 |     "mocha": true
 4 |   },
 5 |   "globals": { 
 6 |     "expect": true,
 7 |     "sinon": true
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/document/vue-multipage-platform-project.docx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Titans1001/vue-multipage-platform-project/HEAD/document/vue-multipage-platform-project.docx


--------------------------------------------------------------------------------
/src/api/url.js:
--------------------------------------------------------------------------------
1 | export const baseUrl = '' // 服务端请求地址域
2 | export const sysUrl = '' // 服务端统一身份认证请求基地址
3 | export const fileUrl = '' // 服务端文件资源请求基地址
4 | export const prefixUrl ='' // 服务端请求地址前缀
5 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/src/common/css/font/reducto_condensed_ssi_condensed-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Titans1001/vue-multipage-platform-project/HEAD/src/common/css/font/reducto_condensed_ssi_condensed-webfont.eot


--------------------------------------------------------------------------------
/src/common/css/font/reducto_condensed_ssi_condensed-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Titans1001/vue-multipage-platform-project/HEAD/src/common/css/font/reducto_condensed_ssi_condensed-webfont.ttf


--------------------------------------------------------------------------------
/src/util/mixins/locale.js:
--------------------------------------------------------------------------------
 1 | import { t } from '../local/index'
 2 | 
 3 | export default {
 4 |   methods: {
 5 |     t(...args) {
 6 |       return t.apply(this, args)
 7 |     }
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/.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/common/css/font/reducto_condensed_ssi_condensed-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Titans1001/vue-multipage-platform-project/HEAD/src/common/css/font/reducto_condensed_ssi_condensed-webfont.woff


--------------------------------------------------------------------------------
/src/common/css/font/reducto_condensed_ssi_condensed-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Titans1001/vue-multipage-platform-project/HEAD/src/common/css/font/reducto_condensed_ssi_condensed-webfont.woff2


--------------------------------------------------------------------------------
/src/framePage/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'App',
10 |   data () {
11 |     return {
12 |       
13 |     }
14 |   }
15 | }
16 | </script>
17 | 
18 | <style>
19 | 
20 | </style>
21 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/moduletemplate/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <title>vue-multipage</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <!-- built files will be auto injected -->
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/modules/homemodule/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <h2>{{message}}</h2>
 4 |     <router-view/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'App',
11 |   data () {
12 |     return {
13 |       message: '首页（homemodule）'
14 |     }
15 |   }
16 | }
17 | </script>
18 | 
19 | <style>
20 | </style>
21 | 


--------------------------------------------------------------------------------
/src/modules/bbsmodule/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |   	<h2>{{message}}</h2>
 4 |     <router-view/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'App',
11 |   data () {
12 |     return {
13 |       message: '论坛（bbsmodule）'
14 |     }
15 |   }
16 | }
17 | </script>
18 | 
19 | <style>
20 | 
21 | </style>
22 | 


--------------------------------------------------------------------------------
/src/modules/blogmodule/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |   	<h2>{{message}}</h2>
 4 |     <router-view/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'App',
11 |   data () {
12 |     return {
13 |       message: '博客（blogmodule）'
14 |     }
15 |   }
16 | }
17 | </script>
18 | 
19 | <style>
20 | 
21 | </style>
22 | 


--------------------------------------------------------------------------------
/src/modules/musicmodule/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <h2>{{message}}</h2>
 4 |     <router-view/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'App',
11 |   data () {
12 |     return {
13 |       message: '音乐（musicmodule）'
14 |     }
15 |   }
16 | }
17 | </script>
18 | 
19 | <style>
20 | </style>
21 | 


--------------------------------------------------------------------------------
/src/modules/socialmodule/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <h2>{{message}}</h2>
 4 |     <router-view/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'App',
11 |   data () {
12 |     return {
13 |       message: '社交（socialmodule）'
14 |     }
15 |   }
16 | }
17 | </script>
18 | 
19 | <style>
20 | </style>
21 | 


--------------------------------------------------------------------------------
/src/modules/storemodule/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <h2>{{message}}</h2>
 4 |     <router-view/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'App',
11 |   data () {
12 |     return {
13 |       message: '店铺（storemodule）'
14 |     }
15 |   }
16 | }
17 | </script>
18 | 
19 | <style>
20 | </style>
21 | 


--------------------------------------------------------------------------------
/src/modules/clubmodule/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <h2>{{message}}</h2>
 4 |     <router-view/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'App',
11 |   data () {
12 |     return {
13 |       message: '社区（clubmodule）'
14 |     }
15 |   }
16 | }
17 | </script>
18 | 
19 | <style>
20 | 
21 | </style>
22 | 


--------------------------------------------------------------------------------
/src/modules/coursemodule/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |   	<h2>{{message}}</h2>
 4 |     <router-view/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'App',
11 |   data () {
12 |     return {
13 |       message: '网课（coursemodule）'
14 |     }
15 |   }
16 | }
17 | </script>
18 | 
19 | <style>
20 | 
21 | </style>
22 | 


--------------------------------------------------------------------------------
/src/modules/textmodule/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <h2>{{message}}</h2>
 4 |     <router-view/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'App',
11 |   data () {
12 |     return {
13 |       message: '文字（textmodule）'
14 |     }
15 |   }
16 | }
17 | </script>
18 | 
19 | <style>
20 | 
21 | </style>
22 | 


--------------------------------------------------------------------------------
/src/modules/productmodule/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <h2>{{message}}</h2>
 4 |     <router-view/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'App',
11 |   data () {
12 |     return {
13 |       message: '产品（productmodule）'
14 |     }
15 |   }
16 | }
17 | </script>
18 | 
19 | <style>
20 | 
21 | </style>
22 | 


--------------------------------------------------------------------------------
/src/modules/supportmodule/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <h2>{{message}}</h2>
 4 |     <router-view/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'App',
11 |   data () {
12 |     return {
13 |       message: '支持（supportmodule）'
14 |     }
15 |   }
16 | }
17 | </script>
18 | 
19 | <style>
20 | 
21 | </style>
22 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | /dist
 3 | selenium-debug.log
 4 | chromedriver.log
 5 | geckodriver.log
 6 | 
 7 | # local env files
 8 | .env.local
 9 | .env.*.local
10 | 
11 | # Log files
12 | npm-debug.log*
13 | yarn-debug.log*
14 | yarn-error.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?


--------------------------------------------------------------------------------
/src/modules/bbsmodule/components/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <hello-world></hello-world>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import HelloWorld from '*/HelloWorld.vue'
 9 | export default {
10 |   name: 'index',
11 |   components: {HelloWorld},
12 |   data () {
13 |     return {
14 |     }
15 |   },
16 |   methods: {},
17 |   created () {}
18 | }
19 | </script>
20 | <style scoped>
21 | </style>
22 | 


--------------------------------------------------------------------------------
/src/modules/bbsmodule/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Administrator on 2018/4/22.
 3 |  */
 4 | import Vue from 'vue'
 5 | import App from './App'
 6 | import router from './router'
 7 | 
 8 | Vue.config.productionTip = false
 9 | import '@/common/css/common.css'
10 | import '@/assets/css/style.css'
11 | 
12 | /* eslint-disable no-new */
13 | window.bbsmodule=new Vue({
14 |   el: '#app',
15 |   router,
16 |   render: h => h(App)
17 | })
18 | 


--------------------------------------------------------------------------------
/src/modules/clubmodule/components/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <hello-world></hello-world>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import HelloWorld from '*/HelloWorld.vue'
 9 | export default {
10 |   name: 'b-sub-module1',
11 |   components: {HelloWorld},
12 |   data () {
13 |     return {
14 |     }
15 |   },
16 |   methods: {},
17 |   created () {}
18 | }
19 | </script>
20 | <style scoped>
21 | </style>
22 | 


--------------------------------------------------------------------------------
/src/modules/clubmodule/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Administrator on 2018/4/22.
 3 |  */
 4 | import Vue from 'vue'
 5 | import App from './App'
 6 | import router from './router'
 7 | 
 8 | Vue.config.productionTip = false
 9 | import '@/common/css/common.css'
10 | import '@/assets/css/style.css'
11 | 
12 | /* eslint-disable no-new */
13 | window.clubmodule=new Vue({
14 |   el: '#app',
15 |   router,
16 |   render: h => h(App)
17 | })
18 | 


--------------------------------------------------------------------------------
/src/modules/coursemodule/components/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <hello-world></hello-world>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import HelloWorld from '*/HelloWorld.vue'
 9 | export default {
10 |   name: 'b-sub-module1',
11 |   components: {HelloWorld},
12 |   data () {
13 |     return {
14 |     }
15 |   },
16 |   methods: {},
17 |   created () {}
18 | }
19 | </script>
20 | <style scoped>
21 | </style>
22 | 


--------------------------------------------------------------------------------
/src/modules/musicmodule/components/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <hello-world></hello-world>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import HelloWorld from '*/HelloWorld.vue'
 9 | export default {
10 |   name: 'musicmodule',
11 |   components: {HelloWorld},
12 |   data () {
13 |     return {
14 |     }
15 |   },
16 |   methods: {},
17 |   created () {}
18 | }
19 | </script>
20 | <style scoped>
21 | </style>
22 | 


--------------------------------------------------------------------------------
/src/modules/storemodule/components/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <hello-world></hello-world>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import HelloWorld from '*/HelloWorld.vue'
 9 | export default {
10 |   name: 'b-sub-module1',
11 |   components: {HelloWorld},
12 |   data () {
13 |     return {
14 |     }
15 |   },
16 |   methods: {},
17 |   created () {}
18 | }
19 | </script>
20 | <style scoped>
21 | </style>
22 | 


--------------------------------------------------------------------------------
/test/unit/specs/HelloWorld.spec.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import HelloWorld from '@/components/HelloWorld'
 3 | 
 4 | describe('HelloWorld.vue', () => {
 5 |   it('should render correct contents', () => {
 6 |     const Constructor = Vue.extend(HelloWorld)
 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 | 


--------------------------------------------------------------------------------
/.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/modules/coursemodule/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Administrator on 2018/4/22.
 3 |  */
 4 | import Vue from 'vue'
 5 | import App from './App'
 6 | import router from './router'
 7 | 
 8 | Vue.config.productionTip = false
 9 | import '@/common/css/common.css'
10 | import '@/assets/css/style.css'
11 | 
12 | /* eslint-disable no-new */
13 | window.coursemodule=new Vue({
14 |   el: '#app',
15 |   router,
16 |   render: h => h(App)
17 | })
18 | 


--------------------------------------------------------------------------------
/src/modules/musicmodule/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Administrator on 2018/4/22.
 3 |  */
 4 | import Vue from 'vue'
 5 | import App from './App'
 6 | import router from './router'
 7 | 
 8 | Vue.config.productionTip = false
 9 | import '@/common/css/common.css'
10 | import '@/assets/css/style.css'
11 | 
12 | /* eslint-disable no-new */
13 | window.musicmodule=new Vue({
14 |   el: '#app',
15 |   router,
16 |   render: h => h(App)
17 | })
18 | 


--------------------------------------------------------------------------------
/src/modules/storemodule/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Administrator on 2018/4/22.
 3 |  */
 4 | import Vue from 'vue'
 5 | import App from './App'
 6 | import router from './router'
 7 | 
 8 | Vue.config.productionTip = false
 9 | import '@/common/css/common.css'
10 | import '@/assets/css/style.css'
11 | 
12 | /* eslint-disable no-new */
13 | window.storemodule=new Vue({
14 |   el: '#app',
15 |   router,
16 |   render: h => h(App)
17 | })
18 | 


--------------------------------------------------------------------------------
/src/modules/blogmodule/components/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <hello-world></hello-world>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import HelloWorld from '../../../components/HelloWorld'
 9 | export default {
10 |   name: 'bbsindex',
11 |   components: {HelloWorld},
12 |   data () {
13 |     return {
14 |     }
15 |   },
16 |   methods: {},
17 |   created () {}
18 | }
19 | </script>
20 | <style scoped>
21 | </style>
22 | 


--------------------------------------------------------------------------------
/src/modules/homemodule/components/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <hello-world></hello-world>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import HelloWorld from '../../../components/HelloWorld'
 9 | export default {
10 |   name: 'homemodule',
11 |   components: {HelloWorld},
12 |   data () {
13 |     return {
14 |     }
15 |   },
16 |   methods: {},
17 |   created () {}
18 | }
19 | </script>
20 | <style scoped>
21 | </style>
22 | 


--------------------------------------------------------------------------------
/src/modules/socialmodule/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Administrator on 2018/4/22.
 3 |  */
 4 | import Vue from 'vue'
 5 | import App from './App'
 6 | import router from './router'
 7 | 
 8 | Vue.config.productionTip = false
 9 | import '@/common/css/common.css'
10 | import '@/assets/css/style.css'
11 | 
12 | 
13 | /* eslint-disable no-new */
14 | window.socialmodule=new Vue({
15 |   el: '#app',
16 |   router,
17 |   render: h => h(App)
18 | })
19 | 


--------------------------------------------------------------------------------
/src/modules/blogmodule/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Administrator on 2018/4/22.
 3 |  */
 4 | import Vue from 'vue'
 5 | import App from './App'
 6 | import router from './router'
 7 | 
 8 | Vue.config.productionTip = false
 9 | import '@/common/css/common.css'
10 | import '@/assets/css/style.css'
11 | 
12 | 
13 | 
14 | /* eslint-disable no-new */
15 | window.blogmodule=new Vue({
16 |   el: '#app',
17 |   router,
18 |   render: h => h(App)
19 | })
20 | 


--------------------------------------------------------------------------------
/src/modules/homemodule/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Administrator on 2018/4/22.
 3 |  */
 4 | import Vue from 'vue'
 5 | import App from './App'
 6 | import router from './router'
 7 | 
 8 | Vue.config.productionTip = false
 9 | import '@/common/css/common.css'
10 | import '@/assets/css/style.css'
11 | 
12 | 
13 | 
14 | /* eslint-disable no-new */
15 | window.homemodule=new Vue({
16 |   el: '#app',
17 |   router,
18 |   render: h => h(App)
19 | })
20 | 


--------------------------------------------------------------------------------
/src/modules/productmodule/components/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <hello-world></hello-world>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import HelloWorld from '../../../components/HelloWorld'
 9 | export default {
10 |   name: 'a-sub-module1',
11 |   components: {HelloWorld},
12 |   data () {
13 |     return {
14 |     }
15 |   },
16 |   methods: {},
17 |   created () {}
18 | }
19 | </script>
20 | <style scoped>
21 | </style>
22 | 


--------------------------------------------------------------------------------
/src/modules/socialmodule/components/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <hello-world></hello-world>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import HelloWorld from '../../../components/HelloWorld'
 9 | export default {
10 |   name: 'a-sub-module1',
11 |   components: {HelloWorld},
12 |   data () {
13 |     return {
14 |     }
15 |   },
16 |   methods: {},
17 |   created () {}
18 | }
19 | </script>
20 | <style scoped>
21 | </style>
22 | 


--------------------------------------------------------------------------------
/src/modules/supportmodule/components/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <hello-world></hello-world>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import HelloWorld from '../../../components/HelloWorld'
 9 | export default {
10 |   name: 'a-sub-module1',
11 |   components: {HelloWorld},
12 |   data () {
13 |     return {
14 |     }
15 |   },
16 |   methods: {},
17 |   created () {}
18 | }
19 | </script>
20 | <style scoped>
21 | </style>
22 | 


--------------------------------------------------------------------------------
/src/modules/supportmodule/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Administrator on 2018/4/22.
 3 |  */
 4 | import Vue from 'vue'
 5 | import App from './App'
 6 | import router from './router'
 7 | 
 8 | Vue.config.productionTip = false
 9 | import '@/common/css/common.css'
10 | import '@/assets/css/style.css'
11 | 
12 | 
13 | /* eslint-disable no-new */
14 | window.supportmodule=new Vue({
15 |   el: '#app',
16 |   router,
17 |   render: h => h(App)
18 | })
19 | 


--------------------------------------------------------------------------------
/src/modules/textmodule/components/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <hello-world></hello-world>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import HelloWorld from '../../../components/HelloWorld'
 9 | export default {
10 |   name: 'a-sub-module1',
11 |   components: {HelloWorld},
12 |   data () {
13 |     return {
14 |     }
15 |   },
16 |   methods: {},
17 |   created () {}
18 | }
19 | </script>
20 | <style scoped>
21 | </style>
22 | 


--------------------------------------------------------------------------------
/src/modules/textmodule/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Administrator on 2018/4/22.
 3 |  */
 4 | import Vue from 'vue'
 5 | import App from './App'
 6 | import router from './router'
 7 | 
 8 | Vue.config.productionTip = false
 9 | import '@/common/css/common.css'
10 | import '@/assets/css/style.css'
11 | 
12 | 
13 | 
14 | /* eslint-disable no-new */
15 | window.textmodule=new Vue({
16 |   el: '#app',
17 |   router,
18 |   render: h => h(App)
19 | })
20 | 


--------------------------------------------------------------------------------
/src/modules/bbsmodule/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Index from '../components/index'
 4 | 
 5 | import HelloWorld from '*/HelloWorld.vue'
 6 | Vue.use(Router)
 7 | 
 8 | export default new Router({
 9 |   routes: [
10 |     {
11 |       path: '',
12 |       redirect: '/index'
13 |     },
14 |     {
15 |       path: '/index',
16 |       name: 'index',
17 |       component: Index
18 |     }
19 |   ]
20 | })


--------------------------------------------------------------------------------
/src/modules/blogmodule/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Index from '../components/index'
 4 | 
 5 | import HelloWorld from '*/HelloWorld.vue'
 6 | Vue.use(Router)
 7 | 
 8 | export default new Router({
 9 |   routes: [
10 |     {
11 |       path: '',
12 |       redirect: '/index'
13 |     },
14 |     {
15 |       path: '/index',
16 |       name: 'index',
17 |       component: Index
18 |     }
19 |   ]
20 | })


--------------------------------------------------------------------------------
/src/modules/clubmodule/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Index from '../components/index'
 4 | 
 5 | import HelloWorld from '*/HelloWorld.vue'
 6 | Vue.use(Router)
 7 | 
 8 | export default new Router({
 9 |   routes: [
10 |     {
11 |       path: '',
12 |       redirect: '/index'
13 |     },
14 |     {
15 |       path: '/index',
16 |       name: 'index',
17 |       component: Index
18 |     }
19 |   ]
20 | })


--------------------------------------------------------------------------------
/src/modules/coursemodule/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Index from '../components/index'
 4 | 
 5 | import HelloWorld from '*/HelloWorld.vue'
 6 | Vue.use(Router)
 7 | 
 8 | export default new Router({
 9 |   routes: [
10 |     {
11 |       path: '',
12 |       redirect: '/index'
13 |     },
14 |     {
15 |       path: '/index',
16 |       name: 'index',
17 |       component: Index
18 |     }
19 |   ]
20 | })


--------------------------------------------------------------------------------
/src/modules/homemodule/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Index from '../components/index'
 4 | 
 5 | import HelloWorld from '*/HelloWorld.vue'
 6 | Vue.use(Router)
 7 | 
 8 | export default new Router({
 9 |   routes: [
10 |     {
11 |       path: '',
12 |       redirect: '/index'
13 |     },
14 |     {
15 |       path: '/index',
16 |       name: 'index',
17 |       component: Index
18 |     }
19 |   ]
20 | })


--------------------------------------------------------------------------------
/src/modules/musicmodule/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Index from '../components/index'
 4 | 
 5 | import HelloWorld from '*/HelloWorld.vue'
 6 | Vue.use(Router)
 7 | 
 8 | export default new Router({
 9 |   routes: [
10 |     {
11 |       path: '',
12 |       redirect: '/index'
13 |     },
14 |     {
15 |       path: '/index',
16 |       name: 'index',
17 |       component: Index
18 |     }
19 |   ]
20 | })


--------------------------------------------------------------------------------
/src/modules/productmodule/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Administrator on 2018/4/22.
 3 |  */
 4 | import Vue from 'vue'
 5 | import App from './App'
 6 | import router from './router'
 7 | 
 8 | Vue.config.productionTip = false
 9 | import '@/common/css/common.css'
10 | import '@/assets/css/style.css'
11 | 
12 | 
13 | 
14 | /* eslint-disable no-new */
15 | window.productmodule=new Vue({
16 |   el: '#app',
17 |   router,
18 |   render: h => h(App)
19 | })
20 | 


--------------------------------------------------------------------------------
/src/modules/socialmodule/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Index from '../components/index'
 4 | 
 5 | import HelloWorld from '*/HelloWorld.vue'
 6 | Vue.use(Router)
 7 | 
 8 | export default new Router({
 9 |   routes: [
10 |     {
11 |       path: '',
12 |       redirect: '/index'
13 |     },
14 |     {
15 |       path: '/index',
16 |       name: 'index',
17 |       component: Index
18 |     }
19 |   ]
20 | })


--------------------------------------------------------------------------------
/src/modules/storemodule/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Index from '../components/index'
 4 | 
 5 | import HelloWorld from '*/HelloWorld.vue'
 6 | Vue.use(Router)
 7 | 
 8 | export default new Router({
 9 |   routes: [
10 |     {
11 |       path: '',
12 |       redirect: '/index'
13 |     },
14 |     {
15 |       path: '/index',
16 |       name: 'index',
17 |       component: Index
18 |     }
19 |   ]
20 | })


--------------------------------------------------------------------------------
/src/modules/textmodule/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Index from '../components/index'
 4 | 
 5 | import HelloWorld from '*/HelloWorld.vue'
 6 | Vue.use(Router)
 7 | 
 8 | export default new Router({
 9 |   routes: [
10 |     {
11 |       path: '',
12 |       redirect: '/index'
13 |     },
14 |     {
15 |       path: '/index',
16 |       name: 'index',
17 |       component: Index
18 |     }
19 |   ]
20 | })


--------------------------------------------------------------------------------
/src/modules/productmodule/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Index from '../components/index'
 4 | 
 5 | import HelloWorld from '*/HelloWorld.vue'
 6 | Vue.use(Router)
 7 | 
 8 | export default new Router({
 9 |   routes: [
10 |     {
11 |       path: '',
12 |       redirect: '/index'
13 |     },
14 |     {
15 |       path: '/index',
16 |       name: 'index',
17 |       component: Index
18 |     }
19 |   ]
20 | })


--------------------------------------------------------------------------------
/src/modules/supportmodule/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Index from '../components/index'
 4 | 
 5 | import HelloWorld from '*/HelloWorld.vue'
 6 | Vue.use(Router)
 7 | 
 8 | export default new Router({
 9 |   routes: [
10 |     {
11 |       path: '',
12 |       redirect: '/index'
13 |     },
14 |     {
15 |       path: '/index',
16 |       name: 'index',
17 |       component: Index
18 |     }
19 |   ]
20 | })


--------------------------------------------------------------------------------
/moduletemplate/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <img src="./assets/logo.png">
 4 |     <router-view/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'App'
11 | }
12 | </script>
13 | 
14 | <style>
15 | #app {
16 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
17 |   -webkit-font-smoothing: antialiased;
18 |   -moz-osx-font-smoothing: grayscale;
19 |   text-align: center;
20 |   color: #2c3e50;
21 |   margin-top: 60px;
22 | }
23 | </style>
24 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="deving-con">
 3 |     <div class="deving">
 4 |       <h1>当前模块正在开发ing...........</h1>
 5 |       <h2>敬请期待ing...........</h2>
 6 |     </div>
 7 |   </div>
 8 | </template>
 9 | <script>
10 | export default {
11 |   name: 'HelloWorld',
12 |   data() {
13 |     return {
14 |       msg: '我是公共组件啊！'
15 |     }
16 |   }
17 | }
18 | 
19 | </script>
20 | <!-- Add "scoped" attribute to limit CSS to this component only -->
21 | <style scoped>
22 | </style>
23 | 


--------------------------------------------------------------------------------
/src/modules/bbsmodule/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>模块b</title>
 7 |   <link rel="shortcut icon" href="static/webfavicon/favicon.ico" type="image/x-icon" /><!-- 必须 -->
 8 |   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 9 | </head>
10 | 
11 | <body>
12 |   <div id="app"></div>
13 |   <!-- built files will be auto injected -->
14 | </body>
15 | 
16 | </html>
17 | 


--------------------------------------------------------------------------------
/src/modules/blogmodule/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <title>博客（blog）</title>
 6 |   <meta charset="utf-8">
 7 |   <link rel="shortcut icon" href="static/webfavicon/favicon.ico" type="image/x-icon" /><!-- 必须 -->
 8 |   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 9 | </head>
10 | 
11 | <body>
12 |   <div id="app"></div>
13 |   <!-- built files will be auto injected -->
14 | </body>
15 | 
16 | </html>
17 | 


--------------------------------------------------------------------------------
/src/modules/clubmodule/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>社区（club）</title>
 7 |   <link rel="shortcut icon" href="static/webfavicon/favicon.ico" type="image/x-icon" /><!-- 必须 -->
 8 |   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 9 | </head>
10 | 
11 | <body>
12 |   <div id="app"></div>
13 |   <!-- built files will be auto injected -->
14 | </body>
15 | 
16 | </html>
17 | 


--------------------------------------------------------------------------------
/src/modules/homemodule/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <title>首页（home）</title>
 6 |   <meta charset="utf-8">
 7 |   <link rel="shortcut icon" href="static/webfavicon/favicon.ico" type="image/x-icon" /><!-- 必须 -->
 8 |   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 9 | </head>
10 | 
11 | <body>
12 |   <div id="app"></div>
13 |   <!-- built files will be auto injected -->
14 | </body>
15 | 
16 | </html>
17 | 


--------------------------------------------------------------------------------
/src/modules/musicmodule/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>音乐（music）</title>
 7 |   <link rel="shortcut icon" href="static/webfavicon/favicon.ico" type="image/x-icon" /><!-- 必须 -->
 8 |   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 9 | </head>
10 | 
11 | <body>
12 |   <div id="app"></div>
13 |   <!-- built files will be auto injected -->
14 | </body>
15 | 
16 | </html>
17 | 


--------------------------------------------------------------------------------
/src/modules/storemodule/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>店铺（store）</title>
 7 |   <link rel="shortcut icon" href="static/webfavicon/favicon.ico" type="image/x-icon" /><!-- 必须 -->
 8 |   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 9 | </head>
10 | 
11 | <body>
12 |   <div id="app"></div>
13 |   <!-- built files will be auto injected -->
14 | </body>
15 | 
16 | </html>
17 | 


--------------------------------------------------------------------------------
/src/modules/textmodule/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <title>文字（text）</title>
 6 |   <meta charset="utf-8">
 7 |   <link rel="shortcut icon" href="static/webfavicon/favicon.ico" type="image/x-icon" /><!-- 必须 -->
 8 |   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 9 | </head>
10 | 
11 | <body>
12 |   <div id="app"></div>
13 |   <!-- built files will be auto injected -->
14 | </body>
15 | 
16 | </html>
17 | 


--------------------------------------------------------------------------------
/src/modules/coursemodule/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>网课（course）</title>
 7 |   <link rel="shortcut icon" href="static/webfavicon/favicon.ico" type="image/x-icon" /><!-- 必须 -->
 8 |   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 9 | </head>
10 | 
11 | <body>
12 |   <div id="app"></div>
13 |   <!-- built files will be auto injected -->
14 | </body>
15 | 
16 | </html>
17 | 


--------------------------------------------------------------------------------
/src/modules/productmodule/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <title>产品（product）</title>
 6 |   <meta charset="utf-8">
 7 |   <link rel="shortcut icon" href="static/webfavicon/favicon.ico" type="image/x-icon" /><!-- 必须 -->
 8 |   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 9 | </head>
10 | 
11 | <body>
12 |   <div id="app"></div>
13 |   <!-- built files will be auto injected -->
14 | </body>
15 | 
16 | </html>
17 | 


--------------------------------------------------------------------------------
/src/modules/socialmodule/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <title>社交（social）</title>
 6 |   <meta charset="utf-8">
 7 |   <link rel="shortcut icon" href="static/webfavicon/favicon.ico" type="image/x-icon" /><!-- 必须 -->
 8 |   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 9 | </head>
10 | 
11 | <body>
12 |   <div id="app"></div>
13 |   <!-- built files will be auto injected -->
14 | </body>
15 | 
16 | </html>
17 | 


--------------------------------------------------------------------------------
/src/modules/supportmodule/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <title>支持（support）</title>
 6 |   <meta charset="utf-8">
 7 |   <link rel="shortcut icon" href="static/webfavicon/favicon.ico" type="image/x-icon" /><!-- 必须 -->
 8 |   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 9 | </head>
10 | 
11 | <body>
12 |   <div id="app"></div>
13 |   <!-- built files will be auto injected -->
14 | </body>
15 | 
16 | </html>
17 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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/framePage/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <noscript>网页由泰坦社区提供，禁止拷贝，复制，另存为操作，版权以及最终解释权归泰坦社区(http://www.taitan.club)所有！</noscript>
 6 |   <meta charset="utf-8">
 7 |   <title>泰坦社区</title>
 8 |   <link rel="shortcut icon" href="./static/webfavicon/favicon.ico" type="image/x-icon" /><!-- 必须 -->
 9 |   <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=5.0, minimum-scale=0.5">
10 | </head>
11 | 
12 | <body oncontextmenu="return false" ondragstart="return false" onselectstart ="return false">
13 |   <div id="app"></div>
14 |   <!-- built files will be auto injected -->
15 | </body>
16 | 
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/framePage/components/login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |   </div>
 4 | </template>
 5 | <script>
 6 | const Account = () => import('./account')
 7 | export default {
 8 |   name: 'loginindex',
 9 |   components: {
10 | 
11 |   },
12 |   data() {
13 |     return {
14 |       language: "cn",
15 |       theme: "",
16 | 
17 |     }
18 |   },
19 |   methods: {
20 | 
21 |   },
22 |   created() {
23 |     //this.manulist = this.getQueryString("manulist").split(",")
24 |   },
25 |   mounted() { //
26 | 
27 |   },
28 |   watch: {
29 |     type: {
30 |       handler() {},
31 |       deep: true,
32 |       immediately: true
33 |     },
34 | 
35 |   }
36 | }
37 | 
38 | </script>
39 | <style scoped lang="scss">
40 | 
41 | </style>
42 | 


--------------------------------------------------------------------------------
/src/framePage/components/theme.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |   </div>
 4 | </template>
 5 | <script>
 6 | const Account = () => import('./account')
 7 | export default {
 8 |   name: 'loginindex',
 9 |   components: {
10 | 
11 |   },
12 |   data() {
13 |     return {
14 |       language: "cn",
15 |       theme: "",
16 | 
17 |     }
18 |   },
19 |   methods: {
20 | 
21 |   },
22 |   created() {
23 |     //this.manulist = this.getQueryString("manulist").split(",")
24 |   },
25 |   mounted() { //
26 | 
27 |   },
28 |   watch: {
29 |     type: {
30 |       handler() {},
31 |       deep: true,
32 |       immediately: true
33 |     },
34 | 
35 |   }
36 | }
37 | 
38 | </script>
39 | <style scoped lang="scss">
40 | 
41 | </style>
42 | 


--------------------------------------------------------------------------------
/src/framePage/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Titans on 2019/9/10.
 3 |  */
 4 | import Vue from 'vue'
 5 | import App from './App'
 6 | import router from './router'
 7 | import Router from 'vue-router'
 8 | import store from '@/common/js/store.js'
 9 | Vue.config.productionTip = false
10 | import '@/common/css/common.css'
11 | import '@/common/js/viewport/viewport1366.js'
12 | 
13 | import initUtil from '@/common/js/util.js'
14 | //console.log(initUtil)
15 | const routerPush = Router.prototype.push
16 | Router.prototype.push = function push(location) {
17 |   return routerPush.call(this, location).catch(error => error)
18 | }
19 | Vue.prototype.$initUtil = initUtil
20 | window.framePage = new Vue({
21 |   el: '#app',
22 |   store,
23 |   router,
24 |   render: h => h(App)
25 | })
26 | console.log("Vue.$initUtil:", window.framePage.$initUtil)
27 | 


--------------------------------------------------------------------------------
/src/common/js/viewport/viewport1366.js:
--------------------------------------------------------------------------------
 1 | var scare=1;
 2 | (function (doc, win) {
 3 |   var dpr = window.devicePixelRatio || 1;
 4 |   var docEl = doc.documentElement,
 5 |     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
 6 |     recalc = function () {
 7 |       var clientWidth = docEl.clientWidth;
 8 |       if (!clientWidth) return;
 9 |       docEl.style.fontSize = 40 * (clientWidth / 1366) + 'px';
10 |       scare=Math.round(clientWidth / 1366);
11 |       // 设置data-dpr属性，留作的css hack之用
12 |       docEl.setAttribute('data-dpr', dpr);
13 |       var delObj = document.getElementById("loading");
14 |       if(delObj){
15 |         $("#loading").remove();
16 |       }
17 |     };
18 |   if (!doc.addEventListener) return;
19 |   win.addEventListener(resizeEvt, recalc, false);
20 |   doc.addEventListener('DOMContentLoaded', recalc, false);
21 | })(document, window);
22 | 


--------------------------------------------------------------------------------
/test/e2e/custom-assertions/elementCount.js:
--------------------------------------------------------------------------------
 1 | // A custom Nightwatch assertion.
 2 | // The assertion name is the filename.
 3 | // Example usage:
 4 | //
 5 | //   browser.assert.elementCount(selector, count)
 6 | //
 7 | // For more information on custom assertions see:
 8 | // http://nightwatchjs.org/guide#writing-custom-assertions
 9 | 
10 | exports.assertion = function (selector, count) {
11 |   this.message = 'Testing if element <' + selector + '> has count: ' + count
12 |   this.expected = count
13 |   this.pass = function (val) {
14 |     return val === this.expected
15 |   }
16 |   this.value = function (res) {
17 |     return res.value
18 |   }
19 |   this.command = function (cb) {
20 |     var self = this
21 |     return this.api.execute(function (selector) {
22 |       return document.querySelectorAll(selector).length
23 |     }, [selector], function (res) {
24 |       cb.call(self, res)
25 |     })
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/src/assets/css/style.css:
--------------------------------------------------------------------------------
 1 | #app .deving,
 2 | #app h2 {
 3 |   /*background: rgba(67, 99, 86, 0.15);*/
 4 |   background: rgb(227, 227, 236);
 5 | }
 6 | 
 7 | #app h2 {
 8 |   text-align: center;
 9 |   padding: 50px;
10 |   font-size: 30px;
11 |   color: #815f88;
12 |   background: transparent;
13 | }
14 | 
15 | #app .deving-con {
16 |   text-align: center;
17 | }
18 | 
19 | #app .deving {
20 |   display: inline-block;
21 |   padding: 50px;
22 |   margin: 0 auto;
23 |   max-width: 1000px;
24 |   text-align: center;
25 |   min-width: calc(100% - 200px);
26 | 
27 | }
28 | 
29 | #app .deving h1 {
30 |   background: transparent;
31 |   font-size: 30px;
32 |   color: #6a668b;
33 | }
34 | 
35 | #app .deving h2 {
36 |   margin: 50px 0 0 0;
37 |   font-size: 30px;
38 |   color: #c5e5d5;
39 |   background: #606d72;
40 | }
41 | 
42 | 
43 | 
44 | 
45 | 
46 | 
47 | 
48 | 
49 | 
50 | 
51 | 
52 | 
53 | 
54 | 
55 | 
56 | 
57 | 
58 | 
59 | 
60 | 
61 | 


--------------------------------------------------------------------------------
/moduletemplate/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vue from 'vue'
 3 | import App from './App'
 4 | import router from './router'
 5 | import iView from 'iview';
 6 | import 'iview/dist/styles/iview.css';
 7 | import store from '../../vuex/store';
 8 | import { fetch, post } from '../../axios/http';
 9 | import Vuex from 'vuex';
10 | 
11 | Vue.use(Vuex)
12 | Vue.use(iView);
13 | 
14 | Vue.config.productionTip = false
15 | 
16 | Vue.prototype.$fetch = fetch
17 | Vue.prototype.$post = post
18 | Vue.prototype.$loading = function (show) {
19 |     Vue.nextTick(function () {
20 |         store.commit('FETCH_LOADING', show)
21 |     })
22 | }
23 | router.beforeEach((to, from, next) => {
24 |     iView.LoadingBar.start();
25 |     next();
26 | });
27 | 
28 | router.afterEach(route => {
29 |     iView.LoadingBar.finish();
30 | });
31 | /* eslint-disable no-new */
32 | new Vue({
33 |   el: '#app',
34 |   router,
35 |   render: h => h(App)
36 |   //components: { App },
37 |   template: '<App/>'
38 | })


--------------------------------------------------------------------------------
/src/vuex/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Vuex from "vuex";
 3 | 
 4 | Vue.use(Vuex);
 5 | 
 6 | const state = {
 7 |   loading: false,
 8 |   userInfo: {
 9 |     phone: 12345678900,
10 |     account: "Titans",
11 |   }, //用户信息
12 |   login: true, //是否登录
13 | };
14 | 
15 | const getters = { //实时监听state值的变化(最新状态)
16 |   isshowloading(state) { 
17 |     return state.loading
18 |   },
19 |   islogin(state) {
20 |     return state.login
21 |   },
22 |   getuserInfo(state){
23 |   	return state.userInfo
24 |   }
25 | };
26 | const mutations = {
27 |   showloading(state, isshow) { //自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);
28 |     state.loading = isshow;
29 |   },
30 |   setlogin(state, islogin) { 
31 |     state.islogin = islogin;
32 |   },
33 |   setuserInfo(state, userInfoobj){
34 |   	state.userInfo=userInfoobj
35 |   }
36 | };
37 | const actions = {
38 |   showloading: context => {
39 |     context.commit('showloading',false);
40 |   },
41 | };
42 | export default new Vuex.Store({
43 |   state,
44 |   getters,
45 |   mutations,
46 |   actions
47 | });
48 | 


--------------------------------------------------------------------------------
/src/util/mixins/emitter.js:
--------------------------------------------------------------------------------
 1 | function broadcast(componentName, eventName, params) {
 2 |   this.$children.forEach(child => {
 3 |     const name = child.$options.name
 4 |     if (name === componentName) {
 5 |       child.$emit.apply(child, [eventName].concat(params))
 6 |     } else {
 7 |       // todo 如果 params 是空数组，接收到的会是 undefined
 8 |       broadcast.apply(child, [componentName, eventName].concat([params]))
 9 |     }
10 |   })
11 | }
12 | export default {
13 |   methods: {
14 |     dispatch(componentName, eventName, params) {
15 |       let parent = this.$parent || this.$root
16 |       let name = parent.$options.name
17 |       while (parent && (!name || name !== componentName)) {
18 |         parent = parent.$parent
19 |         if (parent) {
20 |           name = parent.$options.name
21 |         }
22 |       }
23 |       if (parent) {
24 |         parent.$emit.apply(parent, [eventName].concat(params))
25 |       }
26 |     },
27 |     broadcast(componentName, eventName, params) {
28 |       broadcast.call(this, componentName, eventName, params)
29 |     }
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/framePage/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import index from '../components/index'
 4 | 
 5 | Vue.use(Router)
 6 | 
 7 | const routerPush = Router.prototype.push
 8 | Router.prototype.push = function push(location) {
 9 |   return routerPush.call(this, location).catch(error => error)
10 | }
11 | const createRouter = routes => new VueRouter({
12 |   routes
13 | })
14 | 
15 | // 在使用addRoutes的地方
16 | // 重置当前router的match = 初始router.match
17 | 
18 | Router.prototype.resetRouter = function resetRouter(routerData) {
19 |   this.matcher = createRouter(routerData).matcher
20 |   this.options.routes = routerData
21 | }
22 | // import HelloWorld from '@/components/HelloWorld'
23 | // const HelloWorld = () => import('../components/HelloWorld')
24 | //resolve => require(['../components/HelloWorld'], resolve)
25 | //const Home = r => require.ensure([], () => r(require('@/components/Home')), 'Home');
26 | export default new Router({
27 |   //mode:"history",
28 |   routes: [{
29 |     path: '/',
30 |     name: 'index',
31 |     component: index
32 |   }]
33 | })
34 | 


--------------------------------------------------------------------------------
/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 |     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 | 


--------------------------------------------------------------------------------
/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/util/secret.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   KEY,
 3 |   IV
 4 | } from '@/config/config'
 5 | import CryptoJS from 'crypto-js' // 引用AES源码js
 6 | const key = CryptoJS.enc.Utf8.parse(KEY) // 十六位十六进制数作为秘钥
 7 | const iv = CryptoJS.enc.Utf8.parse(IV) // 十六位十六进制数作为秘钥偏移量
 8 | // 加密方法不可逆
 9 | function EncryptIrreversible(word) {
10 |   let key = CryptoJS.enc.Utf8.parse(KEY)
11 |   let srcs = CryptoJS.enc.Utf8.parse(word)
12 |   let encrypted = CryptoJS.AES.encrypt(srcs, key, {
13 |     iv: CryptoJS.enc.Utf8.parse(IV),
14 |     mode: CryptoJS.mode.ECB,
15 |     padding: CryptoJS.pad.Pkcs7
16 |   })
17 |   return encrypted.toString().toUpperCase()
18 | }
19 | // 解密方法
20 | function Decrypt(word, keys, ivs) {
21 |   keys = keys || key
22 |   ivs = ivs || iv
23 |   let encryptedHexStr = CryptoJS.enc.Hex.parse(word)
24 |   let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr)
25 |   let decrypt = CryptoJS.AES.decrypt(srcs, keys, {
26 |     iv: ivs,
27 |     mode: CryptoJS.mode.CBC,
28 |     padding: CryptoJS.pad.Pkcs7
29 |   })
30 |   let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
31 |   return decryptedStr.toString()
32 | }
33 | // 加密方法
34 | function Encrypt(word, keys, ivs) {
35 |   keys = keys || key
36 |   ivs = ivs || iv
37 |   let srcs = CryptoJS.enc.Utf8.parse(word)
38 |   let encrypted = CryptoJS.AES.encrypt(srcs, keys, {
39 |     iv: iv,
40 |     mode: CryptoJS.mode.CBC,
41 |     padding: CryptoJS.pad.Pkcs7
42 |   })
43 |   return encrypted.ciphertext.toString().toUpperCase()
44 | }
45 | // MD5加密方法
46 | function MD5(words) {
47 |   return CryptoJS.MD5(words).toString()
48 | }
49 | export default {
50 |   Decrypt,
51 |   Encrypt,
52 |   EncryptIrreversible,
53 |   MD5
54 | }
55 | 


--------------------------------------------------------------------------------
/src/util/utils/secret.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   KEY,
 3 |   IV
 4 | } from '@/config/config'
 5 | import CryptoJS from 'crypto-js' // 引用AES源码js
 6 | const key = CryptoJS.enc.Utf8.parse(KEY) // 十六位十六进制数作为秘钥
 7 | const iv = CryptoJS.enc.Utf8.parse(IV) // 十六位十六进制数作为秘钥偏移量
 8 | // 加密方法不可逆
 9 | function EncryptIrreversible(word) {
10 |   let key = CryptoJS.enc.Utf8.parse(KEY)
11 |   let srcs = CryptoJS.enc.Utf8.parse(word)
12 |   let encrypted = CryptoJS.AES.encrypt(srcs, key, {
13 |     iv: CryptoJS.enc.Utf8.parse(IV),
14 |     mode: CryptoJS.mode.ECB,
15 |     padding: CryptoJS.pad.Pkcs7
16 |   })
17 |   return encrypted.toString().toUpperCase()
18 | }
19 | // 解密方法
20 | function Decrypt(word, keys, ivs) {
21 |   keys = keys || key
22 |   ivs = ivs || iv
23 |   let encryptedHexStr = CryptoJS.enc.Hex.parse(word)
24 |   let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr)
25 |   let decrypt = CryptoJS.AES.decrypt(srcs, keys, {
26 |     iv: ivs,
27 |     mode: CryptoJS.mode.CBC,
28 |     padding: CryptoJS.pad.Pkcs7
29 |   })
30 |   let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
31 |   return decryptedStr.toString()
32 | }
33 | // 加密方法
34 | function Encrypt(word, keys, ivs) {
35 |   keys = keys || key
36 |   ivs = ivs || iv
37 |   let srcs = CryptoJS.enc.Utf8.parse(word)
38 |   let encrypted = CryptoJS.AES.encrypt(srcs, keys, {
39 |     iv: iv,
40 |     mode: CryptoJS.mode.CBC,
41 |     padding: CryptoJS.pad.Pkcs7
42 |   })
43 |   return encrypted.ciphertext.toString().toUpperCase()
44 | }
45 | // MD5加密方法
46 | function MD5(words) {
47 |   return CryptoJS.MD5(words).toString()
48 | }
49 | export default {
50 |   Decrypt,
51 |   Encrypt,
52 |   EncryptIrreversible,
53 |   MD5
54 | }
55 | 


--------------------------------------------------------------------------------
/test/e2e/runner.js:
--------------------------------------------------------------------------------
 1 | // 1. start the dev server using production config
 2 | process.env.NODE_ENV = 'testing'
 3 | 
 4 | const webpack = require('webpack')
 5 | const DevServer = require('webpack-dev-server')
 6 | 
 7 | const webpackConfig = require('../../build/webpack.prod.conf')
 8 | const devConfigPromise = require('../../build/webpack.dev.conf')
 9 | 
10 | let server
11 | 
12 | devConfigPromise.then(devConfig => {
13 |   const devServerOptions = devConfig.devServer
14 |   const compiler = webpack(webpackConfig)
15 |   server = new DevServer(compiler, devServerOptions)
16 |   const port = devServerOptions.port
17 |   const host = devServerOptions.host
18 |   return server.listen(port, host)
19 | })
20 | .then(() => {
21 |   // 2. run the nightwatch test suite against it
22 |   // to run in additional browsers:
23 |   //    1. add an entry in test/e2e/nightwatch.conf.js under "test_settings"
24 |   //    2. add it to the --env flag below
25 |   // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
26 |   // For more information on Nightwatch's config file, see
27 |   // http://nightwatchjs.org/guide#settings-file
28 |   let opts = process.argv.slice(2)
29 |   if (opts.indexOf('--config') === -1) {
30 |     opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js'])
31 |   }
32 |   if (opts.indexOf('--env') === -1) {
33 |     opts = opts.concat(['--env', 'chrome'])
34 |   }
35 | 
36 |   const spawn = require('cross-spawn')
37 |   const runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })
38 | 
39 |   runner.on('exit', function (code) {
40 |     server.close()
41 |     process.exit(code)
42 |   })
43 | 
44 |   runner.on('error', function (err) {
45 |     server.close()
46 |     throw err
47 |   })
48 | })
49 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-multipage-platform-project（vue-cli-ww）
 2 | 
 3 | > A Vue.js project
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies 安装依赖
 9 | cnpm i
10 | 
11 | # serve with hot reload at localhost:8080 运行，开发模式暂不可指定运行模块，可配置rojectConfig/index来指定
12 | npm run dev //开发模式启动
13 | 
14 | # build for production with minification //项目构建
15 | npm run build // 打包全部模块到一个资源包下面，每个模块的入口是module.html文件，静态资源都在static目录中，这种方式可以复用重复的资源
16 | npm run build moduleName1,moduleName2,... // 打包指定模块到一个资源包下面,每个模块的入口是module.html文件，静态资源都在static目录中，这种方式可以复用重复的资源
17 | 
18 | npm run build moduleName1,moduleName2,... total// total代表整体打包（静态资源在同一个目录下，可以复用重复的文件），separate代表分开打包（静态资源按模块名称分别独立打包，不能复用重复的文件）separate模式下一次只能打某一个包，例如npm run build a separate
19 | 
20 | npm run build-all // 打包所有模块，然后每个模块彼此独立，有几个模块，就产生几个静态资源包，这种方式不会复用重复的资源
21 | 
22 | npm run build-all moduleName1,moduleName2,...// 打包制定模块，参数逗号隔开，然后每个模块彼此独立，有几个模块，就产生几个静态资源包，这种方式不会复用重复的资源
23 | 
24 | # build for production and view the bundle analyzer report //构建并查看包分析报告
25 | npm run build --report
26 | 
27 | # run unit tests
28 | npm run unit
29 | 
30 | # run e2e tests
31 | npm run e2e
32 | 
33 | # run all tests
34 | npm test
35 | ```
36 | 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).
37 | 
38 | projectConfig/index为项目配置，若要更改默认的src下modules子文件夹名称或src下framePage文件夹名称，必须配置此js文件
39 | 当isbuildassignmodules为真时，项目打包或启动只会构建此配置buildmodules指定的包,命令行所传参数无效,当前状态下只可使用npm run build或npm run build-all 打包或npm run dev启动项目，系统默认启动打开页面为没有框架页为buildmodules[0]或有框架页则为框架页面
40 | 
41 | npm run build //总体打包时访问参数传递为framePage.html?manulist=a,b&type=totle 两个参数
42 | npm run build-all //访问参数参数为framePage.html?manulist=a,b  单个参数
43 | 
44 | 每次build时候会自动删除dist/static以及dist/*.html  打包构建前若不想保留以前的独立打包文件时请手动删除dist文件夹


--------------------------------------------------------------------------------
/document/vuex/vueX.txt:
--------------------------------------------------------------------------------
 1 | 
 2 | vueX使用说明
 3 | 
 4 | 1、this.$store ： 我们可以通过 this.$store 在vue的组件中获取vuex的实例。
 5 | 2、State ： vuex中的数据源，我们可以通过 this.$store.state 获取我们在vuex中声明的全局变量的值。
 6 | 3、Getter： 相当于vue中的computed ， 及 计算属性， 可以用于监听、计算 state中的值的变化
 7 | 4、Mutation： vuex中去操作数据的方法 （只能同步执行）
 8 | 5、Action： 用来操作 Mutation 的动作 ， 他不能直接去操作数据源，但可以把mutation变为异步的
 9 | 6、Module： 模块化，当你的应用足够大的时候，你可以把你的vuex分成多个子模块
10 | 
11 | import Vue from 'vue';
12 | import Vuex from 'vuex';
13 | Vue.use(Vuex);
14 | export default new Vuex.Store({
15 |     // 在state中去声明全局变量，可以通过 this.$store.state 访问
16 |     state: {
17 |         count: 0
18 |     },
19 |     // 在getters中声明state中变量的计算函数，缓存计算后的数据， 通过 this.$store.getters 调用
20 |     getters: {
21 |         // 接受state作为参数，每次 count发生变化时 ， 都会被调用
22 |         consoleCount: state => {
23 |             console.log('the state count : ' + state.count);
24 |             return state.count;
25 |         }
26 |     },
27 |     // 只能执行同步方法，不要去执行异步方法 通过 this.$store.commit 方法去调用
28 |     mutations: {
29 |         // 改变state状态的方法，不建议直接通过  
30 |         // this.$store.state.? = ？的方式改变state中的状态
31 |         addCount: state => {
32 |             ++state.count;
33 |         },
34 |         // 自定义改变state初始值的方法，mutations的第一个参数即为state对象，并且可以向mutation传入额外的参数(变量或对象);
35 |         addNumCount: (state, n) => {
36 |             state.count+=n;
37 |         },
38 |     },
39 |     // 借助actions的手去 执行 mutations ， 通过  this.$store.dispatch 的方式调用
40 |     // 可以用来执行异步操作，可以跟踪异步数据状态变化
41 |     actions: {
42 |          // 调用 mutation
43 |         addCount: context => {
44 |             context.commit('addCount');
45 |         },
46 |         addNumCount: (context, n) => {
47 |             context.commit('addNumCount', n);
48 |         }
49 |     }
50 | })
51 | 
52 | 我们在代码中分别注册了，state、getters、mutations、actions。
53 | 这样我们就可以在任何一个 component中通过this.store.dispatch(′addNumCount′,5)；或者 this.$store.dispatch('addCount'); 去触发actions操作来改变state中的值。


--------------------------------------------------------------------------------
/src/vuex/readme.txt:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | vueX使用说明
 4 | 
 5 | 1、this.$store ： 我们可以通过 this.$store 在vue的组件中获取vuex的实例。
 6 | 2、State ： vuex中的数据源，我们可以通过 this.$store.state 获取我们在vuex中声明的全局变量的值。
 7 | 3、Getter： 相当于vue中的computed ， 及 计算属性， 可以用于监听、计算 state中的值的变化
 8 | 4、Mutation： vuex中去操作数据的方法 （只能同步执行）
 9 | 5、Action： 用来操作 Mutation 的动作 ， 他不能直接去操作数据源，但可以把mutation变为异步的
10 | 6、Module： 模块化，当你的应用足够大的时候，你可以把你的vuex分成多个子模块
11 | 
12 | import Vue from 'vue';
13 | import Vuex from 'vuex';
14 | Vue.use(Vuex);
15 | export default new Vuex.Store({
16 |     // 在state中去声明全局变量，可以通过 this.$store.state 访问
17 |     state: {
18 |         count: 0
19 |     },
20 |     // 在getters中声明state中变量的计算函数，缓存计算后的数据， 通过 this.$store.getters 调用
21 |     getters: {
22 |         // 接受state作为参数，每次 count发生变化时 ， 都会被调用
23 |         consoleCount: state => {
24 |             console.log('the state count : ' + state.count);
25 |             return state.count;
26 |         }
27 |     },
28 |     // 只能执行同步方法，不要去执行异步方法 通过 this.$store.commit 方法去调用
29 |     mutations: {
30 |         // 改变state状态的方法，不建议直接通过  
31 |         // this.$store.state.? = ？的方式改变state中的状态
32 |         addCount: state => {
33 |             ++state.count;
34 |         },
35 |         // 自定义改变state初始值的方法，mutations的第一个参数即为state对象，并且可以向mutation传入额外的参数(变量或对象);
36 |         addNumCount: (state, n) => {
37 |             state.count+=n;
38 |         },
39 |     },
40 |     // 借助actions的手去 执行 mutations ， 通过  this.$store.dispatch 的方式调用
41 |     // 可以用来执行异步操作，可以跟踪异步数据状态变化
42 |     actions: {
43 |          // 调用 mutation
44 |         addCount: context => {
45 |             context.commit('addCount');
46 |         },
47 |         addNumCount: (context, n) => {
48 |             context.commit('addNumCount', n);
49 |         }
50 |     }
51 | })
52 | 
53 | 我们在代码中分别注册了，state、getters、mutations、actions。
54 | 这样我们就可以在任何一个 component中通过 this.$store.dispatch('addNumCount', 5); 或者 this.$store.dispatch('addCount'); 去触发actions操作来改变state中的值。


--------------------------------------------------------------------------------
/document/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | 
 4 | Vue.use(Router)
 5 | 
 6 | 
 7 | // import HelloWorld from '@/components/HelloWorld'
 8 | // const HelloWorld = () => import('../components/HelloWorld')
 9 | const Home = r => require.ensure([], () => r(require('@/components/Home')), 'Home');
10 | const HelloWorld = r => require.ensure([], () => r(require('@/components/childrenleve1/HelloWorld')), 'HelloWorld');
11 | const Component1 = r => require.ensure([], () => r(require('@/components/childrenleve1/component1')), 'Component');
12 | const Component2 = r => require.ensure([], () => r(require('@/components/childrenleve1/component2')), 'Component');
13 | const Vuexstore = r => require.ensure([], () => r(require('@/components/childrenleve1/Vuexstore')), 'Vuexstore');
14 | const Table = r => require.ensure([], () => r(require('@/components/childrenleve1/table')), 'Table');
15 | const Vuerender = r => require.ensure([], () => r(require('@/components/childrenleve1/Vuerender')), 'Vuerender');
16 | export default new Router({
17 |   routes: [{
18 |     path: '/',
19 |     name: 'Home',
20 |     component: Home,
21 |     children: [{
22 |         path: 'HelloWorld',
23 |         name: 'HelloWorld',
24 |         component: HelloWorld, //resolve => require(['../components/HelloWorld'], resolve)
25 |         meta: {
26 |           auth: true,
27 |           keepAlive: true
28 |         }
29 |       },
30 |       {
31 |         path: 'HelloWorld/Component1',
32 |         name: 'Component1',
33 |         component: Component1,
34 | 
35 |       },
36 |       {
37 |         path: 'Component2',
38 |         name: 'Component2',
39 |         component: Component2,
40 |         meta: {
41 |           keepAlive: true
42 |         },
43 |         children: [{
44 |           path: '/Vuexstore',
45 |           name: 'Vuexstore',
46 |           component: Vuexstore,
47 |         }]
48 |       },
49 |       {
50 |         path: 'Table',
51 |         name: 'Table',
52 |         component:Table ,
53 |       },
54 | 
55 |     ]
56 |   }]
57 | })
58 | 


--------------------------------------------------------------------------------
/document/vuex/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Vuex from "vuex";
 3 | 
 4 | Vue.use(Vuex);
 5 | 
 6 | const state = {
 7 |   loading: false,
 8 |   userInfo: {
 9 |     phone: 123456789000000,
10 |     account: "Titans",
11 |   }, //用户信息
12 |   login: false, //是否登录
13 |   shopList:[{
14 |     id: 1,
15 |     name: '兰博基尼',
16 |     price: 10
17 |   },{
18 |     id: 2,
19 |     name: '五菱宏光',
20 |     price: 99999
21 |   }],
22 | };
23 | 
24 | const getters = { //实时监听state值的变化(最新状态)
25 |   isloading(state) { //承载变化的login的值.  //.$store.getters.isloading
26 |     return state.loading
27 |   },
28 |   islogin(state) { 
29 |     return state.login
30 |   },
31 |   getuserInfo(state){
32 |   	return state.userInfo
33 |   }
34 | };
35 | const mutations = {
36 |   setloading(state, isshow) { //自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);
37 |     state.loading = isshow;
38 |   },
39 |   setlogin(state, islogin) { //this.$store.commit("setlogin", true)
40 |     state.login = islogin;
41 |   },
42 |   setuserInfo(state, userInfoobj){
43 |   	state.userInfo=userInfoobj
44 |   }
45 | };
46 | const actions = {
47 |   asyncsetoading: (context,loadingstatus) => {//this.$store.dispatch("asyncsetoading", false)
48 |     context.commit('setloading',loadingstatus);
49 |   },
50 | };
51 | const modulea = {
52 |   namespaced: true,
53 |   state: {
54 |     usera: "taitan",
55 |     shopList: [{
56 |       id: 1,
57 |       name: '兰博基尼',
58 |       price: 10
59 |     }, {
60 |       id: 2,
61 |       name: '五菱宏光',
62 |       price: 99999
63 |     }],
64 |   },
65 |   mutations: {
66 |     setusera(state,name) {
67 |       state.usera = name
68 |     }
69 |   },
70 |   actions: {
71 |     asyncsetusera:(context, name)=> {
72 |       context.commit("setusera", name)
73 |     }
74 |   },
75 |   getters: {
76 |     getusera(state) {
77 |       return state.modulea.usera
78 |     }
79 | 
80 |   }
81 | }
82 | export default new Vuex.Store({
83 |   state,
84 |   getters,
85 |   mutations,
86 |   actions,
87 |   modules: { modulea
88 |    }
89 | });
90 | 
91 | 
92 | 
93 | 
94 | 
95 | 


--------------------------------------------------------------------------------
/src/util/utils/tools.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * tool
 3 |  */
 4 | 
 5 | // import Vue from 'vue';
 6 | // import axios from "axios";
 7 | /**
 8 |  * @description 存储sessionStorage
 9 |  * @param {存储的keyName} name
10 |  * @param {存储的值} value
11 |  */
12 | export const setStore = (name, value) => {
13 |   if (!name) return;
14 |   if (typeof value !== 'string') {
15 |     value = JSON.stringify(value)
16 |   }
17 |   window.sessionStorage.setItem(name, value)
18 | }
19 | 
20 | /**
21 |  * @description 读取localstorage
22 |  * @param {存储的keyName} name
23 |  */
24 | export const getStore = (name) => {
25 |   if (!name) return;
26 |   return window.sessionStorage.getItem(name)
27 | }
28 | 
29 | /**
30 |  * @description 删除localstorage
31 |  * @param {需要删除的keyName} name
32 |  */
33 | export const removeStroe = (name) => {
34 |   if (!name) return;
35 |   window.sessionStorage.removeItem(name)
36 | }
37 | 
38 | 
39 | 
40 | /**
41 |  * @description 按日处理时间为xxxx-yy-dd
42 |  * @param {需要处理的时间} time:object
43 |  */
44 | export const timeProcessDay = (time) => {
45 |     if(!time){return ""}
46 |   let d = new Date(time);
47 |   return d.getFullYear() + ((d.getMonth() + 1) >= 10 ? ('-' + (d.getMonth() + 1)) : ('-0' + (d.getMonth() + 1))) + "-" + (d.getDate() >= 10 ? d.getDate() : '0' + d.getDate());
48 | 
49 | }
50 | /**
51 |  * @description 按月处理时间为xxxx-yy
52 |  * @param {需要处理的时间} time:object
53 |  */
54 | export const timeProcessMonth = (time) => {
55 |   let d = new Date(time);
56 |   return d.getFullYear() + ((d.getMonth() + 1) >= 10 ? ('-' + (d.getMonth() + 1)) : ('-0' + (d.getMonth() + 1)));
57 | 
58 | }
59 | /**
60 |  * @description 按月处理时间为yyyyMM
61 |  * @param {需要处理的时间} time:object
62 |  */
63 | export const timeProcessMonth1 = (time) => {
64 |   let d = new Date(time);
65 |   return d.getFullYear() + ((d.getMonth() + 1) >= 10 ? (d.getMonth() + 1) : ('0' + (d.getMonth() + 1)));
66 | 
67 | }
68 | export const getUrlKey = function (name) {
69 |   return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null;
70 | }
71 | 
72 | 
73 | 


--------------------------------------------------------------------------------
/src/util/mixins/clickOutside.js:
--------------------------------------------------------------------------------
 1 | function validate(binding) {
 2 |   if (typeof binding.value !== 'function') {
 3 |     console.warn('[Vue-click-outside:] provided expression', binding.expression, 'is not a function.')
 4 |     return false
 5 |   }
 6 |   return true
 7 | }
 8 | 
 9 | function isPopup(popupItem, elements) {
10 |   if (!popupItem || !elements) {
11 |     return false
12 |   }
13 |   for (var i = 0, len = elements.length; i < len; i++) {
14 |     try {
15 |       if (popupItem.contains(elements[i]) && !event.stopPropagation()) {
16 |         return true
17 |       }
18 |       if (elements[i].contains(popupItem)) {
19 |         return false
20 |       }
21 |     } catch (e) {
22 |       return false
23 |     }
24 |   }
25 |   return false
26 | }
27 | 
28 | function isServer(vNode) {
29 |   return typeof vNode.componentInstance !== 'undefined' && vNode.componentInstance.$isServer
30 | }
31 | exports = module.exports = {
32 |   bind: function (el, binding, vNode) {
33 |     if (!validate(binding)) return
34 |     // Define Handler and cache it on the element
35 |     function handler(e) {
36 |       if (!vNode.context) return
37 |       // some components may have related popup item, on which we shall prevent the click outside event handler.
38 |       var elements = e.path || (e.composedPath && e.composedPath())
39 |       elements && elements.length > 0 && elements.unshift(e.target)
40 | 
41 |       if ((el.contains(e.target) || isPopup(vNode.context.popupItem, elements)) && !event.stopPropagation()) return
42 |       el.__vueClickOutside__.callback(e)
43 |     }
44 |     // add Event Listeners
45 |     el.__vueClickOutside__ = {
46 |       handler: handler,
47 |       callback: binding.value
48 |     }
49 |     !isServer(vNode) && document.addEventListener('click', handler)
50 |   },
51 | 
52 |   update: function (el, binding) {
53 |     if (validate(binding)) el.__vueClickOutside__.callback = binding.value
54 |   },
55 |   unbind: function (el, binding, vNode) {
56 |     // Remove Event Listeners
57 |     !isServer(vNode) && document.removeEventListener('click', el.__vueClickOutside__.handler)
58 |     delete el.__vueClickOutside__
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/projectConfig/index.js:
--------------------------------------------------------------------------------
 1 | const projectconfig = {
 2 |   framePage: "framePage", //defalt:framePage 框架页文件夹名称，这里需要指定，
 3 |   //原项目默认为src/framePage文件夹，此文件夹可根据自己需要自主更名，当更名后这里必须进行配置，值为当前文件夹名
 4 |   buildmodules: ["framePage","blogmodule",],
 5 |   isbuildassignmodules: false,//defalt:false,会执行命令行参数指定的几个单页面模块，命令行不传参数，默认构建项目中的所有包
 6 |   //当参数为真时，buildmodules值必须为数组，每个值为包名,打包只会构建buildmodules指定的包
 7 |   modulesconfig: { //key为单页面模块文件夹名称
 8 |     a: {
 9 |       plugin: [{
10 |         name: "axios",
11 |         version: "^0.19.0"
12 |       },{
13 |         name: "vuex",
14 |         version: "^3.1.1"
15 |       },
16 |       {
17 |         name: "vue-router",
18 |         version: "^3.1.2"
19 |       }]
20 |     },
21 |     b: {
22 |       plugin: [{
23 |         name: "iview",
24 |         version: ""
25 |       }]
26 |     }
27 |   },
28 |   proxy:{//配置代理
29 |     '/api': {
30 |         target: 'http://www.abc.com', //目标接口域名
31 |         changeOrigin: true, //是否跨域
32 |         pathRewrite: {
33 |           '^/api': '/api' //重写接口
34 |         }
35 |       }
36 |   },
37 |   autoOpenBrowser: true,//是否自动打开浏览器 defalt:false
38 |   useEslint:false, // 是否启用Eslint语法检查 defalt:false
39 |   showEslintErrorsInOverlay:false,
40 |   productionSourceMap:false,//  打包时是否建立映射 defalt:false
41 |   productionGzip:false,//is gzip all static  defalt:false
42 | 
43 | }
44 | exports.framePage = projectconfig.framePage
45 | exports.modulesconfig = projectconfig.modulesconfig
46 | exports.buildmodules = projectconfig.buildmodules
47 | exports.isbuildassignmodules = projectconfig.isbuildassignmodules
48 | exports.proxy = projectconfig.proxy
49 | exports.autoOpenBrowser = projectconfig.autoOpenBrowser
50 | exports.useEslint = projectconfig.useEslint
51 | exports.showEslintErrorsInOverlay = projectconfig.showEslintErrorsInOverlay
52 | exports.productionSourceMap = projectconfig.productionSourceMap
53 | exports.productionGzip = projectconfig.productionGzip
54 | 
55 | 
56 | //项目默认已经安装dependencies，使用时只需要引入即可
57 | //     "axios": "^0.19.0",
58 | //     "echarts": "^4.2.1",
59 | //     "iview": "^3.5.0-rc.1",
60 | //     "v-viewer": "^1.4.2",
61 | //     "vue": "^2.6.10",
62 | //     "vue-croppa": "^1.3.8",
63 | //     "vue-i18n": "^8.14.0",
64 | //     "vue-router": "^3.1.2",
65 | //     "vue-scroll-behavior": "^0.2.0",
66 | //     "vue-video-player": "^5.0.2",
67 | //     "vuex": "^3.1.1"
68 | 
69 | 
70 | 
71 | 
72 | 
73 | 


--------------------------------------------------------------------------------
/document/main.txt:
--------------------------------------------------------------------------------
 1 | 
 2 | import Vue from 'vue'
 3 | import App from './App'
 4 | 
 5 | //Vue.use(plugin)
 6 | 
 7 | var curvue=new Vue({
 8 |   el: '#app',
 9 |   router,
10 |   store,
11 |   components: { App },
12 |   template: '<App/>'
13 | })
14 | console.log(curvue);
15 | 
16 | 1、实例属性
17 | 组件树访问
18 | $parent -----> 用来访问当前组件实例的父实例；
19 | $root -----> 用来访问当前组件树的根实例，如果当前组件没有父实例，则$root表示当前组件实例本身；
20 | $children -----> 用来访问当前组件实例的 直接 子组件实例；
21 | $refs -----> 用来访问使用了v-ref指令的子组件；
22 | DOM访问
23 | $el -----> 用来访问挂载当前组件实例的DOM元素；
24 | $els -----> 用来访问使用了v-el指令的DOM元素（已经被废除）；
25 | 数据访问
26 | $data -----> 用来访问组件实例观察的数据对象，该对象引用组件实例化时选项中的data属性；
27 | $options -----> 用来访问组件实例化时的初始化选项对象；
28 | 
29 | 
30 | 
31 | 2、实例方法
32 | 
33 | 方法：
34 | vm.$mount()
35 | #手动挂载
36 | //vm.$mount('#app');
37 | 
38 | vm.$destroy()
39 | #销毁实例
40 | 
41 | vm.$nextTick(callback)
42 | #将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新,直到DOM结构加载完成；。
43 | 
44 | vm.$set(object,key,value)
45 | #添加属性值
46 | Vue.set(this.user,'age',1)
47 | 
48 | 
49 | vm.$delete(object,key)
50 | #删除属性值
51 | Vue.delete(this.user,'age')
52 | 
53 | vm.$watch(data,callback[,options])
54 | #更新属性值
55 | 
56 | vm.$watch(data,callback[,options])
57 | #监测数值变化
58 | 
59 | 
60 | 内部插入
61 | $appendTo()可以将el指向的DOM元素或片段插入到目标元素中；
62 | 第一个参数：选择器字符串或者DOM元素
63 | 第二个参数：callback回调函数，成功插入到目标元素后被触发（并且如果el应用了过渡效果，则回调在过渡完成后触发）
64 | 
65 | 同级插入
66 | $before()可以将el指向的DOM元素或片段插入到目标元素之前；
67 |    第一个参数：选择器字符串或者DOM元素
68 |    第二个参数：callback回调函数，成功插入到目标元素后被触发（并且如果el应用了过渡效果，则回调在过渡完成后触发）
69 | 
70 | $after()可以将el指向的DOM元素或片段插入到目标元素之后；
71 |    第一个参数：选择器字符串或者DOM元素
72 |    第二个参数：callback回调函数，成功插入到目标元素后被触发（并且如果el应用了过渡效果，则回调在过渡完成后触发）
73 | 
74 | 删除
75 | $remove()可以将el指向的DOM元素或片段从DOM中删除；
76 | 只有一个callback作为参数，在el元素从DOM中删除完成后触发（并且如果el应用了过渡效果，则回调在过渡完成后触发）
77 | $remove删除数据结构 splice根据索引值删除，批量删除都要采用倒序删除，获取到索引值非要使用$remove的方法是this.data.$remove(this.data[index])，还是删除数据结构
78 | 只有一个callback作为参数，回调函数的this会自动绑定到调用它的Vue实例上；
79 | 
80 | 3、实例Event方法的使用
81 | 
82 | 监听
83 | $on(event（事件名称），callback)监听实例的自定义事件，回调会在触发“触发事件”后进行触发
84 | $once(event（事件名称），callback)监听实例的自定义事件，但只执行一次，回调会在触发“触发事件”后进行触发
85 | 触发
86 | $emit（event（事件名称），args（传递给监听函数的参数））用来触发事件；
87 | $dispatch（event（事件名称），args（传递给监听函数的参数））用来派发事件，即先在当前实例触发，然后沿着父链一层一层向上，如果对应的监听函数返回false后停止；
88 | $broadcast（event（事件名称），args（传递给监听函数的参数））用来广播事件，即遍历当前实例的$children，如果对应的监听函数返回false后就停止；
89 | 删除
90 | $off（event（事件名称），callback）用来删除事件监听器；（如果没有参数，删除所有的事件监听器；如果只提供一个事件名称参数，则删除这一个事件监听器；如果提供事件名与回调，则删除对应的回调函数）
91 | 
92 | 


--------------------------------------------------------------------------------
/src/util/tools.js:
--------------------------------------------------------------------------------
  1 | /* eslint-disable no-sparse-arrays */
  2 | /**
  3 |  * @description 存储sessionStorage
  4 |  * @param {存储的keyName} name
  5 |  * @param {存储的值} value
  6 |  */
  7 | export const setStore = (name, value) => {
  8 |   if (!name) {
  9 |     return false
 10 |   }
 11 |   window.sessionStorage.setItem(name, typeof value !== 'string' ? JSON.stringify(value) : value)
 12 | }
 13 | 
 14 | /**
 15 |  * @description 读取sessionStorage
 16 |  * @param {存储的keyName} name
 17 |  */
 18 | export const getStore = (name) => {
 19 |   if (!name) {
 20 |     return false
 21 |   }
 22 |   return window.sessionStorage.getItem(name)
 23 | }
 24 | 
 25 | /**
 26 |  * @description 删除sessionStorage
 27 |  * @param {需要删除的keyName} name
 28 |  */
 29 | export const removeStroe = (name) => {
 30 |   if (!name) {
 31 |     return false
 32 |   }
 33 |   window.sessionStorage.removeItem(name)
 34 | }
 35 | 
 36 | /**
 37 |  * @description 存储localstorage
 38 |  * @param {存储的keyName} name
 39 |  * @param {存储的值} value
 40 |  */
 41 | export const setLocal = (name, value) => {
 42 |   if (!name) {
 43 |     return false
 44 |   }
 45 |   window.localStorage.setItem(name, typeof value !== 'string' ? JSON.stringify(value) : value)
 46 | }
 47 | 
 48 | /**
 49 |  * @description 读取localstorage
 50 |  * @param {存储的keyName} name
 51 |  */
 52 | export const getLocal = (name) => {
 53 |   if (!name) {
 54 |     return false
 55 |   }
 56 |   return window.localStorage.getItem(name)
 57 | }
 58 | 
 59 | /**
 60 |  * @description 删除localstorage
 61 |  * @param {需要删除的keyName} name
 62 |  */
 63 | export const removeLocal = (name) => {
 64 |   if (!name) {
 65 |     return false
 66 |   }
 67 |   window.localStorage.removeItem(name)
 68 | }
 69 | 
 70 | /**
 71 |  * @description 按日处理时间为xxxx-yy-dd
 72 |  * @param {需要处理的时间} time:object
 73 |  */
 74 | export const timeProcessDay = (time) => {
 75 |   if (!time) {
 76 |     return ''
 77 |   }
 78 |   let d = new Date(time)
 79 |   return d.getFullYear() + ((d.getMonth() + 1) >= 10 ? ('-' + (d.getMonth() + 1)) : ('-0' + (d.getMonth() + 1))) + '-' + (d.getDate() >= 10 ? d.getDate() : '0' + d.getDate())
 80 | }
 81 | /**
 82 |  * @description 按月处理时间为xxxx-yy
 83 |  * @param {需要处理的时间} time:object
 84 |  */
 85 | export const timeProcessMonth = (time) => {
 86 |   let d = new Date(time)
 87 |   return d.getFullYear() + ((d.getMonth() + 1) >= 10 ? ('-' + (d.getMonth() + 1)) : ('-0' + (d.getMonth() + 1)))
 88 | }
 89 | /**
 90 |  * @description 按月处理时间为yyyyMM
 91 |  * @param {需要处理的时间} time:object
 92 |  */
 93 | export const timeProcessMonth1 = (time) => {
 94 |   let d = new Date(time)
 95 |   return d.getFullYear() + ((d.getMonth() + 1) >= 10 ? (d.getMonth() + 1) : ('0' + (d.getMonth() + 1)))
 96 | }
 97 | export const getUrlKey = function (name) {
 98 |   return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
 99 | }
100 | 


--------------------------------------------------------------------------------
/src/common/js/store.js:
--------------------------------------------------------------------------------
  1 | import Vue from "vue";
  2 | import Vuex from "vuex";
  3 | 
  4 | Vue.use(Vuex);
  5 | 
  6 | const state = {
  7 |   loading: false,
  8 |   curlanguage: "Chinese",
  9 |   curtheme: "luxury",
 10 |   userInfo: {
 11 |     phone: 123456789000000,
 12 |     account: "Titans",
 13 |     theme: "luxury",
 14 |     language: "Chinese"
 15 |   }, //用户信息
 16 |   login: false, //是否登录
 17 |   themelist: {
 18 |     luxury: {
 19 |       wrapperbg: "#c7d0d6",
 20 |       navbg: "rgba(48,51,52,0.8)",
 21 |       navcolor: "#ddd",
 22 |       navaccolor: "#fff",
 23 |       containerbj: "#fff",
 24 |       containercolor: "#414a53",
 25 |       mainbg: "#fcfbfd",
 26 |       maincolor: "#71717f",
 27 |     },
 28 |     vitality: {
 29 |       wrapperbg: "#c7d0d6",
 30 |       navbg: "rgba(48,51,52,0.8)",
 31 |       navcolor: "#ddd",
 32 |       navaccolor: "#fff",
 33 |       containerbj: "#fff",
 34 |       containercolor: "#414a53",
 35 |       mainbg: "#fcfbfd",
 36 |       mainbg: "#424561",
 37 |     },
 38 |     youth: {
 39 |       wrapperbg: "#c7d0d6",
 40 |       navbg: "rgba(48,51,52,0.8)",
 41 |       navcolor: "#ddd",
 42 |       navaccolor: "#fff",
 43 |       containerbj: "#fff",
 44 |       containercolor: "#414a53",
 45 |       mainbg: "#fcfbfd",
 46 |       mainbg: "#424561",
 47 |     },
 48 |     mature: {
 49 |       wrapperbg: "#c7d0d6",
 50 |       navbg: "rgba(48,51,52,0.8)",
 51 |       navcolor: "#ddd",
 52 |       navaccolor: "#fff",
 53 |       containerbj: "#fff",
 54 |       containercolor: "#414a53",
 55 |       mainbg: "#fcfbfd",
 56 |       mainbg: "#424561",
 57 |     }
 58 |   },
 59 | };
 60 | 
 61 | const getters = { //实时监听state值的变化(最新状态)
 62 |   isloading(state) { //承载变化的login的值.  //this.$store.getters.isloading
 63 |     return state.loading
 64 |   },
 65 |   islogin(state) {
 66 |     return state.login
 67 |   },
 68 |   getuserInfo(state) {
 69 |     return state.userInfo
 70 |   },
 71 |   getlanguage(state) {
 72 |     return state.curlanguage
 73 |   },
 74 |   gettheme(state) {
 75 |     return state.curtheme
 76 |   },
 77 |   getthemelist(state) {
 78 |     return state.themelist
 79 |   },
 80 |   getcurtheme(state) {
 81 |     return state.curtheme
 82 |   }
 83 | };
 84 | const mutations = {
 85 |   setloading(state, isshow) { //自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);
 86 |     state.loading = isshow;
 87 |   },
 88 |   setlogin(state, islogin) { //this.$store.commit("setlogin", true)
 89 |     state.login = islogin;
 90 |   },
 91 |   setuserInfo(state, userInfoobj) {
 92 |     state.userInfo = userInfoobj
 93 |   },
 94 |   setcurtheme(state, curtheme) {
 95 |     state.curtheme = curtheme
 96 |   },
 97 |   setlanguage(state, curlanguage) {
 98 |     state.curlanguage = curlanguage
 99 |   },
100 | 
101 | };
102 | const actions = {
103 |   asyncsetoading: (context, loadingstatus) => { //this.$store.dispatch("asyncsetoading", false)
104 |     context.commit('setloading', loadingstatus);
105 |   },
106 | };
107 | const modulea = {
108 |   namespaced: true,
109 |   state: {
110 |     usera: "taitan",
111 |   },
112 |   mutations: {
113 |     setusera(state, name) {
114 |       state.usera = name
115 |     }
116 |   },
117 |   actions: {
118 |     asyncsetusera: (context, name) => {
119 |       context.commit("setusera", name)
120 |     }
121 |   },
122 |   getters: {
123 |     getusera(state) {
124 |       return state.modulea.usera
125 |     }
126 | 
127 |   }
128 | }
129 | export default new Vuex.Store({
130 |   state,
131 |   getters,
132 |   mutations,
133 |   actions,
134 |   modules: {
135 |     modulea
136 |   }
137 | });
138 | 


--------------------------------------------------------------------------------
/document/vuex/Vuexstore.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="vuexstore">
  3 |     <h1>{{ msg }}</h1>
  4 |     <br>
  5 |     <Button type="primary" @click="goBack">goBack one step</Button>
  6 |     <br>
  7 |     <br>
  8 |     <Button type="primary" @click="getstate">getstate</Button>
  9 |     <Button type="primary" @click="setstate">setstate</Button>
 10 |     <Button type="primary" @click="setstateasync">setstateasync</Button>
 11 |     <Button type="primary" @click="getmapvuex">getmapvuex</Button>
 12 |   </div>
 13 | </template>
 14 | <script>
 15 | import { mapGetters, mapMutations, mapState, mapActions } from 'vuex'
 16 | export default {
 17 |   name: 'Vuexstore',
 18 |   components: {
 19 | 
 20 |   },
 21 |   data() {
 22 |     return {
 23 |       msg: "以下是一个vue project组件VUEX",
 24 |     }
 25 |   },
 26 |   computed: {
 27 |     // 使用对象展开运算符将 getter 混入 computed 对象中
 28 |     ...mapGetters([
 29 |       'getuserInfo',
 30 |       'islogin',
 31 |       'isloading'
 32 |       // ...
 33 |     ]),
 34 |     // getuserInfo(){
 35 |     //   return this.$store.getters.getuserInfo
 36 |     // },
 37 | 
 38 |     ...mapState([
 39 |       // 映射 this.shopList为 store.state.shopList
 40 |       'shopList'
 41 |     ]),
 42 |     ...mapState('modulea', ['usera'])
 43 | 
 44 | 
 45 |   },
 46 |   methods: {
 47 |     goBack() {
 48 |       window.history.length > 1 ?
 49 |         this.$router.go(-1) :
 50 |         this.$router.push('/')
 51 |     },
 52 |     getstate() {
 53 |        alert(this.getuserInfo)
 54 |       alert(this.$store.state.userInfo.phone)
 55 |       this.$store.state.userInfo.phone=12344566
 56 |       alert(this.$store.state.modulea.usera)
 57 |     },
 58 |     setstate() {
 59 |       this.$store.commit("setlogin", true)
 60 |       alert(this.$store.getters.islogin)
 61 |       //this.setusera("taitanmodul");
 62 |       this.$store.commit('modulea/setusera',"taitanmodul")
 63 | 
 64 |       alert(this.$store.state.modulea.usera)
 65 |       alert(this.$store.getters['modulea/getusera']) 
 66 |       this.setusera("taitanmodulmap");
 67 |       alert(this.$store.state.modulea.usera)
 68 |     },
 69 |     setstateasync() {
 70 |       this.$store.dispatch("asyncsetoading", false)
 71 |       alert(this.$store.getters.isloading)
 72 |       this.$store.dispatch('modulea/asyncsetusera',"taitanmodulceshi")
 73 |       alert(this.$store.getters['modulea/getusera']) 
 74 |     },
 75 |     getmapvuex() {
 76 |       console.log(this.getuserInfo);
 77 |       console.log(this.shopList);
 78 |       this.setlogin("mapfalse")
 79 |       console.log(this.$store.getters.islogin);
 80 | 
 81 |       this.setuserInfo({
 82 |         phone: 19993170150,
 83 |         account: "Titans",
 84 |       })
 85 |       console.log(this.$store.state.userInfo.phone);
 86 |       this.asyncsetoading("已经加载")
 87 |       console.log(this.$store.getters.isloading);
 88 |       console.log(this.usera);
 89 | 
 90 |     },
 91 |     ...mapMutations('modulea',[
 92 |       'setusera', 
 93 |     ]),
 94 |     ...mapMutations([
 95 |       'setlogin', // 将 `this.setlogin(true)` 映射为 `this.$store.commit('setlogin',true)`
 96 |       // `mapMutations` 也支持载荷：
 97 |       'setuserInfo' // 将 `this.setuserInfo(info)` 映射为 `this.$store.commit('setuserInfo', info)`
 98 |     ]),
 99 |     ...mapActions({
100 |       asyncsetoading: 'asyncsetoading' // 将 `this.asyncsetoading(false)` 映射为 `this.$store.dispatch("asyncsetoading", false)`
101 |     })
102 | 
103 |   },
104 |   mounted() {
105 | 
106 |   },
107 | }
108 | 
109 | </script>
110 | <!-- Add "scoped" attribute to limit CSS to this component only -->
111 | <style scoped>
112 | h1,
113 | h2 {
114 |   font-weight: normal;
115 |   font-size: 14px;
116 | }
117 | 
118 | </style>
119 | 


--------------------------------------------------------------------------------
/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 | //buiid类型
  8 | const MODULE = process.env.MODULE_ENV || 'undefined'
  9 | // 入口模板路径
 10 | 
 11 | //定义build模版
 12 | var htmlTemplate = `./src/modules/${MODULE}/index.html`
 13 | 
 14 | //是否有框架页面
 15 | const moduleIframe = require('../build/module-conf').moduleIframe
 16 | const { framePage, isbuildassignmodules, buildmodules, modulesconfig, proxy,productionSourceMap,autoOpenBrowser, useEslint,showEslintErrorsInOverlay,productionGzip } = require('../projectConfig')
 17 | //获取框架页模版
 18 | if (MODULE == moduleIframe) { htmlTemplate = `./src/${MODULE}/index.html` }
 19 | 
 20 | 
 21 | //开发模式配置
 22 | module.exports = {
 23 |   dev: {
 24 |     // Paths
 25 |     assetsSubDirectory: 'static',
 26 |     assetsPublicPath: '/',
 27 |     proxy: proxy||{//配置代理
 28 |       '/api': {
 29 |         target: 'http://www.abc.com', //目标接口域名
 30 |         changeOrigin: true, //是否跨域
 31 |         pathRewrite: {
 32 |           '^/api': '/api' //重写接口
 33 |         }
 34 |       }
 35 |     },
 36 |     // Various Dev Server settings
 37 |     host: 'localhost', // can be overwritten by process.env.HOST
 38 |     port: 8086, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
 39 | 
 40 |     errorOverlay: true,
 41 |     notifyOnErrors: true,
 42 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
 43 | 
 44 |     // Use Eslint Loader?
 45 |     // If true, your code will be linted during bundling and
 46 |     // linting errors and warnings will be shown in the console.
 47 |     autoOpenBrowser: autoOpenBrowser || true,
 48 |     useEslint: useEslint || false,
 49 |     // If true, eslint errors and warnings will also be shown in the error overlay
 50 |     // in the browser.
 51 |     showEslintErrorsInOverlay: showEslintErrorsInOverlay||false,
 52 | 
 53 |     /**
 54 |      * Source Maps
 55 |      */
 56 | 
 57 |     // https://webpack.js.org/configuration/devtool/#development
 58 |     devtool: 'cheap-module-eval-source-map',
 59 | 
 60 |     // If you have problems debugging vue-files in devtools,
 61 |     // set this to false - it *may* help
 62 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
 63 |     cacheBusting: true,
 64 | 
 65 |     cssSourceMap: true
 66 |   },
 67 | 
 68 |   build: {
 69 |     // Template for index.html
 70 |     index: path.resolve(__dirname, '../dist', MODULE, 'index.html'),
 71 |     // 加入html入口
 72 |     htmlTemplate: htmlTemplate,
 73 |     // Paths
 74 |     // assetsRoot: path.resolve(__dirname, '../dist', MODULE),
 75 |     // 这里判断一下打包的模式，如果是分开打包，要把成果物放到以模块命名的文件夹中
 76 |     assetsRoot: process.env.MODE_ENV === 'separate' ? path.resolve(__dirname, '../dist', MODULE) : path.resolve(__dirname, '../dist'),
 77 |     assetsSubDirectory: 'static',
 78 |     // 这里的路径改成相对路径，原来是assetsPublicPath: '/',
 79 |     // assetsPublicPath: '/',
 80 |     assetsPublicPath: './',
 81 | 
 82 |     /**
 83 |      * Source Maps
 84 |      */
 85 | 
 86 |     productionSourceMap: productionSourceMap||false,
 87 |     // https://webpack.js.org/configuration/devtool/#production
 88 |     devtool: '#source-map',
 89 |     // Gzip off by default as many popular static hosts such as
 90 |     // Surge or Netlify already gzip all static assets for you.
 91 |     // Before setting to `true`, make sure to:
 92 |     // npm install --save-dev compression-webpack-plugin
 93 |     productionGzip: productionGzip||false,
 94 |     productionGzipExtensions: ['js', 'css'],
 95 | 
 96 |     // Run the build command with an extra argument to
 97 |     // View the bundle analyzer report after build finishes:
 98 |     // `npm run build --report`
 99 |     // Set to `true` or `false` to always turn it on or off
100 |     bundleAnalyzerReport: process.env.npm_config_report
101 |   }
102 | }
103 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "vue-multipage-platform-project",
  3 |   "version": "1.0.0",
  4 |   "description": "A Vue.js project",
  5 |   "author": "Titans,2396757591@qq.com",
  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 |     "e2e": "node test/e2e/runner.js",
 12 |     "test": "npm run unit && npm run e2e",
 13 |     "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
 14 |     "build": "node build/build.js",
 15 |     "build-all": "node build/build-all.js",
 16 |     "deploy": "node build/autodeploy.js"
 17 |   },
 18 |   "dependencies": {
 19 |     "axios": "^1.6.0",
 20 |     "echarts": "^4.2.1",
 21 |     "echarts-gl": "^1.1.1",
 22 |     "iview": "^3.5.0",
 23 |     "v-viewer": "^1.4.2",
 24 |     "vue": "^2.6.10",
 25 |     "vue-croppa": "^1.3.8",
 26 |     "vue-i18n": "^8.14.0",
 27 |     "vue-router": "^3.1.2",
 28 |     "vue-scroll-behavior": "^0.2.0",
 29 |     "vue-video-player": "^6.0.0",
 30 |     "vuex": "^3.1.1"
 31 |   },
 32 |   "devDependencies": {
 33 |     "autoprefixer": "^7.1.2",
 34 |     "babel-polyfill": "^6.26.0",
 35 |     "babel-core": "^6.22.1",
 36 |     "babel-eslint": "^8.2.1",
 37 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
 38 |     "babel-loader": "^7.1.1",
 39 |     "babel-plugin-istanbul": "^4.1.1",
 40 |     "babel-plugin-syntax-jsx": "^6.18.0",
 41 |     "babel-plugin-transform-runtime": "^6.22.0",
 42 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
 43 |     "babel-preset-env": "^1.3.2",
 44 |     "babel-preset-stage-2": "^6.22.0",
 45 |     "babel-register": "^6.22.0",
 46 |     "chai": "^4.1.2",
 47 |     "chalk": "^2.0.1",
 48 |     "clean-webpack-plugin": "^3.0.0",
 49 |     "compression-webpack-plugin": "1.1.12",
 50 |     "copy-webpack-plugin": "^4.0.1",
 51 |     "cross-env": "^5.0.1",
 52 |     "cross-spawn": "^5.0.1",
 53 |     "css-loader": "^0.28.0",
 54 |     "eslint": "^4.15.0",
 55 |     "eslint-config-standard": "^10.2.1",
 56 |     "eslint-friendly-formatter": "^3.0.0",
 57 |     "eslint-loader": "^1.7.1",
 58 |     "eslint-plugin-import": "^2.7.0",
 59 |     "eslint-plugin-node": "^5.2.0",
 60 |     "eslint-plugin-promise": "^3.4.0",
 61 |     "eslint-plugin-standard": "^3.0.1",
 62 |     "eslint-plugin-vue": "^4.0.0",
 63 |     "extract-text-webpack-plugin": "^3.0.0",
 64 |     "file-loader": "^1.1.4",
 65 |     "friendly-errors-webpack-plugin": "^1.6.1",
 66 |     "html-webpack-plugin": "^5.5.3",
 67 |     "inject-loader": "^3.0.0",
 68 |     "karma": "^6.4.2",
 69 |     "karma-coverage": "^1.1.1",
 70 |     "karma-mocha": "^1.3.0",
 71 |     "karma-phantomjs-launcher": "^1.0.2",
 72 |     "karma-phantomjs-shim": "^1.4.0",
 73 |     "karma-sinon-chai": "^1.3.1",
 74 |     "karma-sourcemap-loader": "^0.3.7",
 75 |     "karma-spec-reporter": "0.0.31",
 76 |     "karma-webpack": "^2.0.2",
 77 |     "less-loader": "^5.0.0",
 78 |     "mocha": "^3.2.0",
 79 |     "nightwatch": "^0.9.12",
 80 |     "node-notifier": "^5.1.2",
 81 |     "node-sass": "^4.12.0",
 82 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
 83 |     "ora": "^1.2.0",
 84 |     "phantomjs-prebuilt": "^2.1.14",
 85 |     "portfinder": "^1.0.13",
 86 |     "postcss-import": "^11.0.0",
 87 |     "postcss-loader": "^2.0.8",
 88 |     "postcss-url": "^7.2.1",
 89 |     "rimraf": "^2.6.0",
 90 |     "sass-loader": "7.3.1",
 91 |     "selenium-server": "^3.0.1",
 92 |     "semver": "^5.3.0",
 93 |     "shelljs": "^0.7.6",
 94 |     "sinon": "^4.0.0",
 95 |     "sinon-chai": "^2.8.0",
 96 |     "uglifyjs-webpack-plugin": "^1.1.1",
 97 |     "url-loader": "^0.5.8",
 98 |     "vue-loader": "^13.3.0",
 99 |     "vue-style-loader": "^3.0.1",
100 |     "vue-template-compiler": "^2.6.10",
101 |     "webpack": "^3.6.0",
102 |     "webpack-bundle-analyzer": "^2.9.0",
103 |     "webpack-dev-server": "^2.9.1",
104 |     "webpack-merge": "^4.1.0"
105 |   },
106 |   "engines": {
107 |     "node": ">= 6.0.0",
108 |     "npm": ">= 3.0.0"
109 |   },
110 |   "browserslist": [
111 |     "> 1%",
112 |     "last 2 versions",
113 |     "not ie <= 8"
114 |   ]
115 | }
116 | 


--------------------------------------------------------------------------------
/src/api/http.js:
--------------------------------------------------------------------------------
  1 | // 本文件不允许私自修改，环保除引用第三方接口外一律使用post请求方式，接口定义请参考接口规范书写，这里只做全局http请求状态拦截，其他用户状态一律放行，页面内部做判断自行处理
  2 | import axios from 'axios'
  3 | import viewDesign from 'view-design'
  4 | import {
  5 |   baseUrl
  6 | } from './url'
  7 | import Qs from 'qs'
  8 | window.globalHttpUrl = {
  9 |   baseURL: baseUrl
 10 | }
 11 | axios.defaults.timeout = 60000
 12 | axios.defaults.baseURL = baseUrl
 13 | axios.defaults.headers.post['Content-Type'] = 'application/json'
 14 | axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8'
 15 | const oldUrl = axios.defaults.baseURL
 16 | // 请求拦截
 17 | axios.interceptors.request.use(function (config) {
 18 |   viewDesign.LoadingBar.start()
 19 |   const token = sessionStorage.getItem('accessToken') || localStorage.getItem('accessToken')
 20 |   if (token) {
 21 |     config.headers.Authorization = token
 22 |   }
 23 |   return config
 24 | }, function (error) {
 25 |   return Promise.reject(error.response)
 26 | })
 27 | // axios.interceptors.request.onerror = function handleError() {
 28 | //   Promise.reject(createError('Network Error', axios.interceptors.request.config, null, axios.interceptors.request))
 29 | // }
 30 | axios.interceptors.response.use(function (response) {
 31 |   viewDesign.LoadingBar.finish()
 32 |   if (response.status === 200) {
 33 |     switch (response.data.code) {
 34 |       case (401):
 35 |         console.log('Unauthorized,表示用户没有权限(令牌、用户名、密码错误)')
 36 |         break
 37 |       case (400):
 38 |         console.log('Invalid Request,用户发出的请求有错误')
 39 |         break
 40 |       case (403):
 41 |         console.log('Forbidden, 表示用户得到授权(与 401 错误相对)，但是访问是被禁止的')
 42 |         break
 43 |       case (404):
 44 |         console.log('Not Found,用户发出的请求针对的是不存在的记录，服务器没有进行操作')
 45 |         break
 46 |       case (406):
 47 |         console.log('Not Acceptable， 用户请求的格式不可得(比如用户请求 JSON格式，但是只有XMLs格式)。')
 48 |         break
 49 |       case (422):
 50 |         console.log('Unprocesable entitz， 当创建一个对象时，发生一个验证错误')
 51 |         break
 52 |       case (500):
 53 |         console.log('Internal Server Error， 服务器发生错误，用户将无法判断发出的请求是否成功。')
 54 |         break
 55 |       default:
 56 |         break
 57 |     }
 58 |   }
 59 |   return response
 60 | }, function (error) {
 61 |   // 对响应错误做处理
 62 |   return {
 63 |     data: {
 64 |       code: 0,
 65 |       errorInfor: error
 66 |     },
 67 |     code: 0
 68 |   }
 69 | })
 70 | export let Axios = axios
 71 | // 封装axios的get请求
 72 | export function get(url, params, Origin, openLoading) {
 73 |   axios.defaults.baseURL = oldUrl
 74 |   if (Origin) {
 75 |     axios.defaults.baseURL = Origin
 76 |   }
 77 |   return new Promise((resolve, reject) => {
 78 |     axios
 79 |       .get(url, {
 80 |         params: params,
 81 |         headers: {
 82 |           'Access-Control-Allow-Origin': '*',
 83 |           'Content-Type': 'application/json;charset=UTF-8'
 84 |         }
 85 |       })
 86 |       .then(response => {
 87 |         // console.log('get', '\n', url, '\n', params, '\n', response)
 88 |         resolve(response.data)
 89 |       })
 90 |       .catch(error => {
 91 |         reject(error)
 92 |       })
 93 |   })
 94 | }
 95 | 
 96 | // 封装axios的post请求
 97 | export function post(url, data = {}, Origin, openLoading) {
 98 |   axios.defaults.baseURL = oldUrl
 99 |   if (Origin) {
100 |     axios.defaults.baseURL = Origin
101 |   }
102 |   return new Promise((resolve, reject) => {
103 |     axios
104 |       .post(url, data)
105 |       .then(response => {
106 |         console.log('post', '\n', url, 'response', response, '\n', data, '\n', response)
107 |         resolve(response.data)
108 |       })
109 |       .catch(error => {
110 |         reject(error)
111 |       })
112 |   })
113 | }
114 | 
115 | // 封装axios的post请求-序列化
116 | export function postStringify(url, data = {},
117 |   Origin, openLoading) {
118 |   axios.defaults.baseURL = oldUrl
119 |   if (Origin) {
120 |     axios.defaults.baseURL = Origin
121 |   }
122 |   return new Promise((resolve, reject) => {
123 |     axios({
124 |       method: 'post',
125 |       url: url,
126 |       data: Qs.stringify(data)
127 |     })
128 |       .then(response => {
129 |         resolve(response.data)
130 |       })
131 |       .catch(error => {
132 |         reject(error)
133 |       })
134 |   })
135 | }
136 | 
137 | // 封装axios的下载数据流转换成excel
138 | export function DownLoadToExcel(url, data = {}, fileName) {
139 |   fileName = fileName + '.xls'
140 |   return new Promise((resolve, reject) => {
141 |     axios
142 |       .post(url, data, {
143 |         responseType: 'blob'
144 |       })
145 |       .then(response => {
146 |         const blob = new Blob([response.data], {
147 |           type: 'application/vnd.ms-excel'
148 |         })
149 |         if ('download' in document.createElement('a')) {
150 |           // 非IE下载
151 |           const elink = document.createElement('a')
152 |           elink.download = fileName
153 |           elink.style.display = 'none'
154 |           elink.href = URL.createObjectURL(blob)
155 |           document.body.appendChild(elink)
156 |           elink.click()
157 |           URL.revokeObjectURL(elink.href)
158 |           document.body.removeChild(elink)
159 |         } else {
160 |           // IE10+下载
161 |           navigator.msSaveBlob(blob, fileName)
162 |         }
163 |         resolve()
164 |       })
165 |       .catch(error => {
166 |         console.log(error)
167 |         reject(error)
168 |       })
169 |   })
170 | }
171 | // 封装axios的下载数据流转换成excel
172 | export function DownLoadToFile (url, data = {}, fileName, Origin, openLoading) {
173 |   axios.defaults.baseURL = oldUrl
174 |   if (Origin) {
175 |     axios.defaults.baseURL = Origin
176 |   }
177 |   fileName = fileName + '.xlsx' || 'download.xlsx'
178 |   return new Promise((resolve, reject) => {
179 |     axios
180 |       .get(url, data, {
181 |         'responseType': 'blob',
182 |         'Access-Control-Allow-Origin': '*',
183 |         'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
184 |       })
185 |       .then(response => {
186 |         const blob = new Blob([response.data], {
187 |           type: 'application/octet-stream'
188 |         })
189 |         let objectUrl = URL.createObjectURL(blob)
190 |         if ('download' in document.createElement('a')) {
191 |           let a = document.createElement('a')
192 |           a.setAttribute('href', objectUrl)
193 |           a.setAttribute('download', fileName)
194 |           a.click()
195 |         } else {
196 |           // IE10+下载
197 |           navigator.msSaveBlob(blob, fileName)
198 |         }
199 |         resolve(blob)
200 |       })
201 |       .catch(error => {
202 |         console.log(error)
203 |         reject(error)
204 |       })
205 |   })
206 | }
207 | 


--------------------------------------------------------------------------------
/document/component.txt:
--------------------------------------------------------------------------------
  1 | export default {
  2 |   name: ’string’
  3 |   components: {}, //{组件1，组件2}，所导入组件名
  4 |   props: {} || [], //  组件父组件传递值，推荐用对象形式，例如:
  5 |   props: {
  6 |     yearlimit: {
  7 |       type: Array, //注意若类型为Object||Array,default的值必须用工厂函数返回
  8 |       default: function() {
  9 |         return [];
 10 |         //[min,max]
 11 |       }
 12 |     },
 13 |   },
 14 |   data() { returen { dataobj: { key: value } } }, //组件数据源
 15 |   
 16 |   beforeCreate() {
 17 |     //alert("创建vue实例前")
 18 |   },
 19 |   created() {
 20 |     //alert("实例创建完成")
 21 |   },
 22 |   beforeMount() {
 23 |     //alert("虚拟dom开始挂载到实际dom树中")
 24 |   },
 25 |   mounted() {
 26 |     //alert("虚拟dom已经挂载到实际dom树中,页面加载完成");
 27 |   },
 28 |   beforeUpdate() {
 29 |     //alert("更新前")
 30 |   },
 31 |   updated() {
 32 |     //alert("更新完成")
 33 |   },
 34 |   beforeDestroy() {
 35 |     //alert("销毁前")
 36 |   },                                                                                                                                                                                                                                                                                                                                                                                                                                                
 37 |   destroyed() {
 38 |     //alert("销毁完成")
 39 |   },
 40 |   //以上8个为vue的一个生命周期
 41 | 
 42 |   activated() {
 43 |     //在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等
 44 |   },
 45 |   beforeRouteEnter(to, from, next) {
 46 |     // 进入路由前
 47 |     console.log(this, 'beforeRouteUpdate'); //undefined
 48 |     next(vm => {
 49 |       //因为当钩子执行前，组件实例还没被创建
 50 |       // vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
 51 |       console.log(vm); //当前组件的实例
 52 |     })
 53 |   },
 54 |   beforeRouteUpdate(to, from, next) {
 55 |     //在当前路由改变，但是该组件被复用时调用
 56 |     //对于一个带有动态参数的路径 /good/:id，在 /good/1 和 /good/2 之间跳转的时候，
 57 |     // 由于会渲染同样的good组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
 58 |     // 可以访问组件实例 `this`
 59 |     console.log(this, 'beforeRouteUpdate'); //当前组件实例
 60 |     next();
 61 |   },
 62 |   beforeRouteLeave(to, from, next) {
 63 |     // 导航离开该组件的对应路由时调用
 64 |     // 可以访问组件实例 `this`
 65 |     console.log(this, 'beforeRouteLeave'); //当前组件实例
 66 |     next();
 67 |   },
 68 |   computed: { //计算属性 
 69 |     key() { //这里的key相当于date里面的数据源，不能在data里面重复定义
 70 |       return a newValue by calculating and refining known properties in data
 71 |       //return a value(必须)
 72 |     }
 73 |   },
 74 |   filters: { //过滤器，对一些绑定值进行过滤筛选，比如只允许输入数字 v-model=”value| filterDigital”
 75 |     filterName(value) {
 76 |       return a newValue by filter the value
 77 |     }
 78 |   },
 79 |   methods: {
 80 |     methodName(arg…) {
 81 |       //要执行的操作
 82 |     },
 83 |   },
 84 |   watch: {
 85 |     dataobj: {
 86 |       handler() {
 87 |         //要执行的操作
 88 |       },
 89 |       deep: true, //是否深度监听，意为对象dataobj内部任何属性发生变化则全局重新渲染
 90 |       immediate: true // 代表在wacth里声明了dataobj这个方法之后立即先去执行handler方法
 91 |     }
 92 |   }
 93 | }
 94 | 
 95 | 
 96 | 
 97 | 
 98 | Vue所有的生命周期钩子自动绑定在this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文，因此this与你期待的Vue实例不同。
 99 | 1、beforeCreate
100 | 　　在实例初始化之后，数据观测和event/watcher时间配置之前被调用。
101 | 2、created
102 | 　　实例已经创建完成之后被调用。在这一步，实例已经完成以下的配置：数据观测，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。
103 | 3、beforeMount
104 | 　　在挂载开始之前被调用：相关的render函数首次被调用。
105 | 　　该钩子在服务器端渲染期间不被调用。  
106 | 4、mounted
107 | 　　el被新创建的vm.$el替换，并挂在到实例上去之后调用该钩子函数。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el也在文档内。
108 | 　　该钩子在服务端渲染期间不被调用。
109 | 5、beforeUpdate
110 | 　　数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。
111 | 　　你可以在这个钩子中进一步第更改状态，这不会触发附加的重渲染过程。
112 | 　　该钩子在服务端渲染期间不被调用。
113 | 6、updated
114 | 　　由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
115 | 　　当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
116 | 　　该钩子在服务端渲染期间不被调用。
117 | 7、activated
118 | 　　keep-alive组件激活时调用。
119 | 　　该钩子在服务器端渲染期间不被调用。
120 | 8、deactivated
121 | 　　  
122 | 9、beforeDestroy 【类似于React生命周期的componentWillUnmount】
123 | 　　实例销毁之间调用。在这一步，实例仍然完全可用。
124 | 　　该钩子在服务端渲染期间不被调用。
125 | 10、destroyed
126 | 　　Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
127 | 　　该钩子在服务端渲染不会被调用。
128 | 
129 | 
130 | 
131 | 
132 | 
133 | 
134 | 
135 | 
136 | 
137 | 
138 | 
139 | 
140 | 
141 | 
142 | 
143 | 
144 | 这里放置全局组件
145 | 
146 | 全局组件为了方便公用，及以后调用，全局组件中每一个组件文件夹中应包含组件名及所用素材资源文件，若仅为样式不需要img等资源则写为一个文件即可，另外每一个组件附上调用说明
147 | 
148 | 关于全局组件和路由皆以如下懒加载的方式调用
149 | 
150 | 路由和组件的常用两种懒加载方式：
151 | 1、vue异步组件实现路由懒加载
152 | 　　component：resolve=>(['需要加载的路由的地址'，resolve])
153 | 2、es提出的import(推荐使用这种方式)
154 |  　const HelloWorld = ()=>import('需要加载的模块地址')
155 | npm run build后会新增路由数量与之加载相匹配的.js文件，在切到相应路由或组件时动态加载这个文件。
156 | 
157 | // 这两条路由被打包在相同的块中，访问任一路由都会延迟加载该路由组件
158 | const OtherMassivePage = r => require.ensure([], () => r(require('./routes/OtherMassivePage.vue')), 'big-pages')
159 | const WeightLossPage = r => require.ensure([], () => r(require('./routes/WeightLossPage.vue')), 'big-pages')
160 | 
161 | vue render函数说明
162 |   render: (h, params) => {
163 |     var vm = this;
164 |     return h('Input', {
165 |       attrs: {
166 |         value: params.row.age,
167 |         readonly: params.row.status == 2 ? false : true,
168 |         class: params.row.status == 2 ? "border ivu-input" : "noborder ivu-input",
169 |       },
170 |       on: {
171 |         input(val) {
172 |           这里用的是iview Input组件，input事件的返回值是改变后的值，若要调用event,需直接调用:var event=window.event;
173 |           若直接用原生的input标签，input事件的返回值是event，改编后的值用event.target.value;
174 |           //值改变时 
175 |           //将渲染后的值重新赋值给单元格值;
176 |           params.row.age = val;
177 |           vm.data8[params.index] = params.row;
178 |         }
179 |       }
180 |     })
181 |   }
182 |   上面是渲染表格的某一列的一个例子，当需要分情况渲染不同元素时，可以如下格式去写：
183 |     render: (h, params) => {
184 |       return h('div', [
185 |         h('Button', {
186 |           style: {
187 |             display: params.row.status == 0 ? "inline-block" : "none",
188 |             marginRight: '5px'
189 |           },
190 |           on: {
191 |             click: () => {
192 |               this.edit(params.index)
193 |             }
194 |           }
195 |         }, 'edit'),
196 |         h('Button', {
197 |           style: {
198 |             display: params.row.status == 2 ? "inline-block" : "none",
199 |             marginRight: '5px'
200 |           },
201 |           on: {
202 |             click: () => {
203 |               this.endedit(params.index)
204 |             }
205 |           }
206 |         }, 'endedit')
207 |       ]);
208 |     }
209 |   }
210 | 
211 |   h相当于createElement，为一个回调函数，h的第二个参数为一个对象，也可以为一个数组，每个值又为一个对象，当然也可以嵌套多层标签，支持的所有属性如下（以下所有的属性值都支持表达式赋值）
212 |   {
213 |   // 和`v-bind:class`一样的 API
214 |   'class': {
215 |     foo: true,
216 |     bar: false
217 |   },
218 |   // 和`v-bind:style`一样的 API
219 |   style: {
220 |     color: 'red',
221 |     fontSize: '14px'
222 |   },
223 |   // 正常的 HTML 特性
224 |   attrs: {
225 |     id: 'foo'
226 |   },
227 |   // 组件 props
228 |   props: {
229 |     myProp: 'bar'
230 |   },
231 |   // DOM 属性
232 |   domProps: {
233 |     innerHTML: 'baz'
234 |   },
235 |   // 事件监听器基于 `on`
236 |   // 所以不再支持如 `v-on:keyup.enter` 修饰器
237 |   // 需要手动匹配 keyCode。
238 |   on: {
239 |     click: this.clickHandler
240 |   },
241 |   // 仅对于组件，用于监听原生事件，而不是组件内部使用 `vm.$emit` 触发的事件。
242 |   nativeOn: {
243 |     click: this.nativeClickHandler
244 |   },
245 |   // 自定义指令。注意事项：不能对绑定的旧值设值
246 |   // Vue 会为您持续追踪
247 |   directives: [
248 |     {
249 |       name: 'my-custom-directive',
250 |       value: '2',
251 |       expression: '1 + 1',
252 |       arg: 'foo',
253 |       modifiers: {
254 |         bar: true
255 |       }
256 |     }
257 |   ],
258 |   // Scoped slots in the form of
259 |   // { name: props => VNode | Array<VNode> }
260 |   scopedSlots: {
261 |     default: props => createElement('span', props.text)
262 |   },
263 |   // 如果组件是其他组件的子组件，需为插槽指定名称
264 |   slot: 'name-of-slot',
265 |   // 其他特殊顶层属性
266 |   key: 'myKey',
267 |   ref: 'myRef'
268 | }
269 | 
270 | 


--------------------------------------------------------------------------------
/src/framePage/components/account.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="account-con">
  3 |     <div class="account-head">
  4 |     </div>
  5 |     <ul>
  6 |       <li v-for="(item,index) in accountmodulelist" :key="index" :class="item.iscurselect?'active':''" @click="onNavAccountClick(index)">
  7 |         <div class="navbtn" target="container">
  8 |           <span v-if="item.showtype=='text'">{{curlanguage=='Chinese'?item.cnname:item.name}}</span>
  9 |           <img v-if="item.showtype=='ico'" :src="item.ico">
 10 |         </div>
 11 |         <dl v-show="item.iscurselect">
 12 |           <dt v-for="(itemc,indexc) in item.children" :key="indexc" :class="itemc.iscurselect?'active':''" @click="onNavAccountClick(index,indexc)">
 13 |             {{curlanguage=='Chinese'?itemc.cnname:itemc.name}}
 14 |           </dt>
 15 |         </dl>
 16 |       </li>
 17 |     </ul>
 18 |   </div>
 19 | </template>
 20 | <script>
 21 | export default {
 22 |   name: 'frameaccount',
 23 |   props: {
 24 |     language: {
 25 |       type: String,
 26 |       default () { return "Chinese" }
 27 |     },
 28 |     theme: {
 29 |       type: String,
 30 |       default () { return "luxury" }
 31 |     }
 32 |   },
 33 |   data() {
 34 |     return {
 35 |       curlanguage: this.language,
 36 |       curtheme: this.theme,
 37 |       accountmodulelist: [{
 38 |           name: "theme",
 39 |           cnname: "主题",
 40 |           showtype: "text",
 41 |           // ico:require(""),
 42 |           iscurselect: false,
 43 |           children: [{
 44 |             name: "luxury",
 45 |             cnname: "轻奢",
 46 |             iscurselect: false,
 47 |           }, {
 48 |             name: "vitality",
 49 |             cnname: "活力",
 50 |             iscurselect: false,
 51 |           }, {
 52 |             name: "youth",
 53 |             cnname: "年轻",
 54 |             iscurselect: false,
 55 |           }, {
 56 |             name: "mature",
 57 |             cnname: "成熟",
 58 |             iscurselect: false,
 59 |           }]
 60 |         },
 61 |         {
 62 |           name: "language",
 63 |           cnname: "语言",
 64 |           showtype: "text",
 65 |           // ico:require(""),
 66 |           iscurselect: false,
 67 |           children: [{
 68 |             name: "Chinese",
 69 |             cnname: "汉语",
 70 |             iscurselect: false,
 71 |           }, {
 72 |             name: "English",
 73 |             cnname: "英语",
 74 |             iscurselect: false,
 75 |           }]
 76 |         },
 77 |         {
 78 |           name: "account",
 79 |           cnname: "账户",
 80 |           showtype: "text",
 81 |           // ico:require(""),
 82 |           iscurselect: false
 83 |         },
 84 |         {
 85 |           name: "login",
 86 |           cnname: "登录",
 87 |           showtype: "text",
 88 |           // ico:require(""),
 89 |           iscurselect: false
 90 |         }
 91 |       ]
 92 |     }
 93 |   },
 94 |   methods: {
 95 |     onNavAccountClick(index, indexc) {
 96 |       let self = this
 97 |       self.setAllNoSelect(index)
 98 |       switch (self.accountmodulelist[index].name) {
 99 |         case "theme":
100 |           self.setTheme(index, indexc)
101 |           break;
102 |         case "language":
103 |           self.setlanguage(index, indexc)
104 |           break;
105 |         case "account":
106 |           self.setAccount(index, indexc)
107 |           break;
108 |         case "login":
109 |           self.toLogin(index, indexc)
110 |           break;
111 |         case "loginout":
112 |           self.toLoginOut(index, indexc)
113 |           break;
114 |         default:
115 |           break;
116 |       }
117 |       // self.$emit("accountClick", false)
118 |     },
119 |     setTheme(index, indexc) {
120 |       let self = this
121 |       if (indexc >= 0) {
122 |         self.setAllCNoSelect(index);
123 |         self.curtheme = self.accountmodulelist[index].children[indexc].name
124 |         self.$set(self.accountmodulelist[index].children[indexc], "iscurselect", true)
125 |         self.$set(self.accountmodulelist[index], "iscurselect", false)
126 |         self.$emit("accountClick", false, "theme", self.accountmodulelist[index].children[indexc].name)
127 |       }
128 | 
129 |     },
130 |     setlanguage(index, indexc) {
131 |       let self = this
132 |       if (indexc >= 0) {
133 |         self.setAllCNoSelect(index);
134 |         self.curlanguage = self.accountmodulelist[index].children[indexc].name
135 |         self.$set(self.accountmodulelist[index].children[indexc], "iscurselect", true)
136 |         self.$set(self.accountmodulelist[index], "iscurselect", false)
137 |         self.$emit("accountClick", false, "language", self.accountmodulelist[index].children[indexc].name)
138 |       }
139 | 
140 |     },
141 |     setAccount(index, indexc) {
142 |       let self = this
143 |       self.$emit("accountClick", false)
144 |     },
145 |     toLogin(index) {
146 |       let self = this
147 |       self.$emit("accountClick", false)
148 |     },
149 |     toLoginOut(index) {
150 |       let self = this
151 |       self.$emit("accountClick", false)
152 |     },
153 |     setAllNoSelect(index) {
154 |       let self = this
155 |       for (var i = 0; i < self.accountmodulelist.length; i++) {
156 |         if (index == i) {
157 |           self.$set(self.accountmodulelist[i], "iscurselect", !
158 |             self.accountmodulelist[i].iscurselect);
159 |           continue;
160 |         }
161 |         self.$set(self.accountmodulelist[i], "iscurselect", false);
162 |       }
163 |     },
164 |     setAllCNoSelect(index) {
165 |       let self = this
166 |       let arr = []
167 |       self.accountmodulelist[index].children.forEach(function(t, i) {
168 |         self.$set(t, "iscurselect", false);
169 |         arr.push(t)
170 |       })
171 |       self.accountmodulelist[index].children = arr
172 |       self.$set(self.accountmodulelist, index, self.accountmodulelist[index]);
173 | 
174 |     }
175 |   },
176 |   mounted() { //
177 |     this.curlanguage = this.language
178 |     this.curtheme = this.theme
179 |   },
180 |   watch: {
181 |     language: {
182 |       handler(newValue, oldValue) {
183 |         this.curlanguage = newValue
184 |       },
185 |       deep: true,
186 |       immediately: true
187 |     },
188 |     theme: {
189 |       handler(newValue, oldValue) {
190 |         this.curtheme = newValue
191 |       },
192 |       deep: true,
193 |       immediately: true
194 |     },
195 | 
196 |   }
197 | }
198 | 
199 | </script>
200 | <style scoped lang="scss">
201 | .account-con {
202 |   position: relative;
203 | 
204 |   .account-head {
205 |     left: 50%;
206 |     border: 1px solid #2e2f30;
207 |     content: "";
208 |     display: block;
209 |     position: absolute;
210 |     top: -10px;
211 |     width: 12px;
212 |     height: 12px;
213 |     background: #2e2f30;
214 |     transform: rotate(45deg);
215 |     transform-origin: 0% 0;
216 |   }
217 | 
218 |   ul {
219 |     width: 200px;
220 |     background: #2e2f30;
221 |     padding: 20px;
222 | 
223 |   }
224 | 
225 |   dl {
226 |     display: block;
227 |     background: #484a4b;
228 | 
229 |     dt {
230 |       cursor: pointer;
231 |       line-height: 25px;
232 |       color: #bbb;
233 |       font-size: 13px;
234 |       padding: 5px 20px 5px 20px;
235 |       border-bottom: solid 1px #787a7e;
236 |     }
237 | 
238 |     dt.active {
239 |       color: #fff;
240 |     }
241 | 
242 |     dt:hover {
243 |       color: #fff;
244 |     }
245 |   }
246 | 
247 | 
248 |   li {
249 |     text-align: left;
250 |     border-bottom: solid 1px #787a7e;
251 |     cursor: pointer;
252 | 
253 |     .navbtn {
254 | 
255 |       display: inline-block;
256 |       color: #ccc;
257 |       line-height: 30px;
258 |       font-size: 13px;
259 |     }
260 |   }
261 | 
262 |   li:last-child {
263 |     border-bottom: solid 0px #787a7e;
264 |   }
265 | 
266 |   li:hover .navbtn {
267 |     color: #fff;
268 |   }
269 | 
270 | }
271 | 
272 | @media only screen and (max-width: 1215px) {
273 |   .account-con .account-head {
274 |     top: -10px;
275 |     left: 87%;
276 |   }
277 | }
278 | 
279 | @media only screen and (max-width: 650px) {
280 |   .account-con .account-head {
281 |     top: -10px;
282 |     left: 80%;
283 |   }
284 | }
285 | 
286 | </style>
287 | 


--------------------------------------------------------------------------------
/document/router/router.txt:
--------------------------------------------------------------------------------
  1 | 使用Vue搭建项目的时候，为了避免一个页面过大，将本应该一个页面显示的内容分成多个页面，并使用同级视图展示。
  2 | 
  3 | 路由说明
  4 | <router-link to='指向要链接的组件'>路由说明文字</router-link> 是一个用来让用户在 vue-router 应用的不同路径间跳转的标签。该指令to属性 接收一个 JavaScript 表达式，并会在用户点击元素时用该表达式的值去调用 router.Go。
  5 | router-link不支持target="_blank"，它是一个开发单页应用的组件，所以，想要打开新窗口还是要使用a标签，如果要引入路由相关信息，一定要引入vue-router插件。
  6 | 
  7 | 具体来讲，router-link有三种用法：
  8 | <!-- 字面量路径 -->
  9 | <router-link to='指向要链接的地址'>name</router-link>
 10 | <!-- 地址路由，效果同上 -->
 11 | <router-link to="{ path: 'pathname', params: {id: '01'} }>name</router-link>
 12 | <!-- 具名路径也叫命名路由 -->
 13 | <router-link to="{ name: 'detail', params: {id: '01'} }">name</router-link>
 14 | v-link 会自动设置 <a> 的 href 属性，你无需使用href来处理浏览器的调整，原因如下：
 15 | 它在 HTML5 history 模式和 hash 模式下的工作方式相同，所以如果你决定改变模式，或者 IE9 浏览器退化为 hash 模式时，都不需要做任何改变。
 16 | 在 HTML5 history 模式下使用 root 选项时，不需要在 router-link 的 URL 中包含 root 路径。
 17 | 
 18 | 除过 <router-link to='指向要链接的组件'>name</router-link>，直接跳转外，路由也可使用编程式路由进行跳转：
 19 | 具体如下
 20 | $router.push(“name”);
 21 | $router.push({path:”name”});
 22 | $router.push({path:”name”?a=123}); //传参
 23 | $router.push({path:”name”，query:{a:123}});
 24 | $router.go(*);  go(-1)返回到上一个路由，go(1)，若有返回记录则前进到下一个路由
 25 | 参数查询：$router.query.[参数名]
 26 | 
 27 | 路由对象：
 28 | 在使用了 vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$route ，并且当路由切换时，路由对象会被更新。
 29 | $route:{
 30 |   path:"str",//绝对路径
 31 |   params:{},//包含路由中的动态片段和全匹配片段的键值对
 32 |   query:{}, //包含路由中查询参数的键值对。例如，对于 /home/news/detail/.  01?favorite=yes ，会得到$route.query.favorite == 'yes' 。
 33 |   hash:'',
 34 |   router:"",//路由规则所属的路由器（以及其所属的组件）。
 35 |   fullPath:'str',
 36 |   matched:[],//数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
 37 |   name:"name",//当前路径的名字，如果没有使用具名路径，则名字为空。
 38 |   redirectedFrom:"name",//当路由中设置了重定向会显示此参数，路由重定向来源
 39 | }
 40 | 当路由地址中使用一个通配符*时，$route.params 内会自动添加一个名为 pathMatch 参数,同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。
 41 | 
 42 | 在页面上添加以下代码，可以显示这些路由对象的属性：
 43 | <div>
 44 |     <p>当前路径：{{$route.path}}</p>
 45 |     <p>当前参数：{{$route.params | json}}</p>
 46 |     <p>路由名称：{{$route.name}}</p>
 47 |     <p>路由查询参数：{{$route.query | json}}</p>
 48 |     <p>路由匹配项：{{$route.matched | json}}</p>
 49 | </div>
 50 | 
 51 | 使用<router-view></router-view>标签，它用于渲染匹配的组件，router-view放置路径位置与routers 对应一致，
 52 | 
 53 | 扩展：指定路由跳转放置插槽，可以使用name属性指定，这里的name值一定是组件name，即路由配置中component的值，
 54 | 同一路由渲染多个组件亦可路由中配置component:{default:组件1，hello:组件2,text:组件3}
 55 |    <router-view></router-view> //将渲染组件1 
 56 |    <router-view  name="Hello"></router-view> //将渲染组件2   
 57 |    <router-view  name="Text"></router-view>   //将渲染组件3
 58 | */
 59 | const router = new VueRouter({
 60 |   routes: [
 61 |     {
 62 |       path: '/',
 63 |       name:"Hello",
 64 |       components: {
 65 |         default: componentsDefault,
 66 |         Hello: componentsHello,
 67 |         Text: componentsText
 68 |       },
 69 |       redirect: '/Hello',  // { name: 'Hello' } || to => {// 方法接收 目标路由 作为参数// return 重定向的 字符串路径/路径对}
 70 |       alias: '/Hello',  / 的别名是 /Hello，意味着，当用户访问 /Hello 时，URL 会保持为 /Hello，但是路由匹配则为 /，就像用户访问 / 一样。
 71 |       props: { default: true, Hello: false,Text:false },//参数解耦
 72 |       beforeEnter: (to, from, next) => {  //专属守卫
 73 |         // ...
 74 |       }
 75 |       meta: {//路由申明
 76 | 	      auth: true,
 77 | 	      keepAlive: true
 78 | 	  },
 79 |       children: []
 80 |       }
 81 |     }
 82 |   ]
 83 | })
 84 | 
 85 | 
 86 | 
 87 | 
 88 | router 方法
 89 | router.push(location, onComplete?, onAbort?)
 90 | router.replace(location, onComplete?, onAbort?)
 91 | router.go(n)
 92 | router.back()
 93 | router.forward()
 94 | router.addRoutes(routes: Array<RouteConfig>)      动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。
 95 | router.onReady(callback, [errorCallback]) 该方法把一个回调排队，在路由完成初始导航时调用，这意味着它可以解析所有的异步进入钩子和路由初始化相关联的异步组件
 96 | router.onError(callback)注册一个回调，该回调会在路由导航过程中出错时被调用。注意被调用的错误必须是下列情形中的一种：错误在一个路由守卫函数中被同步抛出；错误在一个路由守卫函数中通过调用 next(err) 的方式异步捕获并处理；渲染一个路由的过程中，需要尝试解析一个异步组件时发生错误。
 97 | 
 98 | 
 99 | 
100 | const router = new VueRouter({
101 |   routes: [...],
102 |   scrollBehavior (to, from, savedPosition) {
103 |     // `to` 和 `from` 都是路由对象
104 |     // return 期望滚动到哪个的位置
105 |       if (savedPosition) {
106 |          return savedPosition
107 | 	  } else {
108 | 	    return { x: 0, y: 0 }
109 | 	  }
110 | 
111 | 	  //异步滚动
112 | 	  return new Promise((resolve, reject) => {
113 | 	    setTimeout(() => {
114 | 	      resolve({ x: 0, y: 0 })
115 | 	    }, 500)
116 | 	  })
117 | 
118 | 	  if (to.hash) {
119 | 	    return {
120 | 	      selector: to.hash
121 | 	    }
122 | 	  }
123 |    },
124 | 
125 | })
126 | 
127 | 路由守卫
128 | router.beforeEach((to, from, next) => {
129 |   // `to` 和 `from` 都是路由对象
130 |   /* must call `next` */
131 |   next()
132 |   next(false)
133 |   next({ path: '/' })||next('/')
134 |   next(error)
135 | })
136 | 
137 | router.beforeResolve((to, from, next) => {
138 |   /* must call `next` */
139 | })
140 | router.afterEach((to, from) => {})
141 | 
142 | 
143 | 组件内部守卫
144 |   beforeRouteEnter(to, from, next) {
145 |     // 在渲染该组件的对应路由被 confirm 前调用
146 |     // 不！能！获取组件实例 `this`
147 |     // 因为当守卫执行前，组件实例还没被创建
148 |     next(vm => {
149 |       // 通过 `vm` 访问组件实例
150 |     })
151 |   },
152 |   beforeRouteUpdate(to, from, next) {
153 |     // 在当前路由改变，但是该组件被复用时调用
154 |     // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
155 |     // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
156 |     // 可以访问组件实例 `this`
157 |     // just use `this`
158 |     next()
159 |   },
160 |   beforeRouteLeave(to, from, next) {
161 |     // 导航离开该组件的对应路由时调用
162 |     // 可以访问组件实例 `this`
163 |     const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
164 |     if (answer) {
165 |       next()
166 |     } else {
167 |       next(false)
168 |     }
169 |   }
170 | 
171 | 
172 | 
173 | 动态过渡
174 | <!-- 使用动态的 transition name -->
175 | <transition :name="transitionName">
176 |   <router-view></router-view>
177 | </transition>
178 | 
179 | 
180 | 
181 | 
182 | 完整的导航解析流程
183 | 导航被触发。
184 | 在失活的组件里调用离开守卫。
185 | 调用全局的 beforeEach 守卫。
186 | 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
187 | 在路由配置里调用 beforeEnter。
188 | 解析异步路由组件。
189 | 在被激活的组件里调用 beforeRouteEnter。
190 | 调用全局的 beforeResolve 守卫 (2.5+)。
191 | 导航被确认。
192 | 调用全局的 afterEach 钩子。
193 | 触发 DOM 更新。
194 | 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
195 | 
196 | 
197 | 
198 | 生命周期钩子：必要的保持，不必要不要保持
199 | 在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子:activated 与 deactivated
200 | activated在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用
201 | deactivated：组件被停用(离开路由)时调用
202 | 注意：使用了keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁)，因为组件没被销毁，被缓存起来了。
203 | keep-alive的生命周期
204 | activated： 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
205 | deactivated:  页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated
206 | 
207 | 
208 | 
209 | 
210 | 我不想把查询条件和查询结果被缓存，那么我可以这样写：
211 | mounted: function() {
212 |      this.loaddata(1)
213 | },
214 | activated: function () {
215 |      this.productclass.name=""//查询条件
216 |      this.loaddata(1) //查询结果的方法
217 | }
218 | 新增属性：
219 | include 字符串或正则表达式，只有名称匹配的组件会被缓存
220 | exclude 字符串或正则表达式，任何名称匹配的组件都不会被缓存
221 | max 数字，最多可以缓存多少组件实例
222 | include和exclude支持三种方式来有条件的缓存路由：采用逗号分隔的字符串形式，正则形式，数组形式。
223 | 正则和数组形式，必须采用v-bind形式来使用
224 | 
225 | 缓存组件的使用方式：
226 |     <!-- 逗号分隔字符串 -->
227 |     <keep-alive include="a,b"><component :is="view"></component></keep-alive>  
228 |     <!-- 正则表达式 (使用 v-bind`) -->
229 |     <keep-alive :include="/a|b/"><component :is="view"></component></keep-alive>  
230 |     <!-- 数组 (使用 `v-bind`) -->
231 |     <keep-alive :include="['a', 'b']"><component :is="view"></component></keep-alive>
232 | 但更多场景中，我们会使用keep-alive来缓存路由：
233 | <keep-alive include='a'>
234 |     <router-view></router-view>
235 | </keep-alive>
236 | 注：当组件被exclude匹配，该组件将不会被缓存，不会调用activated 和 deactivated。
237 | 
238 | include和exclude的值一定是组件名（组件export default 里面的name）
239 | 
240 | 
241 | //以下是成对出现的
242 | <keep-alive >
243 |      <router-view v-if="$route.meta.keepAlive">
244 |          <!--这里是会被缓存的路由-->
245 |      </router-view>
246 |  </keep-alive>
247 |  <router-view v-if="!$route.meta.keepAlive">
248 |      <!--因为用的是v-if 所以下面还要创建一个未缓存的路由视图出口-->
249 |  </router-view>
250 | 
251 | 
252 | 
253 |  //router配置
254 |  new Router({
255 |    routes: [
256 |      {
257 |        path: '/',
258 |        name: 'home',
259 |        component: Home,
260 |        meta: {
261 |          keepAlive: true // 需要被缓存
262 |        }
263 |      },
264 |      {
265 |        path: '/edit',
266 |        name: 'edit',
267 |        component: Edit,
268 |        meta: {
269 |          keepAlive: false // 不需要被缓存
270 |        }
271 |      }
272 |    ]
273 |  })
274 | 
275 | 
276 | 路由生命周期执行顺序：
277 | 
278 | main.js
279 | import Vue from 'vue';
280 | // 实例化Vue对象并挂载
281 | new Vue({
282 |     router
283 | }).$mount('#app');
284 | 
285 | 
286 | mport Vue from 'vue';
287 | import VueRouter from 'vue-router';
288 | // Vue中插件必须use注册
289 | Vue.use(VueRouter);
290 |  
291 | // 路由配置项，此处是路由级钩子的定义
292 | const routes = [{
293 |         path: '/',
294 |         component: resolve => require(['./index.vue'], resolve),
295 |         keepAlive: true,
296 |     },
297 |     {
298 |         path: '/user/:userName',
299 |         keepAlive: true,
300 |         beforeEnter(to,from,next){
301 |             console.log('router beforeEnter');
302 |             next();
303 |         },
304 |         component: resolve => require(['./user.vue'], resolve),
305 |     }];
306 |  
307 | // 实例化路由对象
308 | const router = new VueRouter({
309 |     routes
310 | });
311 | // 全局钩子
312 | router.beforeEach((to,from,next)=>{
313 |     console.log('global beforeEach')
314 |     next();
315 | });
316 | router.beforeResolve((to,from,next)=>{
317 |     console.log('global beforeResolve')
318 |     next();
319 | });
320 | router.afterEach((to,from,next)=>{
321 |     console.log('global afterEach')
322 | });
323 | 
324 | user.vue
325 | <template>
326 |     <div>
327 |         <h1>{{ msg }}</h1>
328 |         <p>我是:{{userName}}</p>
329 |     </div>
330 | </template>
331 |  
332 | <script>
333 |     export default {
334 |         name: 'user',
335 |         data () {
336 |             return {
337 |                 msg: '这里是 User Page.',
338 |                 userName: '叶落'
339 |             };
340 |         },
341 |         methods: {},
342 |         mounted () {
343 |             var me = this;
344 |             me.userName = me.$route.params.userName;
345 |             console.log('user mounted.');
346 |         },
347 |         beforeRouteEnter (to, from, next) {
348 |             console.log('component beforeRouteEnter');
349 |             next();
350 |         },
351 |         beforeRouteUpdate (to, from, next) {
352 |             console.log('component beforeRouteUpdate');
353 |             next();
354 |         },
355 |         beforeRouteLeave(to,from,next){
356 |             console.log('component beforeRouteLeave');
357 |             next();
358 |         }
359 |     };
360 | </script>
361 | 
362 | 执行时机
363 | 由首页进入user页面：
364 | global beforeEach > router beforeEnter > component beforeRouteEnter > global beforeResolve > global afterEach > mounted
365 | 由user回到首页：
366 | component beforeRouteLeave => global beforeEach => global beforeResolve => global afterEach
367 | 排除beforeRouteUpdate，其余六个导航钩子的执行时机其实很好理解。大体按照leave、before、enter、resolve、after的顺序并全局优先的思路执行。beforeRouteUpdate的触发是在动态路由情形下，比如 path: '/user/:userName' 这条路由，当页面不变更只动态的改变参数userName时，beforeRouteUpdate便会触发。
368 | 总结：使用vue组件拼凑成整个应用，每个页面是独立的，路由依靠链接跳转，会刷新页面。使用vue-router则可以不刷新页面加载对应组件，hash和history模式模拟路径变化，不刷新页面。
369 | 
370 | 


--------------------------------------------------------------------------------
/src/components/Pagenation.vue:
--------------------------------------------------------------------------------
  1 | <!-- 这是一个分页组件，本demo仅且只提供了这一个组件案例，如果你已具备vue基础，相信不难看懂，为何这样写，为何向父组件传值放在watch里而不放在每一个methods里面，为何这里用的回调数据而不是prop数据-->
  2 | <template>
  3 |   <div class="pagination">
  4 |     <div class="fn-inline curpagedetail">
  5 |       共计
  6 |       <span class="fn-inline totals">{{ totals }}</span>
  7 |       条数据&nbsp;&nbsp;当前显示
  8 |       <span class="fn-inline curpagesize">{{ curpagetotals }}</span>
  9 |       条数据
 10 |     </div>
 11 |     <i
 12 |       class="fn-inline firstpage pagetoone"
 13 |       v-show="isshowpageone && isshowfirstorlastpage"
 14 |       @click="topagefirst"
 15 |     >
 16 |       首页
 17 |     </i>
 18 |     <i class="fn-inline prev pagetoone" v-show="isshowpageone" @click="goprevpage">上一页</i>
 19 |     <ul class="fn-inline pagebtngroup">
 20 |       <li v-for="(item, index) in pagebtn" :key="index" @click="pagebtnevent(index)" :class="item.isactive ? 'active fn-inline' : 'fn-inline'">
 21 |         {{ item.btn }}
 22 |       </li>
 23 |     </ul>
 24 |     <i class="fn-inline next pagetoone" v-show="isshowpageone" @click="gonextpage">下一页</i>
 25 |     <i
 26 |       class="fn-inline lastpage pagetoone"
 27 |       v-show="isshowpageone && isshowfirstorlastpage"
 28 |       @click="topagelast"
 29 |     >
 30 |       尾页
 31 |     </i>
 32 |     <span class="text fn-inline" v-show="isshowpageone">跳转到</span>
 33 |     <input type class="topage fn-inline" v-model="gopageval" name v-show="isshowpageone" />
 34 |     <button class="fn-inline go" @click="gopage" v-show="isshowpageone">确定</button>
 35 |     <div class="fn-inline pagesize" v-show="isshowpagesizeselect">
 36 |       <div class="select" @click="changepagesizep">
 37 |         <input class="pagesize" type name v-model="dompagesize" />
 38 |         <span class="fn-inline selecti">{{pagesizeeditstatus?"&#61655;":"&#61656;"}}</span>
 39 |       </div>
 40 |       <ul class="option" v-show="pagesizeeditstatus">
 41 |         <li v-for="(item, index) in pagesizelist" :key="index" @click="changepagesizes(index)">
 42 |           <span class="fn-inline">{{ item }}</span>
 43 |           <i class="fn-inline">条/页</i>
 44 |         </li>
 45 |       </ul>
 46 |     </div>
 47 |   </div>
 48 | </template>
 49 | <script>
 50 | export default {
 51 |   name: 'rule',
 52 |   props: ['pageinit', 'curpagetotal', 'pageconfig'], //这部分用来接收组件传递值，告诉组件这个值就是调用传的值，记得接收。
 53 |   data() {
 54 |     return {
 55 |       isshowtotal: true, //是否显示总条数
 56 |       isshowpagesize: true, //是否显示当前页的数据条数
 57 |       isshowpagesizeselect: true, //是否可以改变pagesize
 58 |       btncount: 7, //显示的btn数量
 59 |       isshowfirstorlastpage: true, //是否显示首页或尾页
 60 |       isshowgopage: true, //是否显示输入框
 61 |       pagesize: 10, //默认每页数据条数
 62 |       gopageval: '',
 63 |       isshowpageone: true,
 64 |       pagesizelist: [10, 20, 50, 100, 500],
 65 |       totals: this.total || 0,
 66 |       curpagetotals: this.curpagetotal || 0,
 67 |       curpage: 1,
 68 |       pagesizeeditstatus: false,
 69 |       pagebtn: [{
 70 |         btn: 1,
 71 |         isactive: true
 72 |       }]
 73 |     };
 74 |   },
 75 |   computed: {
 76 |     dompagesize() {
 77 |       return this.pagesize + '条/页';
 78 |     }
 79 |   },
 80 |   mounted() {
 81 |     if (this.pageconfig) {
 82 |       this.isshowtotal =
 83 |         this.pageconfig['isshowtotal'] == undefined || this.pageconfig['isshowtotal'] == '' ?
 84 |         this.isshowtotal :
 85 |         this.pageconfig['isshowtotal'];
 86 |       this.isshowpagesize =
 87 |         this.pageconfig['isshowpagesize'] == undefined ||
 88 |         this.pageconfig['isshowpagesize'] == '' ?
 89 |         this.isshowpagesize :
 90 |         this.pageconfig['isshowpagesize'];
 91 |       this.isshowpagesizeselect =
 92 |         this.pageconfig['isshowpagesizeselect'] == undefined ||
 93 |         this.pageconfig['isshowpagesizeselect'] == '' ?
 94 |         this.isshowpagesizeselect :
 95 |         this.pageconfig['isshowpagesizeselect'];
 96 |       this.btncount =
 97 |         this.pageconfig['btncount'] == undefined || this.pageconfig['btncount'] == '' ?
 98 |         this.btncount :
 99 |         this.pageconfig['btncount'];
100 |       this.isshowfirstorlastpage =
101 |         this.pageconfig['isshowfirstorlastpage'] == undefined ||
102 |         this.pageconfig['isshowfirstorlastpage'] == '' ?
103 |         this.isshowfirstorlastpage :
104 |         this.pageconfig['isshowfirstorlastpage'];
105 |       this.isshowgopage =
106 |         this.pageconfig['isshowgopage'] == undefined ||
107 |         this.pageconfig['isshowgopage'] == '' ?
108 |         this.isshowgopage :
109 |         this.pageconfig['isshowgopage'];
110 |       this.pagesize =
111 |         this.pageconfig['pagesize'] == undefined || this.pageconfig['pagesize'] == '' ?
112 |         this.pagesize :
113 |         this.pageconfig['pagesize'];
114 |     }
115 | 
116 |     if (Math.ceil(this.totals / this.pagesize) < 3) {
117 |       this.isshowpageone = false;
118 |     } else {
119 |       this.isshowpageone = true;
120 |     }
121 |     var self = this;
122 |     this.$emit('onchange', this.curpage, this.pagesize, function(curpagetotal, total, curpage) {
123 |       self.curpagetotals = curpagetotal;
124 |       self.totals = total;
125 |       self.pagebtn = self.getpagebtnarr(self.curpage, self.btncount, self.totals, self.pagesize);
126 |     });
127 | 
128 |   },
129 |   methods: {
130 |     getpagebtnarr(curpage, btncount, totals, pagesize) {
131 |       var startbtn = curpage < Math.floor(btncount / 2) ? 1 : curpage - Math.floor(btncount / 2);
132 |       startbtn = startbtn <= 0 ? +startbtn + 1 : startbtn;
133 |       var endbtn = +startbtn + btncount >= +Math.ceil(totals / pagesize) + 1 ?
134 |         +Math.ceil(totals / pagesize) + 1 :
135 |         +startbtn + btncount;
136 |       endbtn = endbtn <= startbtn ? +startbtn + 1 : endbtn;
137 |       startbtn = +startbtn + btncount > endbtn ? endbtn - btncount : startbtn;
138 |       if (Math.ceil(totals / pagesize) < btncount) {
139 |         startbtn = 1;
140 |         endbtn = Math.ceil(totals / pagesize) + 1;
141 |       }
142 |       var pagebtn = [];
143 |       for (var i = startbtn; i < endbtn; i++) {
144 |         if (i == curpage) {
145 |           pagebtn.push({
146 |             btn: i,
147 |             isactive: true
148 |           });
149 |         } else {
150 |           pagebtn.push({
151 |             btn: i,
152 |             isactive: false
153 |           });
154 |         }
155 |       }
156 |       return pagebtn;
157 |     },
158 |     changepagesizes(index) {
159 |       this.pagesize = this.pagesizelist[index];
160 |       this.pagesizeeditstatus = false;
161 |     },
162 |     changepagesizep() {
163 |       this.pagesizeeditstatus = !this.pagesizeeditstatus;
164 |     },
165 |     topagefirst() {
166 |       this.curpage = 1;
167 |     },
168 |     topagelast() {
169 |       this.curpage = Math.ceil(this.totals / this.pagesize);
170 |     },
171 |     goprevpage() {
172 |       this.curpage = parseInt(this.curpage <= 1 ? 1 : this.curpage - 1);
173 |     },
174 |     gonextpage() {
175 |       this.curpage = parseInt(
176 |         this.curpage >= Math.ceil(this.totals / this.pagesize) ?
177 |         this.curpage :
178 |         this.curpage + 1
179 |       );
180 |     },
181 |     pagebtnevent(index) {
182 |       this.curpage = parseInt(this.pagebtn[index]["btn"]);
183 |     },
184 |     gopage() {
185 |       var topageval = parseInt(this.gopageval);
186 |       if (
187 |         !(
188 |           isNaN(topageval) ||
189 |           topageval == '' ||
190 |           topageval == undefined ||
191 |           topageval < 1 ||
192 |           topageval > Math.ceil(this.totals / this.pagesize)
193 |         )
194 |       ) {
195 |         this.curpage = topageval;
196 |         this.gopageval = '';
197 |       } else {
198 |         this.gopageval = '';
199 |       }
200 |     }
201 |   },
202 |   watch: {
203 |     total: {
204 |       handler() {
205 |         self.totals = total;
206 |       },
207 |       deep: true,
208 |     },
209 |     curpagetotal: {
210 |       handler() {
211 |         self.curpagetotals = curpagetotal;
212 |       },
213 |       deep: true,
214 |     },
215 |     pagesize: {
216 |       handler() {
217 |         this.curpage = 1;
218 |         var self = this;
219 |         this.$emit('onchange', this.curpage, this.pagesize, function(curpagetotal, total, curpage) {
220 |           self.curpagetotals = curpagetotal;
221 |           self.totals = total
222 |           self.pagebtn = self.getpagebtnarr(self.curpage, self.btncount, self.totals, self.pagesize);
223 |         });
224 | 
225 |       },
226 |       deep: true,
227 |     },
228 |     curpage: {
229 |       handler() {
230 |         var self = this;
231 |         this.$emit('onchange', this.curpage, this.pagesize, function(curpagetotal, total, curpage) {
232 |           self.curpagetotals = curpagetotal;
233 |           self.totals = total
234 |           self.pagebtn = self.getpagebtnarr(self.curpage, self.btncount, self.totals, self.pagesize);
235 |         });
236 | 
237 |       },
238 |       deep: true,
239 |     },
240 |     curpagetotals: { //深度监听，告诉vue,这个值或内部属性任意一个的值改变了，你立马给我渲染试图。
241 |       handler() {},
242 |       deep: true,
243 |     },
244 |     totals: {
245 |       handler() {
246 |         this.pagebtn = this.getpagebtnarr(this.curpage, this.btncount, this.totals, this.pagesize);
247 |         if (Math.ceil(this.totals / this.pagesize) < 3) {
248 |           this.isshowpageone = false;
249 |         } else {
250 |           this.isshowpageone = true;
251 |         }
252 |       },
253 |       deep: true,
254 |     },
255 |     pageinit: {
256 |       handler() {
257 |         if (this.curpage == 1) {
258 |           var self = this;
259 |           this.$emit('onchange', this.curpage, this.pagesize, function(curpagetotal, total, curpage) {
260 |             self.curpagetotals = curpagetotal;
261 |             self.totals = total;
262 |             self.pagebtn = self.getpagebtnarr(self.curpage, self.btncount, self.totals, self.pagesize);
263 |           });
264 | 
265 |         } else {
266 |           this.curpage = 1
267 |         }
268 |       },
269 |       deep: true,
270 |     }
271 |   }
272 | };
273 | 
274 | </script>
275 | <style>
276 | .fn-inline {
277 |   display: inline-block;
278 |   vertical-align: middle;
279 |   font-style: normal;
280 | }
281 | 
282 | .pagination {
283 |   text-align: center;
284 | }
285 | 
286 | .pagination .curpagedetail {
287 |   font-size: 0.4rem;
288 |   color: #666;
289 |   margin-right: 0.25rem;
290 | }
291 | 
292 | .pagination .pagetoone {
293 |   margin: 0 0.25rem;
294 |   height: 1.05rem;
295 |   width: 2.0rem;
296 |   font-size: 0.4rem;
297 |   color: #fff;
298 |   background: #41b7f9;
299 |   outline: none;
300 |   border: none;
301 |   cursor: pointer;
302 |   line-height: 1.0rem;
303 |   text-align: center;
304 | }
305 | 
306 | .pagination .text {
307 |   color: #41b7f9;
308 |   font-size: 0.4rem;
309 | }
310 | 
311 | .pagination .pagebtngroup {
312 |   margin: 0 0.25rem;
313 | }
314 | 
315 | .pagination .pagebtngroup li {
316 |   line-height: 0.95rem;
317 |   width: 1.125rem;
318 |   border: solid 1px #41b7f9;
319 |   color: #41b7f9;
320 |   font-size: 0.4rem;
321 |   text-align: center;
322 |   margin-right: -1px;
323 |   cursor: pointer;
324 | }
325 | 
326 | .pagination .pagebtngroup li.active {
327 |   background: #41b7f9;
328 |   color: #fff;
329 | }
330 | 
331 | .pagination .topage {
332 |   margin: 0 0.25rem;
333 |   height: 1rem;
334 |   width: 1.2rem;
335 |   padding: 0.25rem;
336 |   font-size: 0.4rem;
337 |   color: #41b7f9;
338 |   background: transparent;
339 |   outline: none;
340 |   border: solid 1px #41b7f9;
341 |   cursor: pointer;
342 |   line-height: 1.0rem;
343 |   text-align: center;
344 | }
345 | 
346 | .pagination button.go {
347 |   margin: 0 0.25rem 0 0;
348 |   height: 1rem;
349 |   width: 1.625rem;
350 |   border-radius: 0.075rem;
351 |   font-size: 0.4rem;
352 |   color: #fff;
353 |   background: #41b7f9;
354 |   outline: none;
355 |   border: none;
356 |   cursor: pointer;
357 |   line-height: 1.0rem;
358 |   text-align: center;
359 | }
360 | 
361 | .pagination .pagesize {
362 |   position: relative;
363 |   cursor: pointer;
364 | }
365 | 
366 | .pagination .pagesize .select {
367 |   width: 3.0rem;
368 |   line-height: 1.0rem;
369 |   border: solid 1px #41b7f9;
370 |   height: 1rem;
371 | }
372 | 
373 | .pagination .pagesize .select input {
374 |   border: none;
375 |   background: none;
376 |   outline: none;
377 |   width: 65%;
378 |   text-align: center;
379 |   font-size: 0.4rem;
380 |   color: #41b7f9;
381 |   line-height: 1rem;
382 | }
383 | 
384 | .pagination .pagesize .select span.selecti {
385 |   width: 15%;
386 |   text-align: center;
387 | }
388 | 
389 | .pagination .pagesize .select span.selecti {
390 |   height: 0.45rem;
391 |   width: 0.35rem;
392 |   font-size: 0.4rem;
393 |   color: #41b7f9;
394 |   font: normal normal normal 14px/1 FontAwesome;
395 | }
396 | 
397 | .pagination .pagesize .option {
398 |   position: absolute;
399 |   width: 100%;
400 |   bottom: 0.95rem;
401 | }
402 | 
403 | .pagination .pagesize .option li {
404 |   line-height: 0.75rem;
405 |   border: solid 1px #41b7f9;
406 |   color: #41b7f9;
407 |   font-size: 0.4rem;
408 |   padding: 0 0.25rem;
409 |   text-align: left;
410 |   margin: -1px 0 0 0 !important;
411 |   display: block;
412 | }
413 | 
414 | </style>
415 | <!-- 
416 |   调用：
417 |   首先懒加载引入并组册组件
418 |   <Pagenationuser @onchange="pageevent" :pageinit="pageinit" :curpagetotal="0" :total="0"></Pagenationuser>
419 |   methods:{
420 |   initpage() {
421 |       this.pageinit = !this.pageinit;
422 |       // 从新初始化分页，会从第一页开始发起请求，
423 |     },
424 |     pageevent(curpage, pagesize, callback) {
425 |       console.log(curpage, pagesize);
426 |       //通过curpage, pagesize以及其他参数querydata;
427 |       // callback(当前页数据条数, 数据总条数,当前页码);  当前页数据条数, 数据总条数为必要参数
428 |       //callback(0, 0);
429 |       callback(10, 100);
430 |     },
431 |   }
432 |  -->
433 | 


--------------------------------------------------------------------------------
/src/util/utils/valid.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * 校验
  3 |  */
  4 | 
  5 | import Vue from 'vue'
  6 | import Validator from 'vue-validator'
  7 | 
  8 | Vue.use(Validator)
  9 | 
 10 | const validataconfig = {
 11 |   isEmpty: function(str) { /*是否为空*/
 12 |     return !/0+/.test(str) && !str;
 13 |   },
 14 |   isNumber: function(str) { /*是否为数字*/
 15 |     return /^[0-9]*$/.test(str);
 16 |   },
 17 |   isZipCode: function(str) { /*是否为邮编*/
 18 |     return /^[0-9]{6}$/.test(str);
 19 |   },
 20 |   isIdCardNo: function(str) { /*是否为身份证好*/
 21 |     // return /^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\w)$/.test(str);
 22 |     return /^(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)$/.test(
 23 |       str)
 24 |   },
 25 |   isMobile: function(str) { /*是否为手机号码*/
 26 |     return str.length == 11 && /^1[3|4|5|8|7][0-9]\d{4,8}$/.test(str);
 27 |   },
 28 |   isQQ: function(str) { /*是否为QQ号码*/
 29 |     return /^\s*[.0-9]{5,11}\s*$/.test(str);
 30 |   },
 31 |   isEmail: function(str) { /*是否为邮箱*/
 32 |     return /\w@\w*\.\w/.test(str);
 33 |   },
 34 |   isBackId: (value) => { /*银行卡号合法16-19位*/
 35 |     return /^([1-9]{1})(\d{15}|\d{18})$/.test(value)
 36 |   },
 37 |   isUrl: function(str) { /*是否为网页url*/
 38 |     return /(https?|ftp|mms):\/\/([A-z0-9]+[_\-]?[A-z0-9]+\.)*[A-z0-9]+\-?[A-z0-9](\/.*)*\/?/.test(str);
 39 |   },
 40 |   isPhone: function(str) { /*是否为固定电话*/
 41 |     return /^(0[0-9]{2,3}-?)?([2-9][0-9]{6,7})+(-?[0-9]{1,4})?$/.test(str);
 42 |   },
 43 |   isTel: function(str) { /*是否为手机号码或固定电话*/
 44 |     var _length = str.length,
 45 |       _mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/,
 46 |       _tel = /^(0[0-9]{2,3}-?)?([2-9][0-9]{6,7})+(-?[0-9]{1,4})?$/;
 47 |     return (_tel.test(str) && _length <= 12) || (_mobile.test(str) && _length == 11);
 48 |   },
 49 |   isIp: function(str) { /*是否为ip地址*/
 50 |     return /^(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.)(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.){2}([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))$/.test(str);
 51 |   },
 52 |   cnLength: function(str, params) { /*验证字符串长度是否在params([smax,smin])范围内*/
 53 |     var _length = str.length,
 54 |       _totalLen = _length,
 55 |       smin = 0,
 56 |       smax = 0;
 57 |     if (params instanceof Array) {
 58 |       switch (params.length) {
 59 |         case 0:
 60 |           return false;
 61 |           break;
 62 |         case 1:
 63 |           smax = parseInt(params[0]);
 64 |           if (smax == 0 || isNaN(smax)) {
 65 |             return false;
 66 |           }
 67 |           break;
 68 |         default:
 69 |           smin = parseInt(params[0]);
 70 |           smax = parseInt(params[1]);
 71 |           if (smax == 0 || isNaN(smax) || isNaN(smin)) {
 72 |             return false;
 73 |           }
 74 |       }
 75 |     } else {
 76 |       return false;
 77 |     }
 78 |     for (var i = 0; i < _length; i++) {
 79 |       if (str.charCodeAt(i) > 127) {
 80 |         _totalLen += 2;
 81 |       }
 82 |     }
 83 |     return _totalLen >= smin && _totalLen <= smax;
 84 |   },
 85 |   chineseMax: function(str, params) { /*验证字符串长度是否在0-params范围内*/
 86 |     var _length = str.length,
 87 |       smin = 0;
 88 |     var smax = parseInt(params);
 89 |     return _length >= smin && _length <= smax;;
 90 |   },
 91 |   charMin: function(str, params) { /*验证字符串的长度是否大于params*/
 92 |     return str.length >= parseInt(params);
 93 |   },
 94 |   cnMax: function(str, params) { /*验证字符数字是否小于params*/
 95 |     return Number(str) <= Number(params);
 96 |   },
 97 |   cnMin: function(str, params) { /*验证字符数字是否大于params*/
 98 |     return Number(str) > Number(params);
 99 |   },
100 |   userName: function(str) { /*只允许输入中英文字符，数字和下划线*/
101 |     return /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(str);
102 |   },
103 |   userNameExtend: function(str) { /*只允许输入中英文字符，数字和下划线,括号  以及 ·.、*/
104 |     return /^[a-zA-Z0-9_\(\)\{\}·.、\[\]\（\）\【\】\u4e00-\u9fa5]+$/.test(str);
105 |   },
106 |   chrnum: function(str) { /*字母和数字的验证*/
107 |     return /^([a-zA-Z0-9]+)$/.test(str);
108 |   },
109 |   decimal2: function(str) { /*是否为两位小数*/
110 |     return /^-?\d+\.?\d{0,2}$/.test(str);
111 |   },
112 |   decimal_num: function(str) { /*是否为数字和小数*/
113 |     return /(^d*.?d*[0-9]+d*$)|(^[0-9]+d*.d*$)/.test(str);
114 |   },
115 |   chinese: function(str) { /*是否为中文*/
116 |     return /^[\u4e00-\u9fa5]+$/.test(str);
117 |   },
118 |   userPassword: function(str) { /*密码的验证a-zA-Z0-9 5-17位*/
119 |     return /^[a-zA-Z]\w{5,17}$/.test(str);
120 |   },
121 |   isDefaultPassword: function(str, params) { /*是否默认密码params(["123456",'111111','111222'])*/
122 |     var isd = false;
123 |     for (var strp in params) {
124 |       if (str.toString() == params[strp]) {
125 |         isd = true;
126 |       }
127 |     }
128 |     return isd;
129 |   },
130 |   isSimplePassword: function(str) { /*是否简单密码*/
131 |     function isASC(test) {
132 |       for (var i = 1; i < test.length; i++) {
133 |         if (test.charCodeAt(i) != (test.charCodeAt(i - 1) + 1)) {
134 |           return false;
135 |         }
136 |       }
137 |       return true;
138 |     }
139 | 
140 |     function isDESC(test) {
141 |       for (var i = 1; i < test.length; i++) {
142 |         if (test.charCodeAt(i) != (test.charCodeAt(i - 1) - 1)) {
143 |           return false;
144 |         }
145 |       }
146 |       return true;
147 |     }
148 | 
149 |     function isSame(test) {
150 |       for (var i = 1; i < test.length; i++) {
151 |         if (test.charCodeAt(i) != (test.charCodeAt(i - 1))) {
152 |           return false;
153 |         }
154 |       }
155 |       return true;
156 |     }
157 |     return !(isASC(str) || isDESC(str) || isSame(str));
158 |   },
159 |   identifier: function(str) { /*是否是编号*/
160 |     return /^[a-zA-Z0-9_\u4e00-\u9fa5\-]+$/.test(str);
161 |   },
162 |   isPic: function(str) { /*是否是图片*/
163 |     return /.jpg|.png|.gif|.jpeg$/.test(str.toLowerCase());
164 |   },
165 |   isInteger: function(str) { /*是否是正整数*/
166 |     return /^[1-9]+[0-9]*$/.test(str);
167 |   },
168 |   isPInt: function(str) { /*校验正整数*/
169 |     return /^[0-9]*[0-9][0-9]*$/.test(str);
170 |   },
171 |   onlyEn_Num: function(str) { /*只允许输入英文字符，数字和下划线*/
172 |     return /^\w+$/.test(str);
173 |   },
174 |   onlyCn_En_Num: function(str) { /*只允许输入中英文字符，数字和下划线*/
175 |     return /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(str);
176 |   },
177 |   onlyCn_En_Num_Point: function(str) { /*只能包括中英文字母、数字、下划线和中文标点符号*/
178 |     return /^[a-zA-Z0-9_\u4e00-\u9fa5，。“”；！？@、]+$/.test(str);
179 |   },
180 |   onlyCn_En_Num_Point_zhong_ying: function(str) { /*只能包括中英文字母、数字、下划线和中英文标点符号*/
181 |     return /^[a-zA-Z0-9_\u4e00-\u9fa5，。“”；！？@、,.?!"";]+$/.test(str);
182 |   },
183 |   onlyCn_En_Num_Point_extend: function(str) { /*只能包括中英文字母、数字、下划线和中文标点符号及部分特殊符号*/
184 |     return /^[a-zA-Z0-9_\u4e00-\u9fa5，。“”；！：？@、\(\)\{\}·.:\[\]\（\）\【\】]+$/.test(str);
185 |   },
186 |   onlyCn_En_Num_Point_return: function(str) { /*只能包括中英文字母、数字、下划线和中英文标点符号、空格、回车、括号类符号*/
187 |     return /^[a-zA-Z0-9_\u4e00-\u9fa5，,。.“”；"";：·:！!？?@、.\(\)\（\）\[\]\{\}\【\】\n\s]+$/.test(str);
188 |   },
189 |   onlyCn_En_Num_bufen_return: function(str) { /*只能包括中英文字母、数字、下划线、横杠和中英文标点符号、空格、回车、括号类符号*/
190 |     return /^[a-zA-Z0-9_\u4e00-\u9fa5，,。.“”；‘’''"";：:！!？?@、.<>\-《》\(\)\（\）\[\]\{\}\【\】\n\s]+$/.test(str);
191 |   },
192 |   onlyCn_En_Num_Point_all_extend: function(str) { /*只能包括中英文字母、数字、下划线、中文标点符号、空格和回车及部分特殊符号*/
193 |     return /^[a-zA-Z0-9_\u4e00-\u9fa5，。“”；：！？@、\(\)\{\}·.\[\]\（\）\【\】\n\s]+$/.test(str);
194 |   },
195 |   onlyNum_Point: function(str) { /*只能是数字、小数点后两位*/
196 |     return /^(\d)*(\.(\d){1,2})?$/.test(str);
197 |   },
198 |   onlyNum_Point3: function(str) { /*只能是数字、小数点后两位*/
199 |     return /^(\d)*(\.(\d){0,3})?$/.test(str);
200 |   },
201 |   doubles7: function(str) { /*是否小于9999999*/
202 |     var par = parseInt(str)
203 |     return par <= 9999999;
204 |   },
205 |   doubles5: function(str) { /*是否小于999*/
206 |     var par = parseInt(str)
207 |     return par <= 999;
208 |   },
209 |   onlyNum_Point4: function(str) { /*是否数字、小数点后四位*/
210 |     return /^(\d)*(\.(\d){0,4})?$/.test(str);
211 |   },
212 | 
213 |   onlyNum_Point7: function(str) { /*是否数字、小数点后七位*/
214 |     return /^(\d)*(\.(\d){0,7})?$/.test(str);
215 |   },
216 |   socode: function(str) { /*是否统一社会信用代码*/
217 |     return /^[0-9A-Z]+$/.test(str);
218 |   },
219 |   onlycar_number_Eng: function(str) { /*是否为车牌号*/
220 |     return /(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[挂学警军港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9挂学警军港澳]{1}$)|(^[A-Z]{2}[\u4E00-\u9FA5]{1}[A-Z0-9]{4}[A-Z0-9挂学警军港澳]{1}$)/.test(str);
221 |   },
222 |   onlyChNun_Eng: function(str) { /*是否为英文字母、数字和中文*/
223 |     //return /^[\u4e00-\u9fa5]{1}[A-Z]{1}[A-Z_0-9]{5}$/.test(str);
224 |     return /^(([\u4e00-\u9fa5]|[a-zA-Z0-9])+)$/.test(str);
225 |   },
226 |   specialChar: function(str) { /*排除特殊字符验证 (可以输入加号|斜杠|顿号|括号 中英文)*/
227 |     return new RegExp(
228 |       "[`~!@#$^&*=|':;',.<>?~！@#￥……&*‘；：”“'。，？%———— ]"
229 |     ).test(str)
230 |   },
231 |   isChineseCharacters: function(value) { /*排除特殊字符验证*/
232 |     return new RegExp(
233 |       "[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）|{}【】‘；：”“'。，、？%+———— ]"
234 |     ).test(value)
235 |   },
236 |   postSal5: function(value) { /*工资只能为5位数以内*/
237 |     return value !== "" && value !== null && value !== undefined && !/^(0|[1-9]\d{0,4})$/.test(value)
238 |   },
239 |   nonnegativeInteger: function(value) { /*1~4）位非负整数验证*/
240 |     return /^\d{1,4}$/.test(value)
241 |   },
242 |   isNumber5: function(value) { /*5位数字验证*/
243 |     return value !== "" && value !== null && value !== undefined && !/^\d{5}$/.test(value)
244 |   },
245 |   Number0To100: function(value) { /*(0~100)的数字*/
246 |     return /^100$|^(\d|[1-9]\d)(\.\d{1,2})*$/.test(value)
247 |   },
248 |   Numberint0To100: function(value) { /*(0~100)的整数*/
249 |     return value !== "" && value !== null && value !== undefined && !/^([1-4][0-9]{2}|100|[1-9]?[0-9])$/.test(value)
250 |   },
251 |   isNumber8: function(value) { /*数字0~8位可为空，如果输入多位，第一位不能为0(可保留2位小数)*/
252 |     return value != "" && !/^(0|[1-9]\d{0,7})(\.\d{1,2})?$/.test(value)
253 |   },
254 |   isPositive: function(value) { /*输入必须为正数*/
255 |     return /^[0-9]+([.]{1}[0-9]{1,2})?$/.test(value)
256 |   },
257 | 
258 |   checkTax: function(value) { /* 验证税号,15或者17或者18或者20位字母、数字组成*/
259 |     return /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/.test(value)
260 |   },
261 |   isUserCode: function(value) { /* 人员编号合法验证  字母和数字的组合  最长10位  /^[0-9]{8,10}$/*/
262 |     return value !== "" || value !== null || value !== undefined && /^([a-z]|[A-Z]|[0-9]){1,10}$/.test(value)
263 |   },
264 |   isComAccount: function(value) { /*账户合法验证*/
265 |     return /^[0-9]{15}$/.test(value)
266 | 
267 |   },
268 |   isInsurBaseRule: function(value) { /*险种基数为1位到8位数字，小数点后最多两位*/
269 |     return /^(0|[1-9]\d{0,7})(\.\d{1,2})?$/.test(value);
270 | 
271 |   },
272 |   isPercent: function(value) { /*百分数，最多两位小数点*/
273 |     return !/^(100|(([1-9]\d|\d)(\.\d{1,2})?))$/.test(value)
274 |   },
275 |   //错误信息
276 | }
277 | const validataeMsg = {
278 |   "notEmpty": "不能为空！",
279 |   "isNumber": "只能输入数字！",
280 |   "isZipCode": "邮政编码不正确!",
281 |   "isIdCardNo": "身份证号码格式不正确!",
282 |   "isMobile": "手机号码格式错啦!",
283 |   "isPhone": "电话号码格式错啦!",
284 |   "isTel": "联系电话格式错啦!",
285 |   "isQQ": "QQ号码格式错啦！",
286 |   "isEmail": "email格式错啦！",
287 |   "isBackId": "请正确填写您的银行卡号!",
288 |   "isUrl": "网址格式错啦！",
289 |   "isIp": "ip地址格式错啦!",
290 |   "cnLength": "长度要介于{0}到{1}之间!",
291 |   "cnLength": "您可输入{0}到{1}个字符，中文占3个字符！",
292 |   "chineseMax": "您最多能输入{0}个字!",
293 |   "cnMax": "请输入介于0到{0}之间的数字!",
294 |   "cnMin": "请输入大于{0}的数字!",
295 |   "userName": "只能包括中英文、数字和下划线!",
296 |   "chrnum": "只能输入数字和字母(字符A-Z, a-z, 0-9)！",
297 |   "chinese": "只能输入中文！",
298 |   "userPassword": "以字母开头，长度在6-18之间，只能包含字符、数字或下划线！",
299 |   "isDefaultPassword": "登录密码不能为默认密码！",
300 |   "isSimplePassword": "登录密码太简单！",
301 |   "isPic": "只能是jpg、png、gif、jpeg格式的图片！",
302 |   "isPInt": "只能输入非负整数！",
303 |   "charMin": "至少15位",
304 |   "isInteger": "只能输入正整数！",
305 |   "onlyEn_Num": "只能输入英文，数字和下划线!",
306 |   "onlyCn_En_Num": "只能输入中英文，数字和下划线!",
307 |   "onlyCn_En_Num_Point": "只能输入中英文，数字、下划线和中文标点符号!",
308 |   "onlyCn_En_Num_Point_zhong_ying": "只能输入中英文，数字、下划线和标点符号!",
309 |   "onlyCn_En_Num_Point_extend": "只能输入中英文，数字、下划线和中文标点符号及部分特殊符号!",
310 |   "onlyCn_En_Num_Point_all_extend": "只能包括中英文、数字、下划线、中文标点符号、空格和回车及部分特殊符号",
311 |   "onlyCn_En_Num_Point_return": "只能输入中英文，数字、下划线、中英文标点符号、空格、换行及括号类符号!",
312 |   "orgTreeValid": "您还没有选择用户！",
313 |   "equalTo": "请输入相同的值！",
314 |   "decimal2": "请输入数字，小数点后保留2位！",
315 |   "equalTo": "请输入相同的值！",
316 |   "onlyNum_Point": "只能输入自然数，小数点后两位！",
317 |   "onlyNum_Point3": "只能输入自然数，最多小数点后三位！",
318 |   "onlyNum_Point4": "只能输入自然数，最多小数点后四位！",
319 |   "onlyNum_Point7": "只能输入自然数，最多小数点后七位！",
320 |   "onlycar_number_Eng": "请输入正确的车牌号！",
321 |   "onlyCn_En_Num_bufen_return": "只能输入中英文字符、中英文标点符号、空格以及下划线和中线",
322 |   //"decimal_num":"请输入数字或小数"
323 |   "onlyChNun_Eng": "只能输入英文字母、数字和中文！",
324 |   "socode": "统一社会信用代码!",
325 |   "doubles7": "您输入的值的整数部分不能大于9999999，请重新输入！",
326 |   "doubles5": "您输入的值的整数部分不能大于999，请重新输入！",
327 |   // 排除特殊字符验证 项目名称可以输入+号 (可以输入加号|斜杠|顿号|括号 中英文)
328 |   "specialChar": "内容不能出现特殊字符!",
329 |   "postSal5": "薪资最多为5位整数",
330 |   "isChineseCharacters": "内容不能出现特殊字符!",
331 |   "nonnegativeInteger": "输入内容必须为(1~4)位非负整数！",
332 |   "isNumber5": "只能输入5位数字",
333 |   "Number0To100": "只能输入(0~100)的数字（可保留到2位小数)",
334 |   "Numberint0To100": "只能输入(0~100)的整数",
335 |   "isNumber8": "最多8位整数(可保留2位小数)",
336 |   "isPositive": "输入必须为正数",
337 |   "checkTax": "请输入正确的税号",
338 |   "isUserCode": "数字、字母均可,最长10位!",
339 |   "isComAccount": "请输入正确的账号!",
340 |   "isInsurBaseRule": "请输入合法的基数!"，
341 |   "isPercent": "只能输入百分数"
342 | }
343 | 
344 | 
345 | /**
346 | vue-validato官方提供的api如下
347 | input[type="text"]
348 | input[type="radio"]
349 | input[type="checkbox"]
350 | input[type="number"]
351 | input[type="password"]
352 | input[type="email"]
353 | input[type="tel"]
354 | input[type="url"]
355 | select
356 | textarea
357 | 但是以上的不一定满足我们的需求，这时就需要用到另一个全局api，用于注册和获取全局验证器。 
358 | */
359 | 
360 | //自定义验证器：Vue.validator( id, [definition] )
361 | //例如添加一个简单的手机号验证 
362 | 
363 | Vue.validator('phone', function(val) {
364 |   return validataconfig.isPhone(val)
365 | });
366 | //添加一个密码验证
367 | //匹配6-20位的任何字类字符，包括下划线。与“[A-Za-z0-9_]”等效。
368 | Vue.validator('passw', function(val) {
369 |   return /^(\w){6,20}$/.test(val)
370 | });
371 | /*
372 | 验证器语法
373 | <validator name="validation">
374 |     <input type="text" v-model='comment' id='comment' v-validate:comment="{ minlength: 3, maxlength: 15 }">
375 |     <div>
376 |       <span v-show="$validation.comment.minlength">不得少于3个字符</span>
377 |       <span v-show="$validation.comment.maxlength">不得大于15个字符</span>
378 |     </div>
379 | </validator>
380 | 
381 | Terminal 指令问题
382 | 
383 | <validator name="test_validator">
384 |     <!-- @invalid：valid的逆 ，表示验证不通过 -->
385 |     <input  @invalid="notphone" @valid="isphone" type="password" v-model='phone'  v-validate:phone="['phone']"  detect-change="off" initial='off' placeholder='请输入密码'>
386 |     <input  @invalid="passwInvalid" @valid="passwok" type="password" v-model='password' id='password' v-validate:password="['passw']"  detect-change="off" initial='off' placeholder='请输入密码'>
387 | </validator>
388 | 
389 | //导入validation.js  此处的validation.js就是上文中自定义验证器的内容
390 | import validator from '../validator/validation';
391 | 
392 | export default{    
393 |     data(){
394 |         return{
395 |             phone:'',//电话号码
396 |         }
397 |     },
398 |     methods:{
399 |         //手机号验证失败时执行的方法
400 |         notphone(){
401 |             //设置提示信息内容
402 |             alert('手机不正确');
403 |         },
404 |         //密码验证成功时执行的方法
405 |         isphone(){
406 |             //user option
407 |         }, 
408 |         passwInvalid(){
409 |             alert('只能输入6-20个字母、数字、下划线');
410 |         },
411 |         passwok(){
412 |             //alert('验证码符合规范')
413 |         }
414 |    } 
415 | }
416 | 
417 | 默认情况下，vue-validator 会根据 validator 和 v-validate 指令自动进行验证。然而有时候我们需要关闭自动验证，在有需要时手动触发验证。如果你不需要自动验证，可以通过 initial 属性或 v-validate 验证规则来关闭自动验证。如下：
418 | 
419 | <validator name="validation">
420 |      <input type="text" v-model='comment' id='comment' v-validate:comment="{ minlength: 3, maxlength: 15 }"  detect-change="off" initial='off'>
421 |      <div>
422 |        <span v-show="$validation.comment.minlength">不得少于3个字符</span>
423 |        <span v-show="$validation.comment.maxlength">不得大于15个字符</span>
424 |      </div>
425 | </validator>
426 | */
427 | 


--------------------------------------------------------------------------------
/src/framePage/components/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="wrapper">
  4 |       <div class="wrapper-text">{{language=='Chinese'?"&lt;广告&gt;":"&lt;advertising&gt;"}}</div>
  5 |     </div>
  6 |     <nav class="nav">
  7 |       <div class="nav-con">
  8 |         <ul>
  9 |           <li v-for="(item,index) in manulist" v-if="item.defalut" :class="item.iscurselect?'active':''" @click="onNavClick(index,'web')">
 10 |             <!-- <div v-if="item.module" :href="type=='total'?('./'+item.module+'.html'):('../'+item.module+'/index.html')" target="container"> -->
 11 |             <div class="navbtn" v-if="item.module" target="container">
 12 |               <span v-if="item.showtype=='text'">{{language=='Chinese'?item.cnname:item.name}}</span>
 13 |               <img v-if="item.showtype=='ico'" :src="item.ico">
 14 |             </div>
 15 |             <div class="navbtn" v-if="!item.module" target="container">
 16 |               <span v-if="item.showtype=='text'">{{language=='Chinese'?item.cnname:item.name}}</span>
 17 |               <img v-if="item.showtype=='ico'" :src="item.ico">
 18 |             </div>
 19 |           </li>
 20 |         </ul>
 21 |         <transition name="slide-fade">
 22 |           <aside v-show="isshowaccount" :language="language" :theme="theme" class="account">
 23 |             <Account @accountClick="onAccountClick"></Account>
 24 |           </aside>
 25 |         </transition>
 26 |       </div>
 27 |     </nav>
 28 |     <nav class="navsmall">
 29 |       <ul class="nav-con">
 30 |         <li v-for="(item,index) in manulist2" :class="item.iscurselect?'active':''" @click="onNavPhoneClick(index,'phonenav')">
 31 |           <!-- <div v-if="item.module" :href="type=='total'?('./'+item.module+'.html'):('../'+item.module+'/index.html')" target="container"> -->
 32 |           <div class="navbtn" target="container">
 33 |             <span v-if="item.showtype=='text'">{{language=='Chinese'?item.cnname:item.name}}</span>
 34 |             <img v-if="item.showtype=='ico'" :src="item.ico">
 35 |           </div>
 36 |         </li>
 37 |       </ul>
 38 |       <transition name="slide-fade">
 39 |         <aside :language="language" :theme="theme" v-if="isshowaccount" class="account">
 40 |           <Account @accountClick="onAccountClick"></Account>
 41 |         </aside>
 42 |       </transition>
 43 |       <transition name="slide-fade">
 44 |         <ul class="navsmall-nav" v-show="isshowponenavlist">
 45 |           <li v-for="(item,index) in manulist" v-if="item.small" :class="item.iscurselect?'active':''" @click="onNavClick(index,'phone')">
 46 |             <!-- <div v-if="item.module" :href="type=='total'?('./'+item.module+'.html'):('../'+item.module+'/index.html')" target="container"> -->
 47 |             <div class="navbtn" v-if="item.module" target="container">
 48 |               <span v-if="item.showtype=='text'">{{language=='Chinese'?item.cnname:item.name}}</span>
 49 |               <img v-if="item.showtype=='ico'" :src="item.ico">
 50 |             </div>
 51 |             <div class="navbtn" v-if="!item.module" target="container">
 52 |               <span v-if="item.showtype=='text'">{{language=='Chinese'?item.cnname:item.name}}</span>
 53 |               <img v-if="item.showtype=='ico'" :src="item.ico">
 54 |             </div>
 55 |           </li>
 56 |         </ul>
 57 |       </transition>
 58 |     </nav>
 59 |     <div class="module-container fn-inline" :style="{height:modulecontainerheight}">
 60 |       <iframe width="100%" height="100%" :src="iframe" name="container" frameborder="0"></iframe>
 61 |     </div>
 62 |   </div>
 63 | </template>
 64 | <script>
 65 | const Account = () => import('./account')
 66 | export default {
 67 |   name: 'frameindex',
 68 |   components: {
 69 |     Account
 70 |   },
 71 |   data() {
 72 |     return {
 73 |       language: "Chinese",
 74 |       theme: "",
 75 |       iframe: "",
 76 |       isshowponenavlist: false,
 77 |       isshowaccount: false,
 78 |       modulecontainerheight: "0px",
 79 |       manulist: [{
 80 |           name: "home",
 81 |           cnname: "首页",
 82 |           module: "homemodule",
 83 |           // ico:require(""),
 84 |           defalut: true,
 85 |           small: true,
 86 |           showtype: "text",
 87 |           iscurselect: true
 88 |         },
 89 |         {
 90 |           name: "club",
 91 |           cnname: "社区",
 92 |           defalut: true,
 93 |           small: true,
 94 |           module: "clubmodule",
 95 |           // ico:require(""),
 96 |           showtype: "text",
 97 |           iscurselect: false
 98 |         },
 99 |         {
100 |           name: "bbs",
101 |           cnname: "论坛",
102 |           defalut: true,
103 |           small: true,
104 |           module: "bbsmodule",
105 |           // ico:require(""),
106 |           showtype: "text",
107 |           iscurselect: false
108 |         },
109 |         {
110 |           name: "product",
111 |           cnname: "产品",
112 |           defalut: true,
113 |           small: true,
114 |           module: "productmodule",
115 |           // ico:require(""),
116 |           showtype: "text",
117 |           iscurselect: false
118 |         },
119 |         {
120 |           name: "course",
121 |           cnname: "网课",
122 |           defalut: true,
123 |           small: true,
124 |           module: "coursemodule",
125 |           // ico:require(""),
126 |           showtype: "text",
127 |           iscurselect: false
128 |         },
129 |         {
130 |           name: "blog",
131 |           cnname: "博客",
132 |           defalut: true,
133 |           small: true,
134 |           module: "blogmodule",
135 |           // ico:require(""),
136 |           showtype: "text",
137 |           iscurselect: false
138 |         },
139 |         {
140 |           name: "store",
141 |           cnname: "店铺",
142 |           defalut: true,
143 |           small: true,
144 |           module: "storemodule",
145 |           // ico:require(""),
146 |           showtype: "text",
147 |           iscurselect: false
148 |         },
149 |         {
150 |           name: "music",
151 |           cnname: "音乐",
152 |           defalut: true,
153 |           small: true,
154 |           module: "musicmodule",
155 |           // ico:require(""),
156 |           showtype: "text",
157 |           iscurselect: false
158 |         },
159 |         {
160 |           name: "text",
161 |           cnname: "文字",
162 |           defalut: true,
163 |           small: true,
164 |           module: "textmodule",
165 |           // ico:require(""),
166 |           showtype: "text",
167 |           iscurselect: false
168 |         },
169 |         {
170 |           name: "social",
171 |           cnname: "社交",
172 |           defalut: true,
173 |           small: true,
174 |           module: "socialmodule",
175 |           // ico:require(""),
176 |           showtype: "text",
177 |           iscurselect: false
178 |         },
179 |         {
180 |           name: "support",
181 |           cnname: "支持",
182 |           defalut: true,
183 |           small: true,
184 |           module: "supportmodule",
185 |           // ico:require(""),
186 |           showtype: "text",
187 |           iscurselect: false
188 |         },
189 |         {
190 |           name: "count",
191 |           cnname: "账户",
192 |           defalut: true,
193 |           small: false,
194 |           showtype: "text",
195 |           module: "",
196 |           // ico:require(""),
197 |           iscurselect: false
198 |         }
199 |       ],
200 |       type: '',
201 |       manulist2: [{
202 |         name: "manu",
203 |         cnname: "菜单",
204 |         module: "",
205 |         // ico:require(""),
206 |         showtype: "text",
207 |         iscurselect: false
208 |       }, {
209 |         name: "home",
210 |         cnname: "首页",
211 |         module: "homemodule",
212 |         // ico:require(""),
213 |         showtype: "text",
214 |         iscurselect: false
215 |       }, {
216 |         name: "count",
217 |         cnname: "账户",
218 |         showtype: "text",
219 |         module: "",
220 |         // ico:require(""),
221 |         iscurselect: false
222 |       }]
223 |     }
224 |   },
225 |   methods: {
226 |     getQueryString(name) {
227 |       var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
228 |       var r = window.location.search.substr(1).match(reg);
229 |       if (r != null) return unescape(r[2]);
230 |       return null;
231 |     },
232 |     onNavClick(index, type) {
233 |       if (this.manulist[index].cnname == "账户") {
234 |         this.onAccountClick(!this.isshowaccount)
235 |         return
236 |       }
237 |       var self = this;
238 |       this.manulist.forEach(function(t, i) {
239 |         self.$set(self.manulist[i], "iscurselect", false);
240 |       })
241 |       this.$set(this.manulist[index], "iscurselect", true);
242 |       if (this.manulist[index].module) {
243 |         this.iframe = this.type == 'total' ? ('./' + this.manulist[index].module + '.html') : ('../' + this.manulist[index].module + '/index.html')
244 |       }
245 |       if (type == "phone") {
246 |         this.isshowponenavlist = false
247 |         self.$set(self.manulist2[0], "iscurselect", false);
248 |         this.manulist2[1] = this.manulist[index]
249 |       }
250 |     },
251 |     onAccountClick(ishow, type, value) {
252 |       this.isshowponenavlist = false
253 |       this.isshowaccount = ishow
254 |       switch (type) {
255 |         case "theme":
256 |           this.theme = value
257 |           break;
258 |         case "language":
259 |           this.language = value
260 |           break;
261 |         default:
262 |           break;
263 |       }
264 |     },
265 |     onNavPhoneClick(index) {
266 |       if (index == 0) {
267 |         this.manulist2[0].iscurselect = !this.manulist2[0].iscurselect
268 |         this.isshowponenavlist = !this.isshowponenavlist
269 |         this.isshowaccount = false
270 |       }
271 |       if (index == 2) {
272 |         this.manulist2[0].iscurselect = false
273 |         this.onAccountClick(!this.isshowaccount)
274 |       }
275 |     },
276 |     getWinHeight() {
277 |       let winHeight = 0;
278 |       winHeight = window.innerHeight;
279 |       return winHeight;
280 |     },
281 |     setIframeHeight() {
282 |       let self = this
283 |       self.modulecontainerheight = self.getWinHeight() - 90 + 'px'
284 |       window.onresize = function() {
285 |         self.modulecontainerheight = self.getWinHeight() - 90 + 'px'
286 |       }
287 |     }
288 |   },
289 |   created() {
290 |     //this.manulist = this.getQueryString("manulist").split(",")
291 |   },
292 |   mounted() { //
293 |     // this.theme = this.$store.getters.gettheme
294 |     // this.language = this.$store.getters.getlanguage
295 |     this.type = this.getQueryString("type") || "separate" //totle,
296 |     // this.manulist = this.getQueryString("manulist") ? this.getQueryString("manulist").split(",") : []
297 |     this.iframe = this.type == 'total' ? ('./' + this.manulist[0].module + '.html') : ('../' + this.manulist[0].module + '/index.html')
298 |     this.setIframeHeight()
299 |   },
300 |   watch: {
301 |     type: {
302 |       handler() {},
303 |       deep: true,
304 |       immediately: true
305 |     },
306 |     theme: {
307 |       handler(newValue, oldValue) {
308 |         this.$store.commit("setcurtheme", newValue)
309 |       },
310 |       deep: true,
311 |       immediately: true
312 |     },
313 |     language: {
314 |       handler(newValue, oldValue) {
315 |         this.$store.commit("setlanguage", newValue)
316 |       },
317 |       deep: true,
318 |       immediately: true
319 |     },
320 |     manulist: {
321 |       handler() {
322 |         console.log(this.getQueryString("manulist"))
323 |         this.manulist == undefined ? this.manulist = [] : this.manulist = this.manulist
324 |       },
325 |       deep: true,
326 |       immediately: true
327 |     },
328 |     iframe: {
329 |       handler() {},
330 |       deep: true,
331 |       immediately: true
332 |     },
333 |   }
334 | }
335 | 
336 | </script>
337 | <style scoped lang="scss">
338 | .fn-inline {
339 |   display: inline-block;
340 |   vertical-align: middle;
341 | }
342 | 
343 | .wrapper {
344 |   z-index: 9999;
345 |   background: #767c84;
346 |   line-height: 1;
347 |   width: 100%;
348 |   right: 0;
349 |   height: 40px;
350 | }
351 | 
352 | .wrapper .wrapper-text {
353 |   font-family: "SF Pro SC", "HanHei SC", "SF Pro Text", "Myriad Set Pro", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
354 |   color: #c7d0d6;
355 |   font-size: 12px;
356 |   display: block;
357 |   line-height: 40px;
358 |   overflow: hidden;
359 |   text-decoration: none;
360 |   text-overflow: ellipsis;
361 |   text-align: right;
362 |   max-width: 980px;
363 |   margin: 0 auto;
364 |   padding: 0 15px;
365 | }
366 | 
367 | .nav,
368 | .navsmall {
369 |   position: relative;
370 |   z-index: 30;
371 |   background: rgba(48, 51, 52, 0.8);
372 |   backdrop-filter: saturate(100%) blur(15px)
373 | }
374 | 
375 | 
376 | 
377 | .nav-con {
378 |   padding: 0 15px;
379 |   margin: 0 auto;
380 |   font-size: 0;
381 |   max-width: 1000px;
382 |   position: relative;
383 |   display: flex;
384 |   justify-content: space-between;
385 |   z-index: 2;
386 | 
387 |   ul {
388 |     display: -webkit-box;
389 |     display: -ms-flexbox;
390 |     display: flex;
391 |     width: 100%;
392 |     justify-content: space-between;
393 |   }
394 | 
395 |   li {
396 |     cursor: pointer;
397 |     min-width: 30px;
398 |     height: 40px;
399 |     padding: 5px 0;
400 |     line-height: 40px;
401 |     color: #ccc;
402 |     text-align: center;
403 |     font-size: 14px;
404 | 
405 |     .navbtn {
406 |       display: inline-block;
407 |       color: #ccc;
408 |       line-height: 20px;
409 |     }
410 | 
411 |     img {
412 |       height: 20px;
413 |       border: none;
414 |     }
415 |   }
416 | 
417 |   li:hover {
418 |     color: #fff;
419 |     font-size: 14px;
420 | 
421 |     .navbtn {
422 |       color: #fff;
423 |     }
424 | 
425 | 
426 |   }
427 | 
428 |   li.active {
429 |     color: #fff;
430 |     font-size: 14px;
431 | 
432 |     .navbtn {
433 |       color: #fff;
434 |     }
435 | 
436 | 
437 |   }
438 | }
439 | 
440 | @media only screen and (max-width: 1920px) {
441 |   .nav {
442 |     display: block;
443 | 
444 | 
445 |   }
446 | 
447 |   .navsmall {
448 |     display: none;
449 |   }
450 | 
451 |   .account {
452 |     position: absolute;
453 |     display: block;
454 |     top: 50px;
455 |     right: -90px;
456 |     z-index: 30;
457 | 
458 |   }
459 | 
460 | }
461 | 
462 | @media only screen and (max-width: 1215px) {
463 |   .account {
464 |     position: absolute;
465 |     display: block;
466 |     top: 50px;
467 |     right: 0px;
468 |     z-index: 30;
469 | 
470 |   }
471 | }
472 | 
473 | /*767px*/
474 | @media only screen and (max-width: 650px) {
475 |   .nav {
476 |     display: none;
477 |   }
478 | 
479 |   .navsmall {
480 |     display: block;
481 |     position: relative;
482 |     z-index: 20;
483 | 
484 | 
485 |   }
486 | 
487 |   .nav-con {
488 |     padding: 0 30px;
489 |   }
490 | 
491 |   .account {
492 |     position: absolute;
493 |     display: block;
494 |     top: 50px;
495 |     right: 0;
496 |     z-index: 30;
497 | 
498 |   }
499 | 
500 | }
501 | 
502 | 
503 | .navsmall-nav {
504 |   position: absolute;
505 |   display: block;
506 |   background: #2e2f30;
507 |   padding: 10px 30px;
508 |   width: calc(100% - 60px);
509 | 
510 |   li {
511 |     text-align: left;
512 |     border-bottom: solid 1px #787a7e;
513 | 
514 |     .navbtn {
515 |       display: inline-block;
516 |       color: #ccc;
517 |       line-height: 30px;
518 |       font-size: 13px;
519 |     }
520 | 
521 |   }
522 | 
523 |   li:last-child {
524 |     border-bottom: solid 0px #787a7e;
525 |   }
526 | 
527 |   li:hover .navbtn {
528 |     color: #fff;
529 |   }
530 | 
531 | 
532 | }
533 | 
534 | .module-container {
535 |   /*position: absolute;
536 |   left: 0;
537 |   bottom: 0;
538 |   right: 0;
539 |   top: 90px;*/
540 |   z-index: 10;
541 |   width: 100%;
542 |   /*background: rgb(239, 242, 242);*/
543 |   background: #1f2425;
544 |   backdrop-filter: saturate(100%) blur(15px)
545 | }
546 | 
547 | 
548 | 
549 | /* 可以设置不同的进入和离开动画 */
550 | /* 设置持续时间和动画函数 */
551 | .slide-fade-enter-active {
552 |   transition: all .2s ease;
553 | }
554 | 
555 | .slide-fade-leave-active {
556 |   transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
557 | }
558 | 
559 | .slide-fade-enter,
560 | .slide-fade-leave-to
561 | 
562 | /* .slide-fade-leave-active for below version 2.1.8 */
563 |   {
564 |   transform: translateY(-10px);
565 |   opacity: 0;
566 | }
567 | 
568 | </style>
569 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * 参考文档
  3 |  * 【eslint英文文档】https://eslint.org/docs/user-guide/configuring
  4 |  * 【eslint中文文档】http://eslint.cn/docs/rules/
  5 |  */
  6 | 
  7 | /**
  8 |  * eslint有三种使用方式
  9 |  * 【1】js代码中通过注释的方式使用
 10 |  * 【2】通过webpack的eslintConfig字段设置，eslint会自动搜索项目的package.json文件中的配置
 11 |  * 【3】通过配置文件的方式使用，配置文件有多种文件方式，如JavaScript、JSON 或者 YAML等
 12 |  */
 13 | 
 14 | /**
 15 |  * 文件忽略
 16 |  * 【】让eslint跳过特定文件的检测
 17 |  * 【】通过当前工作目录下 「.eslintignore」 文件进行设置
 18 |  *  其使用的是Glob路径书写方式，与「.gitignore」的使用方法相同
 19 |  * 【】也可以在 package.json 文件中，通过 eslintIgnore 参数进行设置
 20 |  */
 21 | 
 22 | /**
 23 |  * 文件内局部设置
 24 |  * 【】eslint可以具体文件中设置特定代码的规则，常用于跳过某条语句的检测。
 25 |  * 【】注销全部规则，在代码前新建一行，添加注销 /* eslint-disable *\/  。如果没有恢复设置的语句，则下列全部代码都会跳过检测。
 26 |  * 【】恢复eslint，在代码前新建一行，添加注销 /* eslint-enable *\/
 27 |  * 【】指定忽略的规则，/* eslint-disable no-alert, no-console *\/
 28 |  * 【】在特定行禁用，// eslint-disable-line
 29 |  * 【】在下一行禁用，// eslint-disable-next-line
 30 |  */
 31 | 
 32 | module.exports = {
 33 |   /**
 34 |    * 根目录标识
 35 |    * http://eslint.cn/docs/user-guide/configuring#using-configuration-files
 36 |    * http://eslint.cn/docs/user-guide/configuring#configuration-cascading-and-hierarchy
 37 |    * 【】标识当前配置文件为最底层的文件，无需往更上一级的文件目录中进行搜索
 38 |    * 【】默认eslint的配置文件搜索方式是，从目标文件夹进行搜索，遍历内部每一个文件夹，找到配置文件并层叠使用。再跳出本项目，往祖先文件夹进行遍历
 39 |    * 【】注意「~/.eslintrc」的意义，「~」是指linux上的家目录，「~/.eslintrc」是指家目录下的eslint配置文件，用于私人开发者，用于整个电脑全局约束的。这个配置通过本配置项root去设置，设置了root,eslint检测时将不会再往上搜索
 40 |    * 【】eslint的生效规则是就近使用，越近的配置项优先级越高，覆盖其他配置项。如一个项目中，可以在不同文件夹中都添加配置文件，这些规则将重叠组合生效
 41 |    */
 42 |   root: true, // 标识当前配置文件为eslint的根配置文件，让其停止在父级目录中继续寻找。
 43 |   /**
 44 |    * 运行环境
 45 |    * http://eslint.cn/docs/user-guide/configuring#specifying-environments
 46 |    * 【】一个环境定义了一组预定义的全局变量
 47 |    * 【】获得了特定环境的全局定义，就不会认为是开发定义的，跳过对其的定义检测。否则会被认为改变量未定义
 48 |    * 【】常见的运行环境有以下这些，更多的可查看官网
 49 |    * browser - 浏览器环境中的全局变量。
 50 |    * node - Node.js 全局变量和 Node.js 作用域。
 51 |    * es6 - 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）。
 52 |    * amd - 将 require() 和 define() 定义为像 amd 一样的全局变量。
 53 |    * commonjs - CommonJS 全局变量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在浏览器中运行的代码)。
 54 |    * jquery - jQuery 全局变量。
 55 |    * mongo - MongoDB 全局变量。
 56 |    * worker - Web Workers 全局变量。
 57 |    * serviceworker - Service Worker 全局变量。
 58 |    */
 59 |   env: {
 60 |     browser: true // 浏览器环境
 61 |   },
 62 |   /**
 63 |    * 全局变量
 64 |    * http://eslint.cn/docs/user-guide/configuring#specifying-globals
 65 |    * 【】定义额外的全局，开发者自定义的全局变量，让其跳过no-undef 规则
 66 |    * 【】key值就是额外添加的全局变量
 67 |    * 【】value值用于标识该变量能否被重写，类似于const的作用。true为允许变量被重写
 68 |    * 【】注意：要启用no-global-assign规则来禁止对只读的全局变量进行修改。
 69 |    */
 70 |   globals: {},
 71 |   /**
 72 |    * 规则继承
 73 |    * http://eslint.cn/docs/user-guide/configuring#extending-configuration-files
 74 |    *【】可继承的方式有以下几种
 75 |    *【】eslint内置推荐规则，就只有一个，即「eslint:recommended」
 76 |    *【】可共享的配置， 是一个 npm 包，它输出一个配置对象。即通过npm安装到node_module中
 77 |    *  可共享的配置可以省略包名的前缀 eslint-config-，即实际设置安装的包名是 eslint-config-airbnb-base
 78 |    *【】从插件中获取的规则，书写规则为 「plugin:插件包名/配置名」，其中插件报名也是可以忽略「eslint-plugin-」前缀。如'plugin:vue/essential'
 79 |    *【】从配置文件中继承，即继承另外的一个配置文件，如'./node_modules/coding-standard/eslintDefaults.js'
 80 |    */
 81 |   extends: [
 82 |     'plugin:vue/essential', // 额外添加的规则可查看 https://vuejs.github.io/eslint-plugin-vue/rules/
 83 |     '@vue/standard' // https://github.com/standard/eslint-config-standard
 84 |   ],
 85 |   /**
 86 |    * 自定义规则
 87 |    * http://eslint.cn/docs/user-guide/configuring#configuring-rules
 88 |    * 【】基本使用方式
 89 |    * "off" 或者0 关闭规则
 90 |    * "warn" 或者1 将规则打开为警告（不影响退出代码）
 91 |    * "error" 或者2 将规则打开为错误（触发时退出代码为1）
 92 |    * 如：'no-restricted-syntax': 0, // 表示关闭该规则
 93 |    * 【】如果某项规则，有额外的选项，可以通过数组进行传递，而数组的第一位必须是错误级别。如0,1,2
 94 |    * 如 'semi': ['error', 'never'], never就是额外的配置项
 95 |    */
 96 |   rules: {
 97 |     quotes: [1, 'single'], // 引号类型 `` "" ''
 98 |     'space-before-function-paren': 0,
 99 |     'no-console': 'off',
100 |     'no-debugger': 'off',
101 |     // 禁止条件表达式中出现赋值操作符
102 |     'no-cond-assign': 2,
103 | 
104 |     //  Vue: Base (Enabling Correct ESLint Parsing)
105 |     // 允许在 <template> 中使用 eslint-disable, eslint-enable, eslint-disable-line, eslint-disable-next-line 等指令
106 |     // 如可以用 `<!-- eslint-disable-next-line vue/max-attributes-per-line -->` 来控制某一行的规则
107 |     // https://eslint.vuejs.org/rules/comment-directive.html
108 |     'vue/comment-directive': 2,
109 |     // 在 jsx 中不允许使用未定义的变量
110 |     'vue/jsx-uses-vars': 2,
111 |     /**
112 |      * Vue: Priority A: Essential (Error Prevention)
113 |      */
114 |     // 不允许在 `computed` 中使用异步方法，如果确实有需求，请使用此插件：https://github.com/foxbenjaminfox/vue-async-computed
115 |     'vue/no-async-in-computed-properties': 2,
116 | 
117 |     // 在 `props`, `computed`, `methods` 中存在的 key 不允许重复
118 |     'vue/no-dupe-keys': [
119 |       2
120 |       // 除了 Vue 支持的 `computed`, `methods` ...，还在哪些 key 下去搜索重复的 key
121 |       // "groups": []
122 |     ],
123 | 
124 |     // 避免重复定义属性，如：`<div foo="bar" :foo="baz"></div>`
125 |     'vue/no-duplicate-attributes': [
126 |       2,
127 |       {
128 |         // 允许 class 两种形式共存
129 |         allowCoexistClass: true,
130 |         // 允许 style 两种形式共存
131 |         allowCoexistStyle: true
132 |       }
133 |     ],
134 | 
135 |     // 忽略解析 <template> 时的语法报错
136 |     'vue/no-parsing-error': [
137 |       2,
138 |       // 配置项非常多，主要与 HTML 相关，默认都是 false，即不忽略报错
139 |       {
140 |         'abrupt-closing-of-empty-comment': false,
141 |         'absence-of-digits-in-numeric-character-reference': false,
142 |         'cdata-in-html-content': false,
143 |         'character-reference-outside-unicode-range': false,
144 |         'control-character-in-input-stream': false,
145 |         'control-character-reference': false,
146 |         'eof-before-tag-name': false,
147 |         'eof-in-cdata': false,
148 |         'eof-in-comment': false,
149 |         'eof-in-tag': false,
150 |         'incorrectly-closed-comment': false,
151 |         'incorrectly-opened-comment': false,
152 |         'invalid-first-character-of-tag-name': false,
153 |         'missing-attribute-value': false,
154 |         'missing-end-tag-name': false,
155 |         'missing-semicolon-after-character-reference': false,
156 |         'missing-whitespace-between-attributes': false,
157 |         'nested-comment': false,
158 |         'noncharacter-character-reference': false,
159 |         'noncharacter-in-input-stream': false,
160 |         'null-character-reference': false,
161 |         'surrogate-character-reference': false,
162 |         'surrogate-in-input-stream': false,
163 |         'unexpected-character-in-attribute-name': false,
164 |         'unexpected-character-in-unquoted-attribute-value': false,
165 |         'unexpected-equals-sign-before-attribute-name': false,
166 |         'unexpected-null-character': false,
167 |         'unexpected-question-mark-instead-of-tag-name': false,
168 |         'unexpected-solidus-in-tag': false,
169 |         'unknown-named-character-reference': false,
170 |         'end-tag-with-attributes': false,
171 |         'duplicate-attribute': false,
172 |         'end-tag-with-trailing-solidus': false,
173 |         'non-void-html-element-start-tag-with-trailing-solidus': false,
174 |         'x-invalid-end-tag': false,
175 |         'x-invalid-namespace': false
176 |       }
177 |     ],
178 | 
179 |     // 不允许覆盖掉 Vue 内部的方法/属性，比如 `$el`, `$on`, `$nextTick` ...
180 |     'vue/no-reserved-keys': [
181 |       2
182 |       // {
183 |       //   // 除了默认的 Vue 方法/属性外，其他不允许被覆盖的 key
184 |       //   "reserved": [],
185 |       //   // 除了默认的 group 外，其他要检查的 key
186 |       //   "groups": [],
187 |       // },
188 |     ],
189 | 
190 |     // 不允许可共享的 `data` 字段，即 `data` 字段只能是函数，不能是对象
191 |     'vue/no-shared-component-data': 2,
192 | 
193 |     // 不允许在 `computed` 中有无意义的修改，如：`this.foo = 'bar'; return baz`
194 |     'vue/no-side-effects-in-computed-properties': 2,
195 | 
196 |     // 不允许在 `<template>` 标签上加 `key`，如：`<template key="foo">`，其他标签是可以的
197 |     'vue/no-template-key': 2,
198 | 
199 |     // 不允许在 `<textarea>` 标签间使用 mustache 语法，如 `<textarea>{{ foo }}</textarea>`
200 |     // 因为它会不生效，请使用 `v-model`，如：`<textarea v-model="foo"`></textarea>`
201 |     'vue/no-textarea-mustache': 2,
202 | 
203 |     // 不允许未使用的 component
204 |     'vue/no-unused-components': [
205 |       2,
206 |       {
207 |         // 是否忽略使用 `<component is>` 形式定义的组件
208 |         ignoreWhenBindingPresent: true
209 |       }
210 |     ],
211 | 
212 |     // 不允许未被定义的变量，主要是指在 <template> 中定义的项，如 `<div v-for="i in foo">{{ bar }}</div>`
213 |     'vue/no-unused-vars': 2,
214 | 
215 |     // 不允许 `v-if` 和 `v-for` 在同一个标签上（如果在同一个标签，`v-for` 的优先级会更高一些）
216 |     // 两个混用有两种情况：
217 |     // 1. `<div v-if="item.show" v-for="item in list">`，if 判断基于每一个循环项
218 |     // 2. `<div v-if="foo" v-for="item in list">`，if 判断基于其他变量，此种情况是要避免的，空耗循环
219 |     'vue/no-use-v-if-with-v-for': [
220 |       2,
221 |       {
222 |         // 如果 `v-if` 中使用了 `v-for` 循环后的变量，则允许
223 |         allowUsingIterationVar: true
224 |       }
225 |     ],
226 | 
227 |     // 在 `<component>` 上要求有 `v-bind:is`
228 |     'vue/require-component-is': 2,
229 | 
230 |     // 在 `props` 中的类型，应该是构建函数而不是字符串，如 `type: Number` 而不是 `type: 'Number'`
231 |     'vue/require-prop-type-constructor': 2,
232 | 
233 |     // `render` 方法一定要有返回值
234 |     'vue/require-render-return': 2,
235 | 
236 |     // 每个 `v-for` 元素都要绑定 key，如 `<div v-for="foo in bar" :key="for"></div>`
237 |     // 不太理解这个细节和 "vue/valid-v-for" 的区别
238 |     'vue/require-v-for-key': 2,
239 | 
240 |     // 校验 props 中指定的属性类型与默认值，
241 |     // 且如果属性类型为 Array, Object，要求默认值是函数形式，保证数据不会共享，
242 |     // 可参考 "vue/no-shared-component-data"
243 |     'vue/require-valid-default-prop': 2,
244 | 
245 |     // 在 `computed` 中的每个 getter 都要有明确的返回值
246 |     'vue/return-in-computed-property': [
247 |       2,
248 |       {
249 |         // 不允许有隐式的 undefined 返回，即不能只写 `return;`，`return` 后一定要有值
250 |         treatUndefinedAsUnspecified: true
251 |       }
252 |     ],
253 | 
254 |     // 如果组件已经绑定了一个包含修饰符的 `v-on`，则要求另一个使用 `exact` 修饰符
255 |     'vue/use-v-on-exact': 2,
256 | 
257 |     // 检查在 `<template>` 下只有一个根元素
258 |     // 要求：根元素只能是标签，不能为空，不能是纯文本，不能使用 `v-for`，不能是 `<template>` 或 `<slot>`
259 |     // 额外的，支持使用 `v-if` 放多个元素在 `<template>`下，如：
260 |     // ```
261 |     // <template>
262 |     //   <div v-if="foo"></div>
263 |     //   <div v-else></div>
264 |     // </template>
265 |     // ```
266 |     'vue/valid-template-root': 2,
267 | 
268 |     // 检查 `v-bind` 的正确性
269 |     // 1. 不能有无效的修饰符，如：`<div v-bind.foo="bar"></div>`
270 |     // 2. 值不能为空，如：`<div v-bind></div>`
271 |     'vue/valid-v-bind': 2,
272 | 
273 |     // 检查 `v-clock` 的正确性
274 |     // 1. 不能有参数，如：`<div v-cloak:foo></div>`
275 |     // 2. 不能有修饰符，如：`<div v-cloak.foo></div>`
276 |     // 3. 不能有值，如：`<div v-cloak="foo"></div>`
277 |     'vue/valid-v-cloak': 2,
278 | 
279 |     // 检查 `v-else-if` 的正确性
280 |     // 1. 不能有参数，如：`<div v-else-if:foo></div>`
281 |     // 2. 不能有修饰符，如：`<div v-else-if.foo></div>`
282 |     // 3. 值不能为空，如：`<div v-else-if></div>`
283 |     // 4. 前边要有 `v-if` 或 `v-else`
284 |     // 5. 不能和 `v-if` 或 `v-else` 在同一个标签上
285 |     'vue/valid-v-else-if': 2,
286 | 
287 |     // 检查 `v-else` 的正确性
288 |     // 1. 不能有参数，如：`<div v-else:foo></div>`
289 |     // 2. 不能有修饰符，如：`<div v-else.foo></div>`
290 |     // 3. 值不能为空，如：`<div v-else></div>`
291 |     // 4. 前边要有 `v-if` 或 `v-else-if`
292 |     // 5. 不能和 `v-if` 或 `v-else-if` 在同一个标签上
293 |     'vue/valid-v-else': 2,
294 | 
295 |     // 检查 `v-for` 的正确性
296 |     // 1. 不能有参数，如：`<div v-for:foo></div>`
297 |     // 2. 不能有修饰符，如：`<div v-for.foo></div>`
298 |     // 3. 值不能为空，如：`<div v-for></div>`
299 |     // 4. 如果是自定义组件要有 `v-bind:key`，且 `v-bind:key` 只能使用在 `v-for` 中定义的变量（保证每个都不相同）
300 |     'vue/valid-v-for': 2,
301 | 
302 |     // 检查 `v-html` 的正确性
303 |     // 1. 不能有参数，如：`<div v-html:foo></div>`
304 |     // 2. 不能有修饰符，如：`<div v-html.foo></div>`
305 |     // 3. 值不能为空，如：`<div v-html></div>`
306 |     'vue/valid-v-html': 2,
307 | 
308 |     // 检查 `v-if` 的正确性
309 |     // 1. 不能有参数，如：`<div v-if:foo></div>`
310 |     // 2. 不能有修饰符，如：`<div v-if.foo></div>`
311 |     // 3. 值不能为空，如：`<div v-if></div>`
312 |     // 4. 不能和 `v-else` 或 `v-else` 在同一个标签上
313 |     'vue/valid-v-if': 2,
314 | 
315 |     // 检查 `v-model` 的正确性
316 |     // 1. 不能有参数，如：`<input v-model:foo="bar">`
317 |     // 2. 不能加无效的修饰符，如：`<input v-model.foo="bar">`
318 |     // 3. 值不能为空，如：`<input v-model>`
319 |     // 4. 值有无效的左表达式（LHS, left-hand side），如：`<input v-model="foo() + bar()">`
320 |     // 5. 只能应用在表单元素上，如：`<div v-model="foo"></div>`
321 |     // 6. 不能绑定在动态 type 的 input 元素上，如：`<input :type="type" v-model="foo">`
322 |     // 7. 不能绑定在 type 为 file 的 input 元素上，如：`<input type="file" v-model="foo">`
323 |     // 8. 值不能为迭代变量，如：`<div v-for="x in list"><input type="file" v-model="x"></div>`
324 |     'vue/valid-v-model': 2,
325 | 
326 |     // 检查 `v-on` 的正确性
327 |     // 1. 不能没有事件名（参数），如：`<div v-on="foo"></div>`
328 |     // 2. 不能加无效的修饰符，如：`<div v-on:click.foo="bar"></div>`
329 |     // 3. 值不能为空，且无修饰符，如：`<div v-on:click></div>`
330 |     // 注意，是可以像这样使用的：`<div @click.prevent></div>`
331 |     'vue/valid-v-on': [
332 |       2,
333 |       {
334 |         // 允许的修饰符，以字符串形式放在数组中，如 `["foo"]` 则表示可以使用 `@click.foo`
335 |         modifiers: []
336 |       }
337 |     ],
338 | 
339 |     // 检查 `v-once` 的正确性
340 |     // 1. 不能有参数，如：`<div v-once:foo></div>`
341 |     // 2. 不能有修饰符，如：`<div v-once.foo></div>`
342 |     // 3. 不能有值，如：`<div v-once="foo"></div>`
343 |     'vue/valid-v-once': 2,
344 | 
345 |     // 检查 `v-pre` 的正确性
346 |     // 1. 不能有参数，如：`<div v-pre:foo></div>`
347 |     // 2. 不能有修饰符，如：`<div v-pre.foo></div>`
348 |     // 3. 不能有值，如：`<div v-pre="foo"></div>`
349 |     'vue/valid-v-pre': 2,
350 | 
351 |     // 检查 `v-show` 的正确性
352 |     // 1. 不能有参数，如：`<div v-show:foo></div>`
353 |     // 2. 不能有修饰符，如：`<div v-show.foo></div>`
354 |     // 3. 值不能为空，如：`<div v-show></div>`
355 |     'vue/valid-v-show': 2,
356 | 
357 |     // 检查 `v-text` 的正确性
358 |     // 1. 不能有参数，如：`<div v-text:foo></div>`
359 |     // 2. 不能有修饰符，如：`<div v-text.foo></div>`
360 |     // 3. 值不能为空，如：`<div v-text></div>`
361 |     'vue/valid-v-text': 2,
362 | 
363 |     /**
364 |      * Vue: Priority B: Strongly Recommended (Improving Readability)
365 |      */
366 | 
367 |     // 模板属性使用连字符（减号），还是使用小驼峰形式
368 |     'vue/attribute-hyphenation': [
369 |       2,
370 |       // always: 使用连字符，并统一使用小写
371 |       // never: 使用小驼峰形式
372 |       'always',
373 |       {
374 |         // 需要忽略检测的属性
375 |         ignore: []
376 |       }
377 |     ],
378 | 
379 |     // HTML 标签的闭合尖括号是否要展示在新行
380 |     'vue/html-closing-bracket-newline': [
381 |       2,
382 |       // never: 不要新起一行
383 |       // always: 总是新起一行
384 |       {
385 |         // 单行的 html 标签闭合括号是否要新起一行
386 |         singleline: 'never',
387 |         // 多行的 html 标签闭合括号是否要新起一行
388 |         multiline: 'always'
389 |       }
390 |     ],
391 | 
392 |     // HTML 标签的尖括号与标签内容之间是否要空格
393 |     'vue/html-closing-bracket-spacing': [
394 |       2,
395 |       // never: 不要加空格
396 |       // always: 要加空格
397 |       {
398 |         // 针对开始标签的规则
399 |         startTag: 'never',
400 |         // 针对结束标签的规则
401 |         endTag: 'never',
402 |         // 针对自闭合标签的规则，在 `/>` 前是否要加空格
403 |         selfClosingTag: 'always'
404 |       }
405 |     ],
406 | 
407 |     // 校验结束标签：对于自闭合标签不允许使用结束标签，其他标签要求必须有结束标签
408 |     // NOTE: 此规则与 vue/html-self-closing 略有重叠，暂关闭检测
409 |     'vue/html-end-tags': 0,
410 | 
411 |     // 检查 HTML 元素的缩进
412 |     'vue/html-indent': [
413 |       2,
414 |       // 数字：每个缩进的空格数
415 |       // "tab"：使用 Tab 缩进
416 |       2,
417 |       {
418 |         // 多个属性是否要垂直对齐
419 |         alignAttributesVertically: false,
420 |         // 属性的缩进
421 |         attribute: 1,
422 |         // 基础缩进
423 |         baseIndent: 1,
424 |         // 结束符的缩进
425 |         closeBracket: 0,
426 |         // 要忽略的节点
427 |         ignores: []
428 |       }
429 |     ],
430 | 
431 |     // 校验 HTML 属性值的引号
432 |     'vue/html-quotes': [
433 |       2,
434 |       // double: 双引号
435 |       // single: 单引号
436 |       'double'
437 |     ],
438 | 
439 |     // 标签的自闭合
440 |     // 自闭合指的 `<br />`，一定要有后边的 `/` 才算
441 |     'vue/html-self-closing': [
442 |       2,
443 |       // never: 不自闭合
444 |       // always: 总是自闭合
445 |       // any: 都可以
446 |       {
447 |         // HTML 标签
448 |         html: {
449 |           // 标准的 HTML 标签
450 |           normal: 'never',
451 |           // 空白标签（标准的自闭合标签，如 `<br>`）
452 |           void: 'never',
453 |           // 自定义组件
454 |           component: 'any'
455 |         },
456 |         // SVG 标签
457 |         svg: 'always',
458 |         // MathML 标签
459 |         math: 'always'
460 |       }
461 |     ],
462 | 
463 |     // 一行最多多少个属性
464 |     'vue/max-attributes-per-line': [
465 |       2,
466 |       {
467 |         // 针对单行标签，最多支持多少个属性，再多要换行
468 |         singleline: 5,
469 |         // 针对多行标签
470 |         multiline: {
471 |           // 多行标签最多每行多少个属性
472 |           max: 1,
473 |           // 与属性名同行的标签是否独立算一行
474 |           allowFirstLine: false
475 |         }
476 |       }
477 |     ],
478 | 
479 |     // 针对多行元素，是否要求子元素折行。可参考 singleline-html-element-content-newline 规则
480 |     // 多行元素，是指标签占据了多行，如某些属性另起一行、内容另起一行、内容包含多行、结束标签另起一行等
481 |     // 因为行内元素可能会有属性换行，但不希望内容换行的情况，所以暂关闭此检测
482 |     'vue/multiline-html-element-content-newline': [
483 |       0,
484 |       {
485 |         // 忽略无子元素的标签
486 |         ignoreWhenEmpty: true,
487 |         // 要忽略的标签
488 |         ignores: ['pre', 'textarea']
489 |       }
490 |     ],
491 | 
492 |     // 在 mustache 中定义值与括号间是否要空格
493 |     'vue/mustache-interpolation-spacing': [
494 |       2,
495 |       // always: 在大括号内部左右各加一个空格
496 |       // never: 在大括号内部左右不加空格
497 |       'always'
498 |     ],
499 | 
500 |     // 组件 `name` 值的风格
501 |     'vue/name-property-casing': [
502 |       2,
503 |       // camelCase: 小驼峰
504 |       // PascalCase: 大驼峰
505 |       // kebab-case: 连字符形式
506 |       'PascalCase'
507 |     ],
508 | 
509 |     // 检查标签中是否有多余的空格
510 |     'vue/no-multi-spaces': [
511 |       2,
512 |       {
513 |         // 是否忽略对象属性中的空格（属性名与冒号之间）
514 |         ignoreProperties: false
515 |       }
516 |     ],
517 | 
518 |     // 在模板中，属性的等号左右不应有空格
519 |     'vue/no-spaces-around-equal-signs-in-attribute': 2,
520 | 
521 |     // 不允许在模板嵌套环境中使用同名变量，如： `<div v-for="i in 5"><span v-for="i in 10" /></div>`
522 |     // 同时也会检测在模板中定义了 data/props 上的变量，如： `<template><div v-for="i in 5"></div></template><script>export default { props: ['i'] }</script>`
523 |     'vue/no-template-shadow': 2,
524 | 
525 |     // Prop 名大小写，这里指的是在 <script> 中的情形
526 |     // 参考：https://vuejs.org/v2/style-guide/#Prop-name-casing-strongly-recommended
527 |     'vue/prop-name-casing': [
528 |       2,
529 |       // 可以使用 `camelCase` 或 `snake_case`
530 |       'camelCase'
531 |     ],
532 | 
533 |     // 要求每个 props 要有默认值
534 |     'vue/require-default-prop': 2,
535 | 
536 |     // 要求每个 props 要有类型
537 |     'vue/require-prop-types': 2,
538 | 
539 |     // 针对单行元素，是否要求子元素折行。可参考 multiline-html-element-content-newline 规则
540 |     // 单行元素，是指标签起始、属性、内容、结束标签都在同一行
541 |     'vue/singleline-html-element-content-newline': [
542 |       0,
543 |       {
544 |         // 忽略无子元素的标签
545 |         ignoreWhenEmpty: true,
546 |         // 忽略无属性的标签
547 |         ignoreWhenNoAttributes: true,
548 |         // 要忽略的标签
549 |         ignores: ['pre', 'textarea']
550 |       }
551 |     ],
552 | 
553 |     // 针对 `v-bind` 建议使用的方案
554 |     'vue/v-bind-style': [
555 |       2,
556 |       // shorthand: 缩短方案，如：`<div :foo="bar"></div>`
557 |       // longform: 详细方案，如：`<div v-bind:foo="bar"></div>`
558 |       'shorthand'
559 |     ],
560 | 
561 |     // 针对 `v-on` 建议使用的方案
562 |     'vue/v-on-style': [
563 |       2,
564 |       // shorthand: 缩短方案，如：`<div @foo="bar"></div>`
565 |       // longform: 详细方案，如：`<div v-on:foo="bar"></div>`
566 |       'shorthand'
567 |     ],
568 | 
569 |     /**
570 |      * Vue: Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
571 |      */
572 | 
573 |     // HTML 中属性的顺序
574 |     // 参考：https://vuejs.org/v2/style-guide/#Element-attribute-order-recommended
575 |     'vue/attributes-order': [
576 |       2,
577 |       {
578 |         // 定义具体的顺序
579 |         order: [
580 |           // 定义 (提供组件的选项)，如 `is`
581 |           'DEFINITION',
582 |           // 列表渲染 (创建多个变化的相同元素)，如 `v-for`
583 |           'LIST_RENDERING',
584 |           // 条件渲染 (元素是否渲染/显示)，如 `v-if`, `v-else-if`, `v-else`, `v-show`, `v-cloak`
585 |           'CONDITIONALS',
586 |           // 渲染方式 (改变元素的渲染方式)，如 `v-once`, `v-pre`
587 |           'RENDER_MODIFIERS',
588 |           // 全局感知 (跨组件的感知属性)，如 `id`
589 |           'GLOBAL',
590 |           // 唯一特性 (需要唯一值的特性)，如 `ref`, `key`, `slot`, `slot-scope`
591 |           'UNIQUE',
592 |           // 双向绑定 (把绑定和事件结合起来)，如 `v-model`
593 |           'TWO_WAY_BINDING',
594 |           // 其他用户的绑定，如 `v-custom-directive`
595 |           'OTHER_DIRECTIVES',
596 |           // 其它特性 (所有普通的绑定或未绑定的特性)
597 |           'OTHER_ATTR',
598 |           // 事件 (组件事件监听器)，如 `v-on`
599 |           'EVENTS',
600 |           // 内容 (复写元素的内容)，如 `v-html`, `v-text`
601 |           'CONTENT'
602 |         ]
603 |       }
604 |     ],
605 | 
606 |     // 不允许使用 `v-html`，因为这可能会带来 XSS 漏洞
607 |     'vue/no-v-html': 1,
608 | 
609 |     // 在组件中针对每个 key （如 data, computed ...）排序
610 |     'vue/order-in-components': [
611 |       0,
612 |       {
613 |         // 每个 key 的排序
614 |         order: [
615 |           // 数组表示这几个 key 的权重是相同的
616 |           ['name', 'delimiters', 'functional', 'model'],
617 |           ['components', 'directives', 'filters'],
618 |           ['parent', 'mixins', 'extends', 'provide', 'inject'],
619 |           'el',
620 |           'template',
621 |           'props',
622 |           'propsData',
623 |           'data',
624 |           'computed',
625 |           'watch',
626 |           'LIFECYCLE_HOOKS',
627 |           'methods',
628 |           'render',
629 |           'renderError'
630 |         ]
631 |       }
632 |     ],
633 | 
634 |     // 在 <template> 中不允许使用 `this`，默认环境就已经是 this 了
635 |     'vue/this-in-template': [
636 |       2,
637 |       // always: 总是给模板变量加 this 前缀
638 |       // never: 从不在模板变量前加 this
639 |       'never'
640 |     ],
641 | 
642 |     /**
643 |      * Vue: Uncategorized
644 |      */
645 | 
646 |     // 检查数组中括号前后是否要加空格
647 |     // 此配置与 ESLint 的 array-bracket-spacing 规则一致，但它会检查 `<template>` 中的代码
648 |     'vue/array-bracket-spacing': [2, 'never'],
649 | 
650 |     // 箭头函数的箭头前后是否要有空格
651 |     // 此配置与 ESLint 的 array-spacing 规则一致，但它会检查 `<template>` 中的代码
652 |     'vue/arrow-spacing': [
653 |       2,
654 |       {
655 |         before: true,
656 |         after: true
657 |       }
658 |     ],
659 | 
660 |     // 代码块前后是否要有空格
661 |     // 此配置与 ESLint 的 block-spacing 规则一致，但它会检查 `<template>` 中的代码
662 |     'vue/block-spacing': [2, 'always'],
663 | 
664 |     // 大括号的风格
665 |     // 此配置与 ESLint 的 brace-style 规则一致，但它会检查 `<template>` 中的代码
666 |     'vue/brace-style': [
667 |       2,
668 |       'stroustrup',
669 |       {
670 |         allowSingleLine: true
671 |       }
672 |     ],
673 | 
674 |     // 使用驼峰形式表示变量时，一些细节配置
675 |     // 此配置与 ESLint 的 camelcase 规则一致，但它会检查 `<template>` 中的代码
676 |     'vue/camelcase': [
677 |       2,
678 |       {
679 |         properties: 'always',
680 |         ignoreDestructuring: true
681 |       }
682 |     ],
683 | 
684 |     // 对象和数组最后一个 value 后是否加逗号
685 |     // 此配置与 ESLint 的 comma-dangle 规则一致，但它会检查 `<template>` 中的代码
686 |     'vue/comma-dangle': [2, 'always-multiline'],
687 | 
688 |     // 自定义组件标签名使用的风格，如 `<my-component />` 还是 `<MyComponent />`
689 |     'vue/component-name-in-template-casing': [
690 |       2,
691 |       // PascalCase: 大驼峰
692 |       // kebab-case: 连字符形式
693 |       'PascalCase',
694 |       {
695 |         // 只检查在 components 中注册的组件
696 |         registeredComponentsOnly: true,
697 |         // 要忽略的标签名
698 |         ignores: []
699 |       }
700 |     ],
701 | 
702 |     // 使用 `===`
703 |     // 此配置与 ESLint 的 eqeqeq 规则一致，但它会检查 `<template>` 中的代码
704 |     'vue/eqeqeq': [2, 'smart'],
705 | 
706 |     // 在对象的冒号前后是否要有空格
707 |     // 此配置与 ESLint 的 key-spacing 规则一致，但它会检查 `<template>` 中的代码
708 |     'vue/key-spacing': [
709 |       2,
710 |       {
711 |         // mode 定义空格风格，strict 为仅允许一个空格， minimum 为可因为对齐的原因多加几个空格，但对齐后，不能再多空格
712 |         mode: 'strict',
713 |         // 在冒号前后是否要空格
714 |         beforeColon: false,
715 |         afterColon: true
716 |       }
717 |     ],
718 | 
719 |     // 检查组件在代码中定义的名称，是否与文件名一致
720 |     // 'vue/match-component-file-name': [
721 |     //   1,
722 |     //   {
723 |     //     // 可忽略的文件扩展名
724 |     //     extensions: ['js', 'vue', 'jsx'],
725 |     //     // 是否要求匹配大小写
726 |     //     shouldMatchCase: false
727 |     //   }
728 |     // ],
729 | 
730 |     // 对于布尔型的属性，要求默认值必须为 false，因为默认不传时 undefined 为 falsy 值
731 |     'vue/no-boolean-default': [
732 |       2,
733 |       // "no-default": 不允许添加 default
734 |       // "default-false": 可以添加 default 字段，但必须为 false
735 |       'no-default'
736 |     ],
737 | 
738 |     // 不允许某些特殊语法，可以使用字符串表示限制的表达式，也可以使用对象自定义限制出错信息
739 |     // 此配置与 ESLint 的 no-restricted-syntax 规则一致，但它会检查 `<template>` 中的代码
740 |     'vue/no-restricted-syntax': [
741 |       2,
742 |       'WithStatement',
743 |       // 额外支持 Vue 的 AST，详细见 https://github.com/mysticatea/vue-eslint-parser/blob/master/docs/ast.md
744 |       // 如，不允许在 mustache 中嵌入方法调用：
745 |       'VElement > VExpressionContainer CallExpression'
746 |     ],
747 | 
748 |     // 当整个对象在一行时，大括号前后是否要加空格
749 |     // 此配置与 ESLint 的 object-curly-spacing 规则一致，但它会检查 `<template>` 中的代码
750 |     'vue/object-curly-spacing': [2, 'always'],
751 | 
752 |     // 检查 `<script>` 中的组件是直接 export 出去的，而不是多绕一层
753 |     'vue/require-direct-export': 0,
754 | 
755 |     // 在 .vue 文件中的 `<script>` 标签内的缩进配置，可以参考 stylistic-issues 中的 indent 规则
756 |     'vue/script-indent': [
757 |       2,
758 |       // 此参数可为数字，表示缩进的空格数，或者使用 `tab` 表示使用 tab 来缩进
759 |       2,
760 |       {
761 |         // 在 `<script>` 标签内的内容，初始为几个缩进
762 |         baseIndent: 0,
763 |         // switch 中的 case, default 的缩进，感觉与 stylistic-issues/indent 规则有重合
764 |         switchCase: 1,
765 |         // 要忽略的 AST node selector，同样可参考 stylistic-issues/indent 中的 ignoredNodes 规则
766 |         ignores: []
767 |       }
768 |     ],
769 | 
770 |     // 在中缀（二元、三元）操作符前后是否要有空格，如 +, -, *, /, >, <, =, ?:
771 |     // 此配置与 ESLint 的 space-infix-ops 规则一致，但它会检查 `<template>` 中的代码
772 |     'vue/space-infix-ops': [
773 |       2,
774 |       {
775 |         int32Hint: true
776 |       }
777 |     ],
778 | 
779 |     // 一元操作符前后是否允许加空格
780 |     // 此配置与 ESLint 的 space-unary-ops 规则一致，但它会检查 `<template>` 中的代码
781 |     'vue/space-unary-ops': [
782 |       2,
783 |       {
784 |         words: true,
785 |         nonwords: false
786 |       }
787 |     ],
788 |     // 'vue/attribute-hyphenation': 'open',
789 |     // 在 `v-on` 后跟的方法名后，是否要加 `()`（Vue 会自动做调用，当无参数传递时不需要加括号）
790 |     'vue/v-on-function-call': [
791 |       2,
792 |       // always: 总要跟括号
793 |       // never: 除了需要参数，否则不允许放空的 `()`
794 |       'never'
795 |     ]
796 |   },
797 |   /**
798 |    * 插件
799 |    * http://eslint.cn/docs/user-guide/configuring#configuring-plugins
800 |    * 【】插件同样需要在node_module中下载
801 |    * 【】注意插件名忽略了「eslint-plugin-」前缀，所以在package.json中，对应的项目名是「eslint-plugin-vue」
802 |    * 【】插件的作用类似于解析器，用以扩展解析器的功能，用于检测非常规的js代码。也可能会新增一些特定的规则。
803 |    * 【】如 eslint-plugin-vue，是为了帮助我们检测.vue文件中 <template> 和 <script> 中的js代码
804 |    */
805 |   // plugins: ['html'],
806 |   /**
807 |   * 解析器配置项
808 |   * http://eslint.cn/docs/user-guide/configuring#specifying-parser-options
809 |   * 【】这里设置的配置项将会传递到解析器中，被解析器获取到，进行一定的处理。具体被利用到，要看解析器的源码有没有对其进行利用。这里仅仅做了参数定义，做了规定，告诉解析器的开发者可能有这些参数
810 |   * 【】配置项目有：
811 |   * "sourceType": "module",  // 指定JS代码来源的类型，script(script标签引入？) | module（es6的module模块），默认为script。为什么vue的会使用script呢？因为vue是通过babel-loader编译的，而babel编译后的代码就是script方式
812 |   * "ecmaVersion": 6,     // 支持的ES语法版本，默认为5。注意只是语法，不包括ES的全局变量。全局变量需要在env选项中进行定义
813 |   * "ecmaFeatures": {     // Features是特征的意思，这里用于指定要使用其他那些语言对象
814 |     "experimentalObjectRestSpread": true, //启用对对象的扩展
815 |     "jsx": true,              //启用jsx语法
816 |     "globalReturn":true,          //允许return在全局使用
817 |     "impliedStrict":true          //启用严格校验模式
818 |    }
819 |   */
820 |   parserOptions: {
821 |     parser: 'babel-eslint'
822 |   },
823 |   /**
824 |    * 针对特定文件的配置
825 |    * 【】可以通过overrides对特定文件进行特定的eslint检测
826 |    * 【】特定文件的路径书写使用Glob格式，一个类似正则的路径规则，可以匹配不同的文件
827 |    * 【】配置几乎与 ESLint 的其他配置相同。覆盖块可以包含常规配置中的除了 extends、overrides 和 root 之外的其他任何有效配置选项，
828 |    */
829 |   overrides: [{
830 |     files: ['**/__tests__/*.{j,t}s?(x)'],
831 |     env: {
832 |       mocha: true
833 |     }
834 |   },
835 |   {
836 |     files: ['**/public/static/air-map-v1.0/*.{j,t}s'],
837 |     plugins: ['es5'],
838 |     rules: {
839 |       'es5/no-arrow-functions': 'error'
840 |     }
841 |   }
842 |   ]
843 | }
844 | 


--------------------------------------------------------------------------------