├── .gitattributes
├── .eslintignore
├── generators
├── app
│ ├── templates
│ │ ├── static
│ │ │ └── .gitkeep
│ │ ├── src
│ │ │ ├── assets
│ │ │ │ ├── img
│ │ │ │ │ ├── .gitkeep
│ │ │ │ │ ├── alert-bg@2x.png
│ │ │ │ │ └── alert-bg@3x.png
│ │ │ │ ├── js
│ │ │ │ │ └── .gitkeep
│ │ │ │ ├── css
│ │ │ │ │ ├── vars.less
│ │ │ │ │ ├── reset.css
│ │ │ │ │ ├── common.css
│ │ │ │ │ ├── mixins.less
│ │ │ │ │ ├── animation.css
│ │ │ │ │ └── normalize.css
│ │ │ │ └── logo.png
│ │ │ ├── mixins
│ │ │ │ ├── .gitkeep
│ │ │ │ └── toggle.js
│ │ │ ├── store
│ │ │ │ ├── actions.js
│ │ │ │ ├── getters.js
│ │ │ │ ├── mutations.js
│ │ │ │ ├── types.js
│ │ │ │ ├── modules
│ │ │ │ │ └── list.js
│ │ │ │ └── index.js
│ │ │ ├── filters
│ │ │ │ ├── toHyphenate.js
│ │ │ │ └── toCameCase.js
│ │ │ ├── directions
│ │ │ │ └── focus.js
│ │ │ ├── skeleton.entry.js
│ │ │ ├── modules
│ │ │ │ └── index
│ │ │ │ │ ├── index.vue
│ │ │ │ │ ├── index.html
│ │ │ │ │ └── _index.js
│ │ │ ├── eventBus
│ │ │ │ └── index.js
│ │ │ ├── config
│ │ │ │ ├── apis.js
│ │ │ │ ├── env.js
│ │ │ │ └── axiosConfig.js
│ │ │ ├── router
│ │ │ │ └── index.js
│ │ │ ├── components
│ │ │ │ ├── global.js
│ │ │ │ ├── skeleton.vue
│ │ │ │ ├── Toast.vue
│ │ │ │ ├── textCarousel.vue
│ │ │ │ ├── vwDemo.vue
│ │ │ │ ├── Loading.vue
│ │ │ │ ├── Alert.vue
│ │ │ │ └── Confirm.vue
│ │ │ ├── utils
│ │ │ │ ├── types.js
│ │ │ │ ├── storage.js
│ │ │ │ └── utils.js
│ │ │ ├── plugins
│ │ │ │ ├── confirm
│ │ │ │ │ └── index.js
│ │ │ │ ├── loading
│ │ │ │ │ └── index.js
│ │ │ │ ├── alert
│ │ │ │ │ └── index.js
│ │ │ │ └── toast
│ │ │ │ │ └── index.js
│ │ │ ├── _main.js
│ │ │ ├── pages
│ │ │ │ └── _HelloWorld.vue
│ │ │ └── App.vue
│ │ ├── .eslintignore
│ │ ├── config
│ │ │ ├── test.env.js
│ │ │ ├── prod.env.js
│ │ │ ├── dll.libs.dependencies.js
│ │ │ ├── dev.env.js
│ │ │ └── _index.js
│ │ ├── build
│ │ │ ├── logo.png
│ │ │ ├── ommit-css-webpack-plugin.js
│ │ │ ├── vue-loader.conf.js
│ │ │ ├── webpack.skeleton.conf.js
│ │ │ ├── build.js
│ │ │ ├── check-versions.js
│ │ │ ├── webpack.dll.conf.js
│ │ │ ├── _utils.js
│ │ │ ├── _webpack.dev.conf.js
│ │ │ ├── _webpack.test.conf.js
│ │ │ ├── _webpack.base.conf.js
│ │ │ └── _webpack.prod.conf.js
│ │ ├── .editorconfig
│ │ ├── _gitignore
│ │ ├── .babelrc
│ │ ├── skeleton.js
│ │ ├── jsdoc.conf.json
│ │ ├── _index.html
│ │ ├── .eslintrc.js
│ │ ├── _postcssrc.js
│ │ ├── CHANGELOG.md
│ │ ├── _package.json
│ │ ├── README.md
│ │ └── dist
│ │ │ └── skeleton.json
│ └── index.js
├── mpage
│ ├── templates
│ │ └── src
│ │ │ └── modules
│ │ │ └── index
│ │ │ ├── _index.vue
│ │ │ ├── _index.html
│ │ │ └── _index.js
│ └── index.js
├── page
│ ├── templates
│ │ └── src
│ │ │ ├── pages
│ │ │ └── demo.vue
│ │ │ └── router
│ │ │ └── index.js
│ └── index.js
├── publicPath
│ ├── index.js
│ └── templates
│ │ └── config
│ │ └── index.js
└── imagePublicPath
│ ├── index.js
│ └── templates
│ └── config
│ └── index.js
├── screenshots
├── a.gif
├── a2.gif
├── a3.gif
├── a4.gif
└── a5.gif
├── .travis.yml
├── .editorconfig
├── .yo-rc.json
├── .gitignore
├── __tests__
└── app.js
├── LICENSE
├── package.json
└── README.md
/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto
2 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | coverage
2 | **/templates
3 |
--------------------------------------------------------------------------------
/generators/app/templates/static/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/generators/app/templates/src/assets/img/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/generators/app/templates/src/assets/js/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/generators/app/templates/src/mixins/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/generators/app/templates/src/store/actions.js:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/generators/app/templates/src/store/getters.js:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/generators/app/templates/src/store/mutations.js:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/generators/app/templates/src/store/types.js:
--------------------------------------------------------------------------------
1 | export const SET_INFO = 'SET_INFO'
--------------------------------------------------------------------------------
/generators/app/templates/src/assets/css/vars.less:
--------------------------------------------------------------------------------
1 | @white: #fff;
2 | @gray: #666;
3 |
4 |
--------------------------------------------------------------------------------
/screenshots/a.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/501981732/generator-easy-vue/HEAD/screenshots/a.gif
--------------------------------------------------------------------------------
/generators/app/templates/.eslintignore:
--------------------------------------------------------------------------------
1 | /build/
2 | node_modules/*
3 | /config/
4 | /dist/
5 | /*.js
6 |
--------------------------------------------------------------------------------
/screenshots/a2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/501981732/generator-easy-vue/HEAD/screenshots/a2.gif
--------------------------------------------------------------------------------
/screenshots/a3.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/501981732/generator-easy-vue/HEAD/screenshots/a3.gif
--------------------------------------------------------------------------------
/screenshots/a4.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/501981732/generator-easy-vue/HEAD/screenshots/a4.gif
--------------------------------------------------------------------------------
/screenshots/a5.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/501981732/generator-easy-vue/HEAD/screenshots/a5.gif
--------------------------------------------------------------------------------
/generators/app/templates/config/test.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 | NODE_ENV: '"test"'
4 | }
5 |
--------------------------------------------------------------------------------
/generators/app/templates/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 | NODE_ENV: '"production"'
4 | }
5 |
--------------------------------------------------------------------------------
/generators/app/templates/src/filters/toHyphenate.js:
--------------------------------------------------------------------------------
1 | export const hyphenate = val => val.replace(/([A-Z])/g, "-$1").toLowerCase()
2 |
--------------------------------------------------------------------------------
/generators/app/templates/build/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/501981732/generator-easy-vue/HEAD/generators/app/templates/build/logo.png
--------------------------------------------------------------------------------
/generators/app/templates/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/501981732/generator-easy-vue/HEAD/generators/app/templates/src/assets/logo.png
--------------------------------------------------------------------------------
/generators/app/templates/src/directions/focus.js:
--------------------------------------------------------------------------------
1 | export const focus = {
2 | inserted: function(el) {
3 | el.focus();
4 | }
5 | };
6 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - v11
4 | - v10
5 | - v8
6 | - v6
7 | - v4
8 | after_script: cat ./coverage/lcov.info | coveralls
9 |
--------------------------------------------------------------------------------
/generators/app/templates/src/assets/img/alert-bg@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/501981732/generator-easy-vue/HEAD/generators/app/templates/src/assets/img/alert-bg@2x.png
--------------------------------------------------------------------------------
/generators/app/templates/src/assets/img/alert-bg@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/501981732/generator-easy-vue/HEAD/generators/app/templates/src/assets/img/alert-bg@3x.png
--------------------------------------------------------------------------------
/generators/app/templates/config/dll.libs.dependencies.js:
--------------------------------------------------------------------------------
1 | // 工程组件，用于提前编译 dll目录
2 | const lib = {
3 | dll_vendor: ['vue/dist/vue.esm.js', 'vue-router']
4 |
5 | }
6 |
7 | module.exports = lib;
8 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 4
7 | end_of_line = lf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
--------------------------------------------------------------------------------
/.yo-rc.json:
--------------------------------------------------------------------------------
1 | {
2 | "generator-node": {
3 | "promptValues": {
4 | "authorName": "wangmeng",
5 | "authorEmail": "501981732@qq.com",
6 | "authorUrl": "https://github.com/501981732"
7 | }
8 | }
9 | }
--------------------------------------------------------------------------------
/generators/app/templates/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 |
--------------------------------------------------------------------------------
/generators/app/templates/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 4
7 | end_of_line = lf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | /dist/
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Editor directories and files
9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 |
--------------------------------------------------------------------------------
/generators/app/templates/_gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | /dist/
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Editor directories and files
9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 |
--------------------------------------------------------------------------------
/generators/app/templates/src/mixins/toggle.js:
--------------------------------------------------------------------------------
1 | export const toggle = {
2 | data() {
3 | return {
4 | show: false
5 | }
6 | },
7 | methods: {
8 | toggleShow() {
9 | this.show = !this.show
10 | }
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/generators/app/templates/src/skeleton.entry.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import skeleton from './components/skeleton.vue'
3 |
4 | console.log('Skeleton...')
5 |
6 | export default new Vue({
7 | components: {
8 | skeleton
9 | },
10 | template: ''
11 | })
12 |
--------------------------------------------------------------------------------
/generators/app/templates/src/modules/index/index.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | hello index
10 |
11 |
12 |
13 |
20 |
--------------------------------------------------------------------------------
/generators/mpage/templates/src/modules/index/_index.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | hello index
10 |
11 |
12 |
13 |
20 |
--------------------------------------------------------------------------------
/generators/app/templates/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["env", {
4 | "modules": false,
5 | "targets": {
6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
7 | },
8 | "useBuiltIns": true,
9 | }],
10 | "stage-2"
11 | ],
12 | "plugins": ["transform-vue-jsx", "transform-runtime"]
13 | }
14 |
--------------------------------------------------------------------------------
/generators/page/templates/src/pages/demo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
hello <%= page%>
4 |
5 |
6 |
7 |
19 |
20 |
22 |
--------------------------------------------------------------------------------
/generators/app/templates/src/eventBus/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | const EventBus = new Vue();
3 | /**
4 | * 事件总线
5 | * @example
6 | * this.$bus.$emit("someEvent", someData)
7 | * this.$bus.$on("someEvent", (v) => {console.log(v)})
8 | *
9 | */
10 | Object.defineProperties(Vue.prototype, {
11 | $bus: {
12 | get: function () {
13 | return EventBus
14 | }
15 | }
16 | })
17 |
--------------------------------------------------------------------------------
/__tests__/app.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | const path = require('path');
3 | const assert = require('yeoman-assert');
4 | const helpers = require('yeoman-test');
5 |
6 | describe('generator-easy-vue:app', () => {
7 | beforeAll(() => {
8 | return helpers
9 | .run(path.join(__dirname, '../generators/app'))
10 | .withPrompts({ someAnswer: true });
11 | });
12 |
13 | it('creates files', () => {
14 | assert.file(['dummyfile.txt']);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/generators/app/templates/src/store/modules/list.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 分模块处理vuex
3 | */
4 | import * as types from '../types'
5 |
6 | const state = {
7 | info: {}
8 | }
9 |
10 | const actions = {
11 |
12 | }
13 |
14 | const getters = {
15 | info: state => state.info,
16 | }
17 |
18 | const mutations = {
19 | [types.SET_INFO](state, payload) {
20 | state.info = payload
21 | },
22 | }
23 |
24 | export default {
25 | state,
26 | actions,
27 | getters,
28 | mutations
29 | }
30 |
--------------------------------------------------------------------------------
/generators/app/templates/src/filters/toCameCase.js:
--------------------------------------------------------------------------------
1 | export const cameCase = val => {
2 | let reg = /-(\w)/g;
3 | return reg.replace(o, function(a, b) {
4 | // b为子项；
5 | return b.toUpperCase()
6 | })
7 | }
8 |
9 | export const caseCase2 = val => {
10 |
11 | let arr = str.split("-");
12 | for (let i = 1, len = arr.length; i < len; i++) {
13 | arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substring(1)
14 | }
15 | return arr.join('')
16 | }
17 |
--------------------------------------------------------------------------------
/generators/app/templates/src/store/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Vuex from 'vuex'
3 | import list from './modules/list'
4 | import createLogger from 'vuex/dist/logger'
5 | import * as actions from './actions.js'
6 | import * as mutations from './mutations.js'
7 |
8 | Vue.use(Vuex)
9 |
10 | const debug = process.env.NODE_ENV !== 'production'
11 |
12 | export default new Vuex.Store({
13 | modules: {
14 | list,
15 | },
16 | actions,
17 | mutations,
18 | strict: debug,
19 | plugins: debug ? [createLogger()] : []
20 | })
--------------------------------------------------------------------------------
/generators/app/templates/build/ommit-css-webpack-plugin.js:
--------------------------------------------------------------------------------
1 | module.exports = class OmmitCSSPlugin {
2 | constructor() {}
3 |
4 | apply(compiler) {
5 | compiler.plugin('compilation', (compilation) => {
6 | compilation.plugin(
7 | 'html-webpack-plugin-alter-asset-tags',
8 | (args, cb) => {
9 | args.head = args.head.filter((link) => link.attributes.rel !== 'stylesheet');
10 | cb(null, args);
11 | }
12 | );
13 | });
14 | }
15 | }
--------------------------------------------------------------------------------
/generators/app/templates/src/config/apis.js:
--------------------------------------------------------------------------------
1 | import ax from './axiosConfig.js'
2 |
3 | let url = {},
4 | postUrls = {};
5 |
6 | if (process.env.NODE_ENV === "development") {
7 | url = {
8 | filter: "",
9 | };
10 | } else if (process.env.NODE_ENV === "test") {
11 | url = {
12 | filter: "",
13 | };
14 | } else if (process.env.NODE_ENV === "production") {
15 | url = {
16 | filter: "",
17 | };
18 | }
19 |
20 | const filter = (data) => ax.get(url.filter,{params:data})
21 |
22 | export default {
23 | filter,
24 | }
25 |
--------------------------------------------------------------------------------
/generators/mpage/templates/src/modules/index/_index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | <%= projectName %><% if(dns) {%>
8 |
9 | <% for(var i of dns.split(',')){ %><% }%><%}%>
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/generators/app/templates/skeleton.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs')
2 | const htmlMinifier = require('html-minifier')
3 | const { resolve } = require('path')
4 |
5 | const createBundleRenderer = require('vue-server-renderer').createBundleRenderer
6 |
7 | const renderer = createBundleRenderer(resolve(__dirname, './dist/skeleton.json'), {
8 | template: fs.readFileSync(resolve(__dirname, './index.html'), 'utf-8')
9 | })
10 |
11 | renderer.renderToString({}, (err, html) => {
12 | html = htmlMinifier.minify(html, {
13 | collapseWhitespace: true,
14 | minifyCSS: true
15 | })
16 | fs.writeFileSync('index.html', html, 'utf-8')
17 | })
--------------------------------------------------------------------------------
/generators/page/templates/src/router/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Router from 'vue-router'
3 | import { routerBaseUrl } from '@/config/env.js'
4 | import HelloWorld from '@/pages/HelloWorld'
5 | // const HelloWorld = () => import('@/pages/HelloWorld')
6 |
7 | const <%= page%> = () => import('@/pages/<%= page%>')
8 |
9 | Vue.use(Router)
10 |
11 | export default new Router({
12 | mode: "hash",
13 | base: routerBaseUrl,
14 | routes: [
15 | {
16 | path: '/',
17 | name: 'HelloWorld',
18 | component: HelloWorld
19 | },{
20 | path: '/<%= page%>',
21 | name: '<%= page%>',
22 | component: <%= page%>
23 | }
24 | ]
25 | })
26 |
--------------------------------------------------------------------------------
/generators/app/templates/src/config/env.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 配置线上环境和线下环境切换
3 | * baseUrl 域名地址
4 | * routerBaseUrl 若开启history模式则线上补全路径
5 | * @example url='//zp.58.com/yy/2018/employerbrandselection/main' baseUrl='//zp.58.com' routerBaseUrl='/yy/2018/employerbrandselection/main'
6 | *
7 | */
8 |
9 | let baseUrl = "";
10 | let routerBaseUrl = "";
11 | if (process.env.NODE_ENV == "development") {
12 | // baseUrl = ''
13 | } else if (process.env.NODE_ENV == "test") {
14 | // 测试环境->代理proxy
15 | // baseUrl = "";
16 | // routerBaseUrl = "";
17 | } else if (process.env.NODE_ENV == "production") {
18 | baseUrl = "";
19 | routerBaseUrl = "";
20 | }
21 | export { baseUrl, routerBaseUrl };
22 |
--------------------------------------------------------------------------------
/generators/app/templates/build/vue-loader.conf.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const utils = require('./utils')
3 | const config = require('../config')
4 | const isProduction = process.env.NODE_ENV === 'production'
5 | const sourceMapEnabled = isProduction
6 | ? config.build.productionSourceMap
7 | : config.dev.cssSourceMap
8 |
9 | module.exports = {
10 | loaders: utils.cssLoaders({
11 | sourceMap: sourceMapEnabled,
12 | extract: isProduction
13 | // extract: true
14 | }),
15 | cssSourceMap: sourceMapEnabled,
16 | cacheBusting: config.dev.cacheBusting,
17 | transformToRequire: {
18 | video: ['src', 'poster'],
19 | source: 'src',
20 | img: 'src',
21 | image: 'xlink:href'
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/generators/app/templates/src/router/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Router from 'vue-router'
3 | import { routerBaseUrl } from '@/config/env.js'
4 | import HelloWorld from '@/pages/HelloWorld'
5 | // chunkname
6 | // const index = () => import( /* webpackChunkName: "index" */ '@/pages/index')
7 |
8 | Vue.use(Router)
9 |
10 | export default new Router({
11 | mode: "hash",
12 | base: routerBaseUrl,
13 | scrollBehavior(to, from, savedPosition) {
14 | if (savedPosition) {
15 | return savedPosition
16 | } else {
17 | return { x: 0, y: 0 }
18 | }
19 | },
20 | routes: [{
21 | path: '/',
22 | name: 'HelloWorld',
23 | component: HelloWorld,
24 | meta: {
25 | zIndex: 1
26 | }
27 | }]
28 | })
29 |
--------------------------------------------------------------------------------
/generators/mpage/templates/src/modules/index/_index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import <%=mpage%> from './<%=mpage%>.vue'
3 | import router from '@/router'
4 | import axios from 'axios'
5 | // import store from '@/store/'
6 | // import FastClick from 'fastclick'
7 |
8 | Vue.config.productionTip = false
9 |
10 | import 'babel-polyfill' // API垫片
11 |
12 | // import '@/assets/css/reset.css'
13 | // import '@/assets/css/normalize.css'
14 |
15 | // import 'amfe-flexible/index.js'
16 | // FastClick.attach(document.body);
17 |
18 | // vue插件
19 | import AlertPlugin from '@/plugins/alert/index.js'
20 | Vue.use(AlertPlugin)
21 |
22 | // 自动注入components
23 | import '@/components/global.js'
24 |
25 | window.axios = axios
26 |
27 | /* eslint-disable no-new */
28 | new Vue({
29 | el: '#app',
30 | components: { <%=mpage%> },
31 | template: '<<%=mpage%>/>'
32 | })
33 |
34 |
--------------------------------------------------------------------------------
/generators/publicPath/index.js:
--------------------------------------------------------------------------------
1 | const chalk = require('chalk');
2 | const yosay = require('yosay');
3 | const Generator = require('yeoman-generator');
4 |
5 | module.exports = class extends Generator {
6 | // The name `constructor` is important here
7 | constructor(args, opts) {
8 | // Calling the super constructor is important so our generator is correctly set up
9 | super(args, opts);
10 | }
11 | initializing() {
12 | this.argument('publicPath', { type: String, required: true });
13 | }
14 | prompting() {}
15 |
16 | writing() {
17 | this.fs.copyTpl(
18 | this.templatePath('config/index.js'),
19 | this.destinationPath('config/index.js'),
20 | { publicPath: this.options.publicPath }
21 | );
22 | }
23 | install() {}
24 |
25 | end() {
26 | this.log(yosay(`Now the ${chalk.green(this.options.publicPath)} is ready!`))
27 | }
28 | };
--------------------------------------------------------------------------------
/generators/app/templates/src/components/global.js:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * 自动注入组件
4 | * require.context()
5 | * useage: import './components/global.js'
6 | * 引入组件时不再需要 import xx from 'xx' components:{xx}
7 | */
8 |
9 | import Vue from 'vue'
10 |
11 | function capitalizeFirstLetter(string) {
12 | return string.charAt(0).toUpperCase() + string.slice(1)
13 | }
14 |
15 | const requireComponent = require.context(
16 | '.', true, /.vue$/
17 | //找到components文件夹下以.vue命名的文件
18 |
19 | )
20 |
21 | requireComponent.keys().forEach(fileName => {
22 | const componentConfig = requireComponent(fileName)
23 | const componentName = capitalizeFirstLetter(
24 | fileName.replace( /(.*)(\/)/, '').replace(/.\w+$/, '')
25 | //因为得到的filename格式是: './xxx.vue' './xxx/xxx.vue', 所以这里我们去掉头和尾，只保留真正的文件名
26 | )
27 |
28 | Vue.component(componentName, componentConfig.default || componentConfig)
29 |
30 | })
--------------------------------------------------------------------------------
/generators/imagePublicPath/index.js:
--------------------------------------------------------------------------------
1 | const chalk = require('chalk');
2 | const yosay = require('yosay');
3 | const Generator = require('yeoman-generator');
4 |
5 | module.exports = class extends Generator {
6 | // The name `constructor` is important here
7 | constructor(args, opts) {
8 | // Calling the super constructor is important so our generator is correctly set up
9 | super(args, opts);
10 | }
11 | initializing() {
12 | this.argument('imagePublicPath', { type: String, required: true });
13 | }
14 | prompting() {}
15 |
16 | writing() {
17 | this.fs.copyTpl(
18 | this.templatePath('config/index.js'),
19 | this.destinationPath('config/index.js'),
20 | { imagePublicPath: this.options.imagePublicPath }
21 | );
22 | }
23 | install() {}
24 |
25 | end() {
26 | this.log(yosay(`Now the ${chalk.green(this.options.imagePublicPath)} is ready!`))
27 | }
28 | };
--------------------------------------------------------------------------------
/generators/app/templates/jsdoc.conf.json:
--------------------------------------------------------------------------------
1 | {
2 | "tags": {
3 | "allowUnknownTags": true
4 | },
5 | "source": {
6 | "include": ["./src/"],
7 | "exclude": [],
8 | "includePattern": "\\.(vue|js)$",
9 | "excludePattern": "(^|\\/|\\\\)_"
10 | },
11 | "plugins": [
12 | "node_modules/jsdoc-vue"
13 | // "plugins/markdown",
14 | // "plugins/summarize"
15 | ],
16 | "markdown": {
17 |
18 | },
19 | "templates": {
20 | "cleverLinks": false,
21 | "monospaceLinks": false,
22 | "default": {
23 | "outputSourceFiles": true
24 | }
25 | },
26 | "opts": {
27 | "template": "templates/default",
28 | "encoding": "utf8",
29 | "destination": "./jsdoc/",
30 | "recurse": true,
31 | "package": "./package.json",
32 | "reademe": "./READEME.md"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/generators/app/templates/_index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | <%= projectName %><% if(dns) {%>
11 |
12 | <% for(var i of dns.split(',')){ %><% }%><%}%><% if(dns) {%>
13 | <% for(var i of dns.split(',')){ %><% }%><%}%>
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/generators/app/templates/.eslintrc.js:
--------------------------------------------------------------------------------
1 | // https://eslint.org/docs/user-guide/configuring
2 |
3 | module.exports = {
4 | root: true,
5 | parserOptions: {
6 | parser: 'babel-eslint'
7 | },
8 | env: {
9 | browser: true,
10 | },
11 | extends: [
12 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
13 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
14 | 'plugin:vue/essential',
15 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md
16 | // 'standard' // 如果想用官方推荐的standard
17 | ],
18 | // required to lint *.vue files
19 | plugins: [
20 | 'vue'
21 | ],
22 | // add your custom rules here
23 | rules: {
24 | // allow async-await
25 | 'generator-star-spacing': 'off',
26 | // allow debugger during development
27 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/generators/app/templates/src/modules/index/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | <%= projectName %><% if(dns) {%>
8 |
9 | <% for(var i of dns.split(',')){ %><% }%><%}%><% if(dns) {%>
10 | <% for(var i of dns.split(',')){ %><% }%><%}%>
11 |
12 |
13 |
14 |
15 |
16 |
17 | <% if(layout === 'vw'){ %>
18 |
19 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/generators/page/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | const chalk = require('chalk');
3 | const yosay = require('yosay');
4 | const Generator = require('yeoman-generator');
5 |
6 | module.exports = class extends Generator {
7 | // The name `constructor` is important here
8 | constructor(args, opts) {
9 | // Calling the super constructor is important so our generator is correctly set up
10 | super(args, opts);
11 | }
12 | initializing() {
13 | this.argument('page', { type: String, required: true });
14 | }
15 | prompting() {}
16 |
17 | writing() {
18 | this.fs.copyTpl(
19 | this.templatePath('src/pages/demo.vue'),
20 | this.destinationPath('src/pages/' + this.options.page + '.vue'),
21 | { page: this.options.page }
22 | );
23 | this.fs.copyTpl(
24 | this.templatePath('src/router/index.js'),
25 | this.destinationPath('src/router/index.js'),
26 | { page: this.options.page }
27 | );
28 | }
29 | install() {}
30 |
31 | end() {
32 | this.log(yosay(`Now the page ${chalk.green(this.options.page)} is ready!`))
33 | }
34 | };
35 |
--------------------------------------------------------------------------------
/generators/app/templates/src/modules/index/_index.js:
--------------------------------------------------------------------------------
1 |
2 | import Vue from 'vue'
3 | import Index from './index.vue'
4 | import axios from 'axios'
5 | <% if(vuex) {%>
6 | import store from '@/store/'
7 | <% }%><% if(layout === 'rem' || layout === 'vw') {%>
8 | import FastClick from 'fastclick'
9 | <% }%>
10 |
11 | Vue.config.productionTip = false
12 |
13 | import 'babel-polyfill' // API垫片
14 |
15 | <% if(reset === 'reset.css') {%>
16 | import '@/assets/css/reset.css'
17 | <% } else if (reset === 'normalize.css') {%>
18 | import '@/assets/css/normalize.css'
19 | <% }%>
20 | <% if(layout === 'rem') {%>
21 | // REM布局方案 OR vw布局
22 | import 'amfe-flexible/index.js'
23 | FastClick.attach(document.body);
24 | <% } else if (layout === 'vw') {%>
25 | FastClick.attach(document.body);
26 | <% }%>
27 | // vue插件
28 | import AlertPlugin from '@/plugins/alert/index.js'
29 | Vue.use(AlertPlugin)
30 |
31 | // 自动注入components
32 | import '@/components/global.js'
33 |
34 | window.axios = axios
35 |
36 | /* eslint-disable no-new */
37 | new Vue({
38 | el: '#app',<% if(vuex) {%>
39 | store,<% }%>
40 | components: { Index },
41 | template: ''
42 | })
43 |
44 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2018 wangmeng <501981732@qq.com> (https://github.com/501981732)
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 |
--------------------------------------------------------------------------------
/generators/app/templates/src/config/axiosConfig.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | import vue from 'vue'
3 | import { baseUrl } from './env.js'
4 | import qs from 'qs'
5 | import Toast from '@/plugins/toast/index.js'
6 | import Loading from '@/plugins/loading/index.js'
7 | vue.use(Toast)
8 | vue.use(Loading)
9 |
10 | const ax = axios.create({
11 | baseURL: baseUrl,
12 | timeout: 10000,
13 | withCredentials: true // 允许携带cookie
14 | })
15 |
16 | // 添加请求拦截器
17 | ax.interceptors.request.use(function(config) {
18 | if (config.method === 'post') {
19 | config.data = qs.stringify(config.data);
20 | }
21 | return config;
22 | }, function(error) {
23 | return Promise.reject(error);
24 | });
25 |
26 | // 添加响应拦截器
27 | ax.interceptors.response.use(function(response) {
28 | if (process.env.NODE_ENV == 'development') {
29 | console.log(response)
30 | }
31 | return response;
32 | }, function(error) {
33 | if (error.message.includes('timeout')) { // 判断请求异常信息中是否含有超时timeout字符串
34 | console.log("错误回调", error)
35 | vue.$x.loading.hide()
36 | vue.$x.toast('请求超时请稍后再试')
37 | return Promise.reject(error); // reject这个错误信息
38 | }
39 | });
40 | export default ax
41 |
--------------------------------------------------------------------------------
/generators/app/templates/src/utils/types.js:
--------------------------------------------------------------------------------
1 | export const isArray = val => !!val && Array.isArray(val);
2 |
3 | export const isBoolean = val => typeof val === "boolean";
4 |
5 | export const isFunction = val => val && typeof val === "function";
6 |
7 | export const isNumber = val => typeof val === "number";
8 |
9 | export const isString = val => typeof val === "string";
10 |
11 | export const isSymbol = val => typeof val === "symbol";
12 |
13 | export const inBrowser = typeof window !== "undefined";
14 |
15 | export const UA = inBrowser && window.navigator.userAgent.toLowerCase();
16 |
17 | export const isIE = UA && /msie|trident/.test(UA);
18 |
19 | export const isIE9 = UA && UA.indexOf("msie 9.0") > 0;
20 |
21 | export const isEdge = UA && UA.indexOf("edge/") > 0;
22 |
23 | export const isAndroid = UA && UA.indexOf("android") > 0;
24 |
25 | export const isIOS = UA && /iphone|ipad|ipod|ios/.test(UA);
26 |
27 | export const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge;
28 |
29 | export const isPhantomJS = UA && /phantomjs/.test(UA);
30 |
31 | export const isInAPP = UA && /wuba/.test(UA);
32 |
33 | export const isWeiXin = UA && /micromessenger/.test(UA);
34 |
35 | export const is360zhushou = UA && /360appstore/.test(UA);
36 |
--------------------------------------------------------------------------------
/generators/app/templates/build/webpack.skeleton.conf.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const webpack = require('webpack')
3 | const nodeExternals = require('webpack-node-externals')
4 | const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
5 | // const VueLoaderPlugin = require('vue-loader/lib/plugin')
6 |
7 | module.exports = {
8 | target: 'node',
9 | entry: {
10 | skeleton: './src/skeleton.entry.js'
11 | },
12 | output: {
13 | path: path.resolve(__dirname, '../dist'),
14 | publicPath: '/dist/',
15 | filename: '[name].js',
16 | libraryTarget: 'commonjs2'
17 | },
18 | module: {
19 | rules: [
20 | {
21 | test: /\.css$/,
22 | use: [
23 | 'vue-style-loader',
24 | 'css-loader'
25 | ]
26 | },
27 | {
28 | test: /\.vue$/,
29 | loader: 'vue-loader'
30 | }
31 | ]
32 | },
33 | externals: nodeExternals({
34 | whitelist: /\.css$/
35 | }),
36 | resolve: {
37 | alias: {
38 | 'vue$': 'vue/dist/vue.esm.js'
39 | },
40 | extensions: ['*', '.js', '.vue', '.json']
41 | },
42 | plugins: [
43 | // new VueLoaderPlugin(),
44 | new VueSSRServerPlugin({
45 | filename: 'skeleton.json'
46 | })
47 | ]
48 | }
49 |
--------------------------------------------------------------------------------
/generators/app/templates/build/build.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | require('./check-versions')()
3 |
4 | process.env.NODE_ENV = 'production'
5 |
6 | const ora = require('ora')
7 | const rm = require('rimraf')
8 | const path = require('path')
9 | const chalk = require('chalk')
10 | const webpack = require('webpack')
11 | const config = require('../config')
12 | const webpackConfig = require('./webpack.prod.conf')
13 |
14 | const spinner = ora('building for production...')
15 | spinner.start()
16 |
17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
18 | if (err) throw err
19 | webpack(webpackConfig, (err, stats) => {
20 | spinner.stop()
21 | if (err) throw err
22 | process.stdout.write(stats.toString({
23 | colors: true,
24 | modules: false,
25 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
26 | chunks: false,
27 | chunkModules: false
28 | }) + '\n\n')
29 |
30 | if (stats.hasErrors()) {
31 | console.log(chalk.red(' Build failed with errors.\n'))
32 | process.exit(1)
33 | }
34 |
35 | console.log(chalk.cyan(' Build complete.\n'))
36 | console.log(chalk.yellow(
37 | ' Tip: built files are meant to be served over an HTTP server.\n' +
38 | ' Opening index.html over file:// won\'t work.\n'
39 | ))
40 | })
41 | })
42 |
--------------------------------------------------------------------------------
/generators/app/templates/src/components/skeleton.vue:
--------------------------------------------------------------------------------
1 |
2 |
11 |
12 |
13 |
64 |
--------------------------------------------------------------------------------
/generators/app/templates/build/check-versions.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const chalk = require('chalk')
3 | const semver = require('semver')
4 | const packageConfig = require('../package.json')
5 | const shell = require('shelljs')
6 |
7 | function exec (cmd) {
8 | return require('child_process').execSync(cmd).toString().trim()
9 | }
10 |
11 | const versionRequirements = [
12 | {
13 | name: 'node',
14 | currentVersion: semver.clean(process.version),
15 | versionRequirement: packageConfig.engines.node
16 | }
17 | ]
18 |
19 | if (shell.which('npm')) {
20 | versionRequirements.push({
21 | name: 'npm',
22 | currentVersion: exec('npm --version'),
23 | versionRequirement: packageConfig.engines.npm
24 | })
25 | }
26 |
27 | module.exports = function () {
28 | const warnings = []
29 |
30 | for (let i = 0; i < versionRequirements.length; i++) {
31 | const mod = versionRequirements[i]
32 |
33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
34 | warnings.push(mod.name + ': ' +
35 | chalk.red(mod.currentVersion) + ' should be ' +
36 | chalk.green(mod.versionRequirement)
37 | )
38 | }
39 | }
40 |
41 | if (warnings.length) {
42 | console.log('')
43 | console.log(chalk.yellow('To use this template, you must update following to modules:'))
44 | console.log()
45 |
46 | for (let i = 0; i < warnings.length; i++) {
47 | const warning = warnings[i]
48 | console.log(' ' + warning)
49 | }
50 |
51 | console.log()
52 | process.exit(1)
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/generators/mpage/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | const chalk = require('chalk');
3 | const yosay = require('yosay');
4 | const Generator = require('yeoman-generator');
5 |
6 | module.exports = class extends Generator {
7 | // The name `constructor` is important here
8 | constructor(args, opts) {
9 | // Calling the super constructor is important so our generator is correctly set up
10 | super(args, opts);
11 | }
12 | initializing() {
13 | this.argument('mpage', {
14 | type: String,
15 | required: true
16 | });
17 | }
18 | prompting() {}
19 |
20 | writing() {
21 | let list = [
22 | ['src/modules/index/_index.js', `src/modules/${this.options.mpage}/${this.options.mpage}.js`],
23 | ['src/modules/index/_index.vue', `src/modules/${this.options.mpage}/${this.options.mpage}.vue`],
24 | ['src/modules/index/_index.html', `src/modules/${this.options.mpage}/${this.options.mpage}.html`],
25 | ]
26 | list.forEach(item => {
27 | let fromFile = item[0];
28 | let toFile = item[1];
29 | this.fs.copyTpl(
30 | this.templatePath(fromFile),
31 | this.destinationPath(toFile),
32 | // 将配置参数带过去
33 | {
34 | mpage: this.options.mpage
35 | }
36 | );
37 | })
38 | }
39 | install() {}
40 |
41 | end() {
42 | this.log(yosay(`Now the ${chalk.green('mutil page')} is ready!`))
43 | }
44 | };
45 |
--------------------------------------------------------------------------------
/generators/app/templates/_postcssrc.js:
--------------------------------------------------------------------------------
1 | // https://github.com/michael-ciniawsky/postcss-load-config
2 | <%if(layout === 'rem') {%>
3 | module.exports = {
4 | "plugins": {
5 | "postcss-import": {},
6 | "postcss-url": {},
7 | // to edit target browsers: use "browserslist" field in package.json
8 | // css后处理器
9 | "autoprefixer": {}
10 | },
11 | // rem自动转换插件
12 | // 若想排除第三方库可以用基于postcss-px2rem 的postcss-px2rem-exclude or px2rem-exclude
13 | "postcss-pxtorem": {
14 | rootValue: 75,
15 | unitPrecision: 5,
16 | propList: ['*'],
17 | selectorBlackList: [],
18 | replace: true,
19 | mediaQuery: false,
20 | minPixelValue: 12
21 | }
22 | }
23 | <% }%><%if(layout === 'vw') {%>
24 | module.exports = {
25 | "plugins": {
26 | "postcss-import": {},
27 | "postcss-url": {},
28 | "postcss-aspect-ratio-mini": {}, // 处理元素容器宽高比
29 | "postcss-write-svg": {
30 | utf8: false
31 | },
32 | "postcss-preset-env": {
33 | stage: 2,
34 | },
35 | "postcss-px-to-viewport": {
36 | viewportWidth: 750, //视窗的宽度，对应的是我们设计稿的宽度，一般是750
37 | viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
38 | unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
39 | viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
40 | selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
41 | minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
42 | mediaQuery: false, // 允许在媒体查询中转换`px`
43 | exclude:/node_modules/i, //排除第三方库
44 | // selectorBlackList: ['delivery_alert_box']//黑名单
45 | },
46 | // "cssnano": { //压缩和清理CSS代码 cssnano和css-loader捆绑在一起，所以不需要自己加载它
47 | // preset: "advanced",
48 | // autoprefixer: false,
49 | // "postcss-zindex": false
50 | // },
51 | }
52 | }
53 | <% }%>
54 |
--------------------------------------------------------------------------------
/generators/app/templates/src/plugins/confirm/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @file Confirm 插件
3 | * @example
4 | * this.$x.confirm({
5 | * title:'提示1',
6 | * body: '1',
7 | * cancleText: '取消',
8 | * confirmText: '确定',
9 | * btnReverse: false, //按钮是否反正
10 | * useHTMLString: 'false' //是否使用动态HTML插入
11 | * }).then(res => {
12 | * console.log(res) //根据res判断是取消还是确定
13 | * })
14 | */
15 | import Vue from 'vue'
16 | import Confirm from '@/components/Confirm.vue'
17 |
18 | const defaultProps = {
19 |
20 | }
21 |
22 | const plugin = {
23 | install(vue, props = {}) {
24 | const ConfirmPlugin = vue.extend(Confirm)
25 | let $vm = new ConfirmPlugin({
26 | el: document.createElement('div')
27 | })
28 | document.body.appendChild($vm.$el)
29 |
30 | function confirm(options) {
31 | if ($vm.show) return
32 |
33 | if (typeof options === 'string') {
34 | options = {
35 | body: arguments[0]
36 | }
37 | }
38 |
39 | $vm = Object.assign($vm, defaultProps, props, options)
40 |
41 | $vm.show = true
42 |
43 | return new Promise((resolve, reject) => {
44 | $vm.$on('confirm',_ => {
45 | resolve(true)
46 | })
47 |
48 | $vm.$on('cancle', _ => {
49 | resolve(false)
50 | })
51 |
52 | })
53 | }
54 |
55 | if( !vue.$x) {
56 | vue.$x = {
57 | confirm
58 | }
59 | } else {
60 | vue.$x.confirm = confirm
61 | }
62 | vue.mixin({
63 | created: _ => {
64 | this.$x = vue.$x
65 | }
66 | })
67 | }
68 | }
69 | export default plugin
70 |
--------------------------------------------------------------------------------
/generators/app/templates/src/_main.js:
--------------------------------------------------------------------------------
1 | // The Vue build version to load with the `import` command
2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3 | import Vue from 'vue'
4 | import App from './App'
5 | import router from './router'
6 | <% if(vuex) {%>
7 | import store from '@/store/'
8 | <% }%><% if(layout === 'rem' || layout === 'vw') {%>
9 | import FastClick from 'fastclick'
10 | <% }%>
11 |
12 | import api from "@/config/apis.js";
13 |
14 | Vue.config.productionTip = false
15 |
16 | import 'babel-polyfill' // API垫片
17 |
18 | <% if(reset === 'reset.css') {%>
19 | import './assets/css/reset.css'
20 | <% } else if (reset === 'normalize.css') {%>
21 | import './assets/css/normalize.css'
22 | <% }%>
23 | import "./assets/css/animation.css";
24 | import "./assets/css/common.css";
25 |
26 | <% if(layout === 'rem') {%>
27 | // REM布局方案 OR vw布局
28 | import 'amfe-flexible/index.js'
29 | FastClick.attach(document.body);
30 | <% } else if (layout === 'vw') {%>
31 | FastClick.attach(document.body);
32 | <% }%>
33 | // 时间总线
34 | import '@/eventBus/index.js'
35 | /* eslint-disable no-unused-vars */
36 | // import vConsole from "vconsole";
37 | // const insvConsole = new vConsole();
38 |
39 | // 自动注入components
40 | import './components/global.js'
41 |
42 | // vue插件
43 | import AlertPlugin from "./plugins/alert/index.js";
44 | import ToastPlugin from "./plugins/toast/index.js";
45 | import ConformPlugin from "./plugins/confirm/index.js";
46 | import LoadingPlugin from "./plugins/loading/index.js";
47 |
48 | Vue.use(AlertPlugin);
49 | Vue.use(ToastPlugin);
50 | Vue.use(ConformPlugin);
51 | Vue.use(LoadingPlugin);
52 | // mount api
53 | Vue.prototype.$api = api;
54 |
55 |
56 | /* eslint-disable no-new */
57 | new Vue({
58 | el: '#app',
59 | router,<% if(vuex) {%>
60 | store,<% }%>
61 | components: { App },
62 | template: ''
63 | })
64 |
65 |
--------------------------------------------------------------------------------
/generators/app/templates/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ## Changelog
2 |
3 | #### todo
4 |
5 | - 非常棒的preload prefetch and prepack 相关插件不支持webpack3.X
6 |
7 | #### 0.4.0
8 |
9 | - 净化css,css tree shake, config/index配置purgecssPath
10 | - postcss插件替换 postcss-preset-env替代cssnext 默认stage：2
11 |
12 | #### 0.3.9
13 |
14 | - 路由动画
15 |
16 | #### 0.3.3
17 |
18 | - 增加测试环境：开发环境接口 -> **mock**,测试环境走 ->**proxy**,生产环境直接打包线上全路径
19 | - 增加eventBus事件总线，挂载vue 全局调用
20 | - 修改loading插件样式
21 | - 请求增加超时提示，超时时间为10s
22 | - vw布局插件升级postcss-px-to-viewport，支持排除node_momdules插件包,rem布局暂不支持可换插件postcss-px2rem-exclude or px2rem-exclude
23 |
24 | #### 0.3.0
25 |
26 | - 按需加载打包 chunkname
27 | - axios 优化挂载方式
28 | - less 变量 mixins全局引入，优化app.css体积 style-resources-loader
29 | - 增加常用css方案 渐变兼容IE9 一像素边框 二倍图三倍图 iphoneX适配 等
30 | - 增加常用组件库 插件库 toast comfirm alert loading等
31 | - 增加常用工具库
32 | - vw布局优化 去掉postcss-viewport-units 和viewport-units-buggyfill 给vw、vh、vmin和vmax做适配的操作。
33 | - 填补cssnano 自动计算z-index的坑
34 | - 优化css打包过大问题 优化css结构 全局引入less变量 mixins等 **style-resources-loader**
35 | ```
36 | vars.less //style-resources-loader 可在build/utils.js修改路径
37 | mixins.less //style-resources-loader
38 | common.css //index中import引入
39 | animation.css //index中import引入
40 | reset.css //index中import引入
41 | ```
42 | #### 0.2.4
43 |
44 | - 开启动态链接库dll并自动插入到模板中新增插件
45 | - DllPlugin,DllReferencePlugin,html-webpack-include-assets-plugin,cross-env
46 | - 动态链接库修改在config/dll.lib.dependencies.js 默认只用了vue，vue-router
47 | #### 0.2.2
48 |
49 | - 0.2.2 开启可配置dns预解析
50 |
51 | #### 0.2.1
52 |
53 | - 增加代码检测工作流
54 | - prettier统一代码格式
55 | - precommit自动美化格式以及修复代码
56 | - lint-staged 多人写作避免代码冲突，渐进式lint代码
57 | - 如果想要启用官方推荐的standard 可在.eslintrc.js中开启
58 |
59 |
60 | #### 0.2.0
61 |
62 | - 增加jsdoc配置 自动生成说明文档
63 | - 增加对.vue文件的文档解析 jsdoc jsdoc-vue
64 |
65 | #### 0.1.8
66 |
67 | - 增加一键生成多页面应用
68 |
69 | #### 0.1.4
70 |
71 | - 增加多页面配置
72 |
73 |
74 |
--------------------------------------------------------------------------------
/generators/app/templates/build/webpack.dll.conf.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 | const webpack = require("webpack");
3 | const libs = require("../config/dll.libs.dependencies.js");
4 | // const config = require("../config");
5 | // const AssetsPlugin = require("assets-webpack-plugin");
6 |
7 | const webpackConf = {
8 | entry: {
9 | ...libs
10 | },
11 |
12 | output: {
13 | // 输出的文件都放到 dist 目录下
14 | path: path.join(__dirname, "../static/libs"),
15 | // 输出的动态链接库的文件名称，[name] 代表当前动态链接库的名称，也就是 entry 中配置的 vue 等
16 | filename: "dll.[name].js",
17 | // 存放动态链接库的全局变量名称，例如对应 vue 来说就是 _dll_vue
18 | // 之所以在前面加上 _dll_ 是为了防止全局变量冲突
19 | // publicPath: process.env.NODE_ENV === "production" ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
20 | /**
21 | * output.library
22 | * 将会定义为 window.${output.library}
23 | * 在这次的例子中，将会定义为`window._dll_vue_library`
24 | */
25 | library: "_dll_[name]"
26 | },
27 | plugins: [
28 | new webpack.DllPlugin({
29 | // 动态链接库的全局变量名称，需要和 output.library 中保持一致
30 | // 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值
31 | // 例如 vue.manifest.json 中就有 "name": "_dll_vue"
32 | path: path.join(__dirname, "../static/libs", "[name].manifest.json"),
33 | name: "_dll_[name]"
34 | }),
35 | new webpack.DefinePlugin({
36 | 'process.env': {
37 | NODE_ENV: JSON.stringify(process.env.NODE_ENV)
38 | }
39 | }),
40 |
41 | // 插入到html中
42 | // new AssetsPlugin({
43 | // filename: "bundle-config.json",
44 | // path: path.join(__dirname, '..', 'config')
45 | // })
46 |
47 | ]
48 | };
49 | // 生产环境下压缩
50 | if (process.env.NODE_ENV === 'production') {
51 | webpackConf.plugins.unshift(new webpack.optimize.UglifyJsPlugin());
52 | }
53 | module.exports = webpackConf
54 |
--------------------------------------------------------------------------------
/generators/app/templates/src/plugins/loading/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @file loading 插件
3 | * @example
4 | * this.$x.loading.show('1')
5 | * this.$x.loading.show()
6 | * this.$x.loading.hide()
7 | */
8 | import Vue from "vue";
9 | import LoadingComponent from "@/components/Loading.vue";
10 | // const plagin = {
11 | // install(Vue, options) {
12 | // Vue.component(loading.name, loading) // 组件的name属性
13 | // // 类似通过 this.$xxx 方式调用插件的 其实只是挂载到原型上而已
14 | // // Vue.prototype.$xxx // 最终可以在任何地方通过 this.$xxx 调用
15 | // // 虽然没有明确规定用$开头 但是大家都默认遵守这个规定
16 | // }
17 | // }
18 | // export default plagin // 导出..
19 |
20 | export default {
21 | install(Vue, props) {
22 | const LoadingPlugin = Vue.extend(LoadingComponent);
23 |
24 | let $vm = new LoadingPlugin({
25 | el: document.createElement("div")
26 | });
27 |
28 | document.body.appendChild($vm.$el);
29 |
30 | // $vm.show = false;
31 | let loading = {
32 | show(text) {
33 | $vm.value = true;
34 |
35 | text && ($vm.text = text);
36 | },
37 | hide() {
38 | $vm.value = false;
39 | }
40 | };
41 | // const loading = {
42 | // show() {
43 | // if ($vm.show) return;
44 | // $vm.value = true;
45 | // },
46 | // hide() {
47 | // $vm.value = false;
48 | // }
49 | // };
50 | if (!Vue.$x) {
51 | Vue.$x = {
52 | loading
53 | };
54 | } else {
55 | Vue.$x.loading = loading;
56 | }
57 | // if (!Vue.$loading) {
58 | // Vue.$loading = loading;
59 | // }
60 | // Vue.prototype.$loading = Vue.$loading;
61 | Vue.mixin({
62 | created() {
63 | this.$x = Vue.$x;
64 | }
65 | });
66 | }
67 | };
68 |
--------------------------------------------------------------------------------
/generators/app/templates/src/pages/_HelloWorld.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
{{ msg }}
4 |
5 |
showAlert
6 |
showLoading
7 |
showToast
8 |
showConfirm
9 |
3 |
4 |
5 |
6 |
7 |
8 |
27 |
87 |
--------------------------------------------------------------------------------
/generators/app/templates/src/plugins/toast/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @file toast插件
3 | * @example
4 | * useage:
5 | * this.$x.toast('你好')
6 | * this.$x.toast({
7 | * message: '你好',
8 | * position: 'top',
9 | * duration: 2000,
10 | * toastClass: ''
11 | * })
12 | */
13 |
14 | import Vue from "vue";
15 | import Toast from "@/components/Toast";
16 |
17 | const defaultProps = {
18 | delayed: true,
19 | duration: 2000
20 | };
21 | const plugin = {
22 | install(vue, props = {}) {
23 | const ToastPlugin = Vue.extend(Toast);
24 | // toast实例 $vm
25 | let $vm = new ToastPlugin({
26 | el: document.createElement("div")
27 | });
28 | document.body.appendChild($vm.$el);
29 |
30 | function toast(options = {}) {
31 | // 如果当前显示 则return
32 | if ($vm.show) return;
33 |
34 | // 如果传参为字符串，则直接显示body 的文本
35 | if (typeof options === "string") {
36 | options = {
37 | message: arguments[0]
38 | };
39 | }
40 | //配置优选级： 默认配置 < 全局配置 < 实例配置
41 | //$vm为默认配置
42 | //install时传入的props为全局设置
43 | //调取toast时传入的options为实例配置
44 | $vm = Object.assign($vm, defaultProps, props, options);
45 | $vm.show = true;
46 | // 支持延时消失 默认支持
47 | if ($vm.delayed) {
48 | setTimeout(_ => {
49 | $vm.show = false;
50 | }, $vm.duration);
51 | }
52 | return new Promise((resolve, reject) => {
53 | $vm.$watch("show", val => {
54 | resolve();
55 | });
56 | });
57 | }
58 |
59 | if (!vue.$x) {
60 | vue.$x = {
61 | toast
62 | };
63 | } else {
64 | vue.$x.toast = toast;
65 | }
66 |
67 | vue.mixin({
68 | created: function() {
69 | this.$x = vue.$x;
70 | }
71 | });
72 | }
73 | };
74 |
75 | export default plugin;
76 |
--------------------------------------------------------------------------------
/generators/app/templates/src/components/Toast.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | {{ message }}
5 |
6 |
7 |
8 |
62 |
90 |
--------------------------------------------------------------------------------
/generators/app/templates/src/utils/storage.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 本地存储实现,封装localStorage和sessionStorage
3 | */
4 | let store = {
5 | storage: window.localStorage,
6 | session: {
7 | storage: window.sessionStorage
8 | }
9 | }
10 |
11 | const api = {
12 | set(key, val) {
13 | if (this.disabled) {
14 | return
15 | }
16 | if (val === undefined) {
17 | return this.remove(key)
18 | }
19 | this.storage.setItem(key, serialize(val))
20 | return val
21 | },
22 |
23 | get(key, def) {
24 | if (this.disabled) {
25 | return def
26 | }
27 | let val = deserialize(this.storage.getItem(key))
28 | return (val === undefined ? def : val)
29 | },
30 |
31 | has(key) {
32 | return this.get(key) !== undefined
33 | },
34 |
35 | remove(key) {
36 | if (this.disabled) {
37 | return
38 | }
39 | this.storage.removeItem(key)
40 | },
41 |
42 | clear() {
43 | if (this.disabled) {
44 | return
45 | }
46 | this.storage.clear()
47 | },
48 |
49 | getAll() {
50 | if (this.disabled) {
51 | return null
52 | }
53 | let ret = {}
54 | this.forEach((key, val) => {
55 | ret[key] = val
56 | })
57 | return ret
58 | },
59 |
60 | forEach(callback) {
61 | if (this.disabled) {
62 | return
63 | }
64 | for (let i = 0; i < this.storage.length; i++) {
65 | let key = this.storage.key(i)
66 | callback(key, this.get(key))
67 | }
68 | }
69 | }
70 |
71 | Object.assign(store, api)
72 |
73 | Object.assign(store.session, api)
74 |
75 | function serialize(val) {
76 | return JSON.stringify(val)
77 | }
78 |
79 | function deserialize(val) {
80 | if (typeof val !== 'string') {
81 | return undefined
82 | }
83 | try {
84 | return JSON.parse(val)
85 | } catch (e) {
86 | return val || undefined
87 | }
88 | }
89 |
90 | try {
91 | const testKey = '__caniuse_storage__'
92 | store.set(testKey, testKey)
93 | if (store.get(testKey) !== testKey) {
94 | store.disabled = true
95 | }
96 | store.remove(testKey)
97 | } catch (e) {
98 | store.disabled = true
99 | }
100 |
101 | export default store
102 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "generator-easy-vue",
3 | "version": "0.4.1",
4 | "description": "a generator for a super vue project ",
5 | "homepage": "https://github.com/501981732/easy-vue",
6 | "author": {
7 | "name": "wangmeng",
8 | "email": "501981732@qq.com",
9 | "url": "https://github.com/501981732"
10 | },
11 | "files": [
12 | "generators"
13 | ],
14 | "main": "generators/index.js",
15 | "keywords": [
16 | "generator",
17 | "vue",
18 | "skeleton",
19 | "vw",
20 | "rem",
21 | "MPA",
22 | "dll",
23 | "multi-page",
24 | "jsdoc",
25 | "yeoman-generator",
26 | "eslint",
27 | "prettier",
28 | "lint-staged",
29 | "husky"
30 | ],
31 | "devDependencies": {
32 | "yeoman-test": "^1.7.0",
33 | "yeoman-assert": "^3.1.0",
34 | "coveralls": "^3.0.0",
35 | "eslint": "^5.4.0",
36 | "prettier": "^1.11.1",
37 | "husky": "^0.14.3",
38 | "lint-staged": "^7.2.2",
39 | "eslint-config-prettier": "^3.0.1",
40 | "eslint-plugin-prettier": "^2.6.0",
41 | "eslint-config-xo": "^0.24.2",
42 | "jest": "^23.5.0"
43 | },
44 | "engines": {
45 | "npm": ">= 4.0.0"
46 | },
47 | "dependencies": {
48 | "yeoman-generator": "^2.0.1",
49 | "chalk": "^2.1.0",
50 | "yosay": "^2.0.1"
51 | },
52 | "jest": {
53 | "testEnvironment": "node"
54 | },
55 | "lint-staged": {
56 | "*.js": [
57 | "eslint --fix",
58 | "git add"
59 | ],
60 | "*.json": [
61 | "prettier --write",
62 | "git add"
63 | ]
64 | },
65 | "eslintConfig": {
66 | "extends": [
67 | "xo",
68 | "prettier"
69 | ],
70 | "env": {
71 | "jest": true,
72 | "node": true
73 | },
74 | "rules": {
75 | "prettier/prettier": [
76 | "error",
77 | {
78 | "singleQuote": true,
79 | "printWidth": 90
80 | }
81 | ]
82 | },
83 | "plugins": [
84 | "prettier"
85 | ]
86 | },
87 | "scripts": {
88 | "pretest": "eslint .",
89 | "precommit": "lint-staged",
90 | "test": "jest"
91 | },
92 | "repository": "501981732/generator-easy-vue",
93 | "license": "MIT"
94 | }
95 |
--------------------------------------------------------------------------------
/generators/app/templates/src/assets/css/reset.css:
--------------------------------------------------------------------------------
1 | /* http://meyerweb.com/eric/tools/css/reset/
2 | v2.0 | 20110126
3 | License: none (public domain)
4 | */
5 |
6 | html,
7 | body,
8 | div,
9 | span,
10 | applet,
11 | object,
12 | iframe,
13 | h1,
14 | h2,
15 | h3,
16 | h4,
17 | h5,
18 | h6,
19 | p,
20 | blockquote,
21 | pre,
22 | a,
23 | abbr,
24 | acronym,
25 | address,
26 | big,
27 | cite,
28 | code,
29 | del,
30 | dfn,
31 | em,
32 | img,
33 | ins,
34 | kbd,
35 | q,
36 | s,
37 | samp,
38 | small,
39 | strike,
40 | strong,
41 | sub,
42 | sup,
43 | tt,
44 | var,
45 | b,
46 | u,
47 | i,
48 | center,
49 | dl,
50 | dt,
51 | dd,
52 | ol,
53 | ul,
54 | li,
55 | fieldset,
56 | form,
57 | label,
58 | legend,
59 | table,
60 | caption,
61 | tbody,
62 | tfoot,
63 | thead,
64 | tr,
65 | th,
66 | td,
67 | article,
68 | aside,
69 | canvas,
70 | details,
71 | embed,
72 | figure,
73 | figcaption,
74 | footer,
75 | header,
76 | hgroup,
77 | menu,
78 | nav,
79 | output,
80 | ruby,
81 | section,
82 | summary,
83 | time,
84 | mark,
85 | audio,
86 | video {
87 | margin: 0;
88 | padding: 0;
89 | border: 0;
90 | font-size: 100%;
91 | font: inherit;
92 | vertical-align: baseline;
93 | }
94 |
95 | /* HTML5 display-role reset for older browsers */
96 | article,
97 | aside,
98 | details,
99 | figcaption,
100 | figure,
101 | footer,
102 | header,
103 | hgroup,
104 | menu,
105 | nav,
106 | section {
107 | display: block;
108 | }
109 |
110 | body {
111 | line-height: normal;
112 | -webkit-text-size-adjust: none;
113 | min-height: 100%;
114 | /*滚动不顺畅*/
115 | -webkit-overflow-scrolling: touch;
116 | font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans GB', "Microsoft YaHei", Helvetica, "\5B8B\4F53", sans-serif;
117 | /*避免动画撑开*/
118 | overflow-x: hidden;
119 | scroll-behavior: smooth;
120 | }
121 |
122 | ol,
123 | ul {
124 | list-style: none;
125 | }
126 |
127 | blockquote,
128 | q {
129 | quotes: none;
130 | }
131 |
132 | blockquote:before,
133 | blockquote:after,
134 | q:before,
135 | q:after {
136 | content: '';
137 | content: none;
138 | }
139 |
140 | table {
141 | border-collapse: collapse;
142 | border-spacing: 0;
143 | }
144 | /*补充*/
145 | input,
146 | button,
147 | textarea {
148 | border: 0;
149 | border-radius: 0;
150 | background: transparent;
151 | -webkit-appearance: none;
152 | box-sizing: border-box;
153 | outline: none;
154 | }
155 |
156 | button {
157 | outline: none;
158 | }
159 |
160 | a {
161 | text-decoration: none
162 | }
163 |
--------------------------------------------------------------------------------
/generators/app/templates/src/assets/css/common.css:
--------------------------------------------------------------------------------
1 | /*//公共样式文件，class或id命名必须以c-为前缀开头*/
2 |
3 | .clearfix:after,
4 | .clear:before {
5 | display: block;
6 | height: 0;
7 | visibility: hidden;
8 | clear: both;
9 | content: ".";
10 | }
11 |
12 | .clearfix {
13 | /*// overflow: auto;*/
14 | zoom: 1;
15 | }
16 |
17 | [clearfix]:after,
18 | [clear]:before {
19 | display: block;
20 | height: 0;
21 | visibility: hidden;
22 | clear: both;
23 | content: ".";
24 | }
25 |
26 | [clearfix] {
27 | /*// overflow: auto;*/
28 | zoom: 1;
29 | }
30 |
31 | .fl {
32 | float: left;
33 | }
34 |
35 | .fr {
36 | float: right;
37 | }
38 |
39 |
40 | .w-10 {
41 | width: 10px;
42 | }
43 |
44 |
45 | .h-10 {
46 | height: 10px;
47 | }
48 |
49 | .h-20 {
50 | height: 20px;
51 | }
52 |
53 |
54 | .mt-10 {
55 | margin-top: 10px;
56 | }
57 |
58 |
59 | .ml-10 {
60 | margin-left: 10px;
61 | }
62 |
63 | .pt-10 {
64 | padding-top: 10px;
65 | }
66 |
67 | .pl-10 {
68 | padding-left: 10px;
69 | }
70 |
71 | .search.icon {
72 | color: #000;
73 | position: absolute;
74 | margin-top: 2px;
75 | margin-left: 3px;
76 | width: 12px;
77 | height: 12px;
78 | border: solid 1px currentColor;
79 | border-radius: 100%;
80 | transform: rotate(-45deg);
81 | }
82 |
83 | .search.icon:before {
84 | content: "";
85 | position: absolute;
86 | top: 12px;
87 | left: 5px;
88 | height: 6px;
89 | width: 1px;
90 | background-color: currentColor;
91 | }
92 |
93 | /*// 超出部分...*/
94 | .ellipsis {
95 | overflow: hidden;
96 | text-overflow: ellipsis;
97 | white-space: nowrap;
98 | }
99 |
100 | /*// 垂直居中*/
101 | .center_table {
102 | display: table;
103 | }
104 |
105 | .center_cell {
106 | display: table-cell;
107 | vertical-align: middle;
108 | text-align: center;
109 | }
110 |
111 | .no-scrollbar {
112 | &::-webkit-scrollbar {
113 | display: none;
114 | }
115 | }
116 | /*// 蒙层*/
117 | .c-mask {
118 | position: fixed;
119 | top: 0;
120 | left: 0;
121 | bottom: 0;
122 | right: 0;
123 | height: 100%;
124 | background: rgba(0, 0, 0, .7);
125 | z-index: 1000;
126 | }
127 | /*// 蒙层box居中*/
128 | .c-center-box {
129 | position: fixed;
130 | top: 50%;
131 | left: 50%;
132 | transform: translate(-50%, -50%);
133 | width: 80%;
134 | z-index: 1001;
135 | text-align: center;
136 | }
137 |
138 | .gpu {
139 | transform: translateZ(0);
140 | }
141 | .iphoneX {
142 | /*meta viewport-fit=cover*/
143 | box-sizing: content-box;
144 | padding-bottom: constant(safe-area-inset-bottom);
145 | padding-bottom: env(safe-area-inset-bottom);
146 | }
147 |
148 |
--------------------------------------------------------------------------------
/generators/app/templates/src/components/textCarousel.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | {{ text }}
6 |
7 |
8 |
9 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
4 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
4 |
5 |
6 |
{{ title }}
7 |
8 | {{ subtitle }}
9 |
10 |
11 | {{ body }}
12 |
13 |
18 |
21 |
22 |
23 |
25 |
26 |
4 |
5 |
6 |
9 |
10 |
{{ body }}
11 |
12 |
13 |
30 |
32 |
33 |
92 |
93 | > 初始化骨架屏
94 |
95 | 
96 |
97 | > 自动生成页面
98 |
99 | 
100 |
101 | > 骨架屏效果
102 |
103 | 
104 |
105 | ## Installation
106 |
107 | ```bash
108 | npm install -g yo
109 | npm install -g generator-easy-vue
110 | ```
111 |
112 | Then generate your new project:
113 |
114 | ```base
115 | yo easy-vue 一键生成可配置项目
116 | # install dependencies
117 | npm install or yarn install
118 |
119 | # 生成骨架屏（仅需要运行一次！）
120 | npm run skeleton
121 |
122 | # 生成开发环境下dll
123 | npm run dll:dev
124 |
125 | # 生成生产环境下dll
126 | npm run dll:build
127 |
128 | # eslint 代码检测
129 | npm run eslint
130 |
131 | # eslint 代码修复
132 | npm run eslint:fix
133 |
134 | # 代码格式化 (多人协作不建议使用，git commit 自动美化 eslint:fix自己修改部分的代码)
135 | npm run prettier
136 |
137 | #生成代码文档（jsdoc格式注释代码）
138 | npm run jsdoc
139 |
140 | # serve with hot reload at localhost:8080(自动 dll开发环境代码，并insert到html模板)
141 | npm run dev or npm run start
142 |
143 | # rebuild钩子生成盛传环境dll 并eslint 代码
144 | npm run prebuild
145 |
146 | # build for production with minification(自动 dll生成环境代码，并insert到html模板已配置好publicPath)
147 | npm run build
148 |
149 | # build for production and view the bundle analyzer report
150 | npm run build --report
151 |
152 | #配置 publicPath imagePublicPath 或修改 config/index.js
153 | yo easy-vue:imagePublicPath path...
154 | yo easy-vue:publicPath path...
155 |
156 | # 一键生成页面
157 | yo easy-vue:page pageName 一键生成page
158 | yo easy-vue:mpage pageName 一键生成mutil-page(if you choose MPA)
159 | ```
160 |
161 |
162 | ## 项目相关依赖
163 |
164 | > dependencies
165 |
166 | ```
167 | fastclick
168 | amfe-flexible
169 | axios
170 | vuex
171 | vue
172 | vue-router
173 | ```
174 | > devDependencies
175 |
176 | ```
177 | less
178 | less-loader
179 | node-sass
180 | sass-loader
181 | postcss-pxtorem
182 | image-webpack-plugin
183 | vue-server-renderer
184 | vue-skeleton-webpack-plugin
185 | postcss-aspect-ratio-mini
186 | postcss-px-to-viewport
187 | postcss-write-svg
188 | postcss-cssnext
189 | style-resources-loader
190 | postcss-viewport-units 已弃用
191 | style
192 | cssnano
193 | cssnano-preset-advanced
194 | babel-eslint eslint eslint-config-standard eslint-friendly-formatter eslint-loader eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue
195 | lint-staged
196 | husky
197 | prettier
198 | jsdoc
199 | jsdoc-vue
200 | DllPlugin
201 | DllReferencePlugin
202 | html-webpack-include-assets-plugin
203 | cross-env
204 | ....
205 | ```
206 |
207 |
208 | ## 目录结构
209 |
210 | ```
211 | .
212 | ├── build // 启动文件
213 | │ ├── build
214 | │ ├── check-versions.js
215 | │ ├── logo.png
216 | │ ├── commit-css-webpack-plugin.js //骨架屏相关插件
217 | │ ├── utils.js
218 | │ ├── vue-loader.conf.js
219 | │ ├── webpack.base.conf.js
220 | │ ├── webpack.dev.conf.js
221 | │ ├── webpack.prod.conf.js
222 | │ ├── webpack.test.conf.js
223 | │ ├── webpack.dll.conf.js //dll动态连接库
224 | │ ├── webpack.skeleton.conf.js //生成骨架屏
225 | ├── config // 项目环境配置
226 | │ ├── index.js // 入口
227 | │ ├── dll.libs.dependencies.js // dll所需库配置
228 | │ ├── dev.env.js // 开发环境配置
229 | │ ├── prod.env.js // 生成环境配置
230 | │ ├── test.env.js // 测试环境配置
231 | ├── dist // 上线打包
232 | │ ├── modules // 多页面
233 | │ ├── static
234 | │ │ ├── css
235 | │ │ ├── js
236 | │ │ └── libs //动态链接库文件
237 | ├── jsdoc // jsdoc 注释自动生成文档
238 | ├── src // 源码目录
239 | │ ├── assets
240 | │ ├── components
241 | │ ├── config
242 | │ │ ├── apis.js //封装接口
243 | │ │ ├── axiosConfig.js //配置axios
244 | │ │ ├── env.js //根据环境配置 切换接口baseURL && history模式路由配置
245 | │ ├── mixins
246 | │ ├── modules //多页面
247 | │ ├── pages
248 | │ ├── plugin //手写vue插件
249 | │ ├── filters //过滤器
250 | │ ├── direction //directions
251 | │ ├── router
252 | │ ├── store // 初始化vuex
253 | │ ├── eventBus // 事件总线
254 | │ ├── utils
255 | │ ├── APP.vue
256 | │ ├── mian.js
257 | │ ├── skeleton.entry.js //骨架屏配置
258 | ├── static
259 | ├── .babelrc
260 | ├── .editorconfig
261 | ├── eslintrc.js
262 | ├── .eslintignore
263 | ├── .gitignore
264 | ├── postcssrc.js
265 | ├── index.html
266 | ├── jsdoc.cong.json //jsdoc配置文件
267 | ├── .index
268 | ├── package.json
269 | ├── package-lock.json
270 | └── README.md
271 | ```
272 |
273 |
274 | ## vue项目生成器
275 |
276 | > 地址[项目生成器](https://github.com/501981732/generator-easy-vue)
277 |
278 |
279 |
280 | ## License
281 |
282 | MIT © [wangmeng](https://github.com/501981732)
283 |
284 |
285 | [npm-image]: https://badge.fury.io/js/generator-easy-vue.svg
286 | [npm-url]: https://npmjs.org/package/generator-easy-vue
287 | [travis-image]: https://travis-ci.org/501981732/generator-easy-vue.svg?branch=master
288 | [travis-url]: https://travis-ci.org/501981732/generator-easy-vue
289 | [daviddm-image]: https://david-dm.org/501981732/generator-easy-vue.svg?theme=shields.io
290 | [daviddm-url]: https://david-dm.org/501981732/generator-easy-vue
291 | [coveralls-image]: https://coveralls.io/repos/501981732/generator-easy-vue/badge.svg
292 | [coveralls-url]: https://coveralls.io/r/501981732/generator-easy-vue
293 |
--------------------------------------------------------------------------------
/generators/app/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | /* eslint-disable */
3 | const Generator = require('yeoman-generator');
4 | const chalk = require('chalk');
5 | const yosay = require('yosay');
6 | const path = require('path');
7 | const util = require('util');
8 |
9 | /**
10 | * 生命周期
11 | *prompting - 接收用户输入阶段
12 | *configuring - 保存配置信息和文件
13 | *default - 自定义功能函数名称，如 method1
14 | *writing - 生成项目目录结构阶段
15 | *conflicts - 统一处理冲突，如要生成的文件已经存在是否覆盖等处理
16 | *install - 安装依赖阶段
17 | *end - 生成器结束阶段
18 | */
19 | module.exports = class extends Generator {
20 | // constructor(args,opts) {
21 | // super(args,opts)
22 | // this.appname = 'xxx'
23 | // }
24 | prompting() {
25 | this.log(
26 | yosay(`Welcome to the ${chalk.red('easy-vue')} generator! ${chalk.red('多功能搬砖器')}`)
27 | );
28 |
29 | const prompts = [{
30 | name: 'projectName', // 用户输入项标识，在获取用户输入值的时候用到
31 | message: 'your project name?', //给用户提示的信息
32 | // default: this.appname // 默认值
33 | default: path.basename(process.cwd()) // 默认值
34 | }, {
35 | type: 'text',
36 | name: 'author',
37 | message: 'Your name',
38 | default: this.user.git.name()
39 | }, {
40 | type: 'input',
41 | name: 'email',
42 | message: 'Your email',
43 | default: this.user.git.email()
44 | }, {
45 | name: 'projectType',
46 | type: 'list',
47 | message: 'Which type application do you want to build ?',
48 | choices: [{
49 | name: 'SPA',
50 | value: 'SPA',
51 | checked: true
52 | }, {
53 | name: 'MPA',
54 | value: 'MPA'
55 | }, ]
56 | }, {
57 | name: 'reset',
58 | type: 'list',
59 | message: 'Choose a way to reset your css',
60 | choices: [{
61 | name: 'reset.css',
62 | value: 'reset.css',
63 | checked: true
64 | }, {
65 | name: 'normalize.css',
66 | value: 'normalize.css'
67 | }, {
68 | name: 'none',
69 | value: 'none'
70 | }]
71 | }, {
72 | name: 'cssPrepeocessor',
73 | type: 'list',
74 | message: 'Choose a CSS preprocessor',
75 | choices: [{
76 | name: 'less',
77 | value: 'less',
78 | checked: true
79 | }, {
80 | name: 'sass',
81 | value: 'scss'
82 | }]
83 | }, {
84 | name: 'layout',
85 | type: 'list',
86 | message: 'Choose a layout scheme if you need a M project',
87 | choices: [{
88 | name: 'rem',
89 | value: 'rem',
90 | checked: true
91 | }, {
92 | name: 'vw',
93 | value: 'vw'
94 | }, {
95 | name: 'none',
96 | value: 'none'
97 | }]
98 | }, {
99 | type: 'confirm', // 非必填 默认text ‘confirm’ 是选择输入‘YES/NO’
100 | name: 'skeleton',
101 | message: 'Do you need a initialized skeleton ?',
102 | default: true
103 | }, {
104 | type: 'confirm', // 非必填 默认text ‘confirm’ 是选择输入‘YES/NO’
105 | name: 'vuex',
106 | message: 'Do you need a initialized vuex ?',
107 | default: true,
108 | store: true
109 | }, {
110 | type: 'confirm', // 非必填 默认text ‘confirm’ 是选择输入‘YES/NO’
111 | name: 'eslint',
112 | message: 'Use eslint and prettier to lint your code?',
113 | default: true,
114 | store: true
115 | }, {
116 | type: 'text', // 非必填 默认text ‘confirm’ 是选择输入‘YES/NO’
117 | name: 'imagePublicPath',
118 | message: 'Do you need a imagePublicPath ?',
119 | store: true //本地保留配置
120 | }, {
121 | type: 'input', // 非必填 默认text ‘confirm’ 是选择输入‘YES/NO’
122 | name: 'publicPath',
123 | message: 'Do you need a assetsPublicPath ?',
124 | store: true
125 | }, {
126 | type: 'input', // 非必填 默认text ‘confirm’ 是选择输入‘YES/NO’
127 | name: 'dns',
128 | message: 'If you need a dns prefetch，Please input the dns split by ","',
129 | store: true
130 | }, {
131 | name: 'installationMethod',
132 | type: 'list',
133 | message: 'Choose a way to install the package:',
134 | choices: [{
135 | name: 'yarn',
136 | value: 'yarn',
137 | checked: true
138 | }, {
139 | name: 'npm',
140 | value: 'npm'
141 | }, {
142 | name: 'no I install packages by myself',
143 | value: 'no'
144 | }]
145 | }];
146 |
147 | return this.prompt(prompts).then(props => {
148 | // To access props later use this.props.xxx;
149 | this.props = props;
150 | });
151 | }
152 |
153 | writing() {
154 | // this.templatePath 返回template目录下文件的地址
155 | // this.destinationPath 指定加工完成后文件的存放地址 一般指项目目录
156 | // this.fs.copy 把文件从一个目录复制到另一个目录，一般是从template目录复制到你所指定的项目目录，用于固定文件和可选文件（根据用户选择）
157 | // this.fs.copyTpl：和上面的函数作用一样，不过会事先经过模板引擎的处理，一般用来根据用户输入处理加工文件
158 | let target = [
159 | //需要加工的文件使用数组
160 | 'build/build.js',
161 | 'build/check-versions.js',
162 | 'build/logo.png',
163 | 'build/vue-loader.conf.js',
164 | 'config/dev.env.js',
165 | 'config/prod.env.js',
166 | 'src/assets/css/common.css',
167 | 'src/assets/css/animation.css',
168 | 'src/assets/js/.gitkeep',
169 | 'src/assets/img/',
170 | 'src/assets/logo.png',
171 | 'src/components/global.js',
172 | 'src/components/Alert.vue',
173 | 'src/components/Loading.vue',
174 | 'src/components/Toast.vue',
175 | 'src/components/Confirm.vue',
176 | 'src/config',
177 | 'src/directions/',
178 | 'src/filters/',
179 | 'src/mixins/',
180 | 'src/plugins/',
181 | 'src/router/',
182 | 'src/utils/',
183 | 'static/.gitkeep',
184 | '.babelrc',
185 | '.editorconfig',
186 | 'README.md',
187 | 'yarn.lock',
188 | 'jsdoc.conf.json',
189 | 'package-lock.json',
190 | 'build/webpack.dll.conf.js',
191 | 'CHANGELOG.md',
192 | 'config/dll.libs.dependencies.js',
193 | 'config/test.env.js',//增加测试环境
194 | 'src/eventBus',//增加事件总线
195 | ]
196 |
197 | // fix linux 添加隐藏文件
198 | target = [...target, ['_gitignore', '.gitignore'],
199 | ['_package.json', 'package.json'],
200 | ['_postcssrc.js', '.postcssrc.js'],
201 | ['config/_index.js', 'config/index.js'],
202 | ['_index.html', 'index.html'],
203 | // ['src/components/_x-alert.vue', 'src/components/x-alert.vue'],
204 | ['src/pages/_HelloWorld.vue', 'src/pages/HelloWorld.vue'],
205 | ['build/_webpack.base.conf.js', 'build/webpack.base.conf.js'],
206 | ['build/_webpack.dev.conf.js', 'build/webpack.dev.conf.js'],
207 | ['build/_webpack.prod.conf.js', 'build/webpack.prod.conf.js'],
208 | ['build/_webpack.test.conf.js', 'build/webpack.test.conf.js'],////增加测试环境
209 | ['build/_utils.js', 'build/utils.js', ],
210 | ]
211 | // 是否添加单元测试
212 | // this.props.test && target.push('test/index.spec.js')
213 | this.props.reset == 'reset.css' && target.push('src/assets/css/reset.css')
214 | this.props.reset == 'normalize.css' && target.push('src/assets/css/normalize.css')
215 | // less处理 全局引入
216 | this.props.cssPrepeocessor === 'less' && target.push('src/assets/css/vars.less','src/assets/css/mixins.less')
217 | this.props.layout == 'vw' && target.push('src/components/vwDemo.vue')
218 | this.props.vuex && target.push('src/store')
219 | this.props.skeleton && target.push('build/webpack.skeleton.conf.js',
220 | 'src/components/skeleton.vue',
221 | 'src/skeleton.entry.js',
222 | 'skeleton.js')
223 | // 配置多页面
224 | this.props.projectType == 'SPA' && target.push(['src/_main.js', 'src/main.js'], 'src/App.vue', )
225 | this.props.projectType == 'MPA' && target.push('src/modules/index/index.html', 'src/modules/index/index.vue', ['src/modules/index/_index.js', 'src/modules/index/index.js'])
226 | // eslint
227 | this.props.eslint && target.push('.eslintignore', '.eslintrc.js')
228 |
229 | // dns
230 | // if (this.props.dns) {
231 | // this.props.dnsArray = this.props.split(',')
232 | // } else {
233 | // this.props.dnsArray = []
234 | // }
235 |
236 | target.forEach(item => {
237 | let toFile, fromFile;
238 | if (Array.isArray(item)) {
239 | fromFile = item[0];
240 | toFile = item[1];
241 | this.fs.copyTpl(
242 | this.templatePath(fromFile),
243 | this.destinationPath(toFile),
244 | // 将配置参数带过去
245 | this.props
246 | );
247 | } else {
248 | fromFile = item;
249 | toFile = item;
250 | this.fs.copy(
251 | this.templatePath(fromFile),
252 | this.destinationPath(toFile),
253 | this.props
254 | );
255 | }
256 | })
257 | }
258 | install() {
259 | switch (this.props.installationMethod) {
260 | case 'npm':
261 | this.npmInstall();
262 | break;
263 | case 'yarn':
264 | this.yarnInstall();
265 | break;
266 | case 'bower':
267 | this.bowerInstall();
268 | break;
269 | default:
270 | break;
271 | }
272 |
273 | }
274 | end() {
275 | this.log(yosay(`${chalk.green('Now do something ')}${chalk.blue(' whatever you want!!')} `))
276 | }
277 | };
278 |
--------------------------------------------------------------------------------
/generators/app/templates/src/utils/utils.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 平滑滚动顶部
3 | * @author wm
4 | * @DateTime 2018-09-29
5 | */
6 |
7 | const scrollToTop = () => {
8 | const c = document.documentElement.scrollTop || document.body.scrollTop;
9 | if (c > 0) {
10 | window.requestAnimationFrame(scrollToTop);
11 | window.scrollTo(0, c - c / 8);
12 | }
13 | };
14 | /**
15 | * 滚动
16 | * @Author wangmeng
17 | * @DateTime 2019-02-22
18 | * @param {object} element dom
19 | * @param {number} speed speed
20 | */
21 | const animateScroll = (element, speed) => {
22 | let rect = element.getBoundingClientRect();
23 | //获取元素相对窗口的top值，此处应加上窗口本身的偏移
24 | let top = window.pageYOffset + rect.top;
25 | let currentTop = 0;
26 | let requestId;
27 | //采用requestAnimationFrame，平滑动画
28 | function step(timestamp) {
29 | currentTop += speed;
30 | if (currentTop <= top) {
31 | window.scrollTo(0, currentTop);
32 | requestId = window.requestAnimationFrame(step);
33 | } else {
34 | window.cancelAnimationFrame(requestId);
35 | }
36 | }
37 | window.requestAnimationFrame(step);
38 | };
39 | /**
40 | * 验证邮箱
41 | * @author wm
42 | * @DateTime 2018-09-05
43 | * @param {string} str 验证的邮箱
44 | * @returns {boolean} 是否是邮箱
45 | */
46 | const validateEmail = str =>
47 | /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
48 | str
49 | );
50 |
51 | /**
52 | * 验证数字
53 | * @author wm
54 | * @DateTime 2018-09-05
55 | * @param {string} n 验证的数字
56 | * @returns {boolean} 是否是数据
57 | */
58 | const validateNumber = n =>
59 | !isNaN(parseFloat(n)) && isFinite(n) && Number(n) == n;
60 |
61 | /**
62 | * 验证电话
63 | * @author wm
64 | * @DateTime 2018-09-05
65 | * @param {string} n 验证的电话
66 | * @returns {boolean} 是否是电话号码
67 | */
68 |
69 | const validataPhone = n => /^[1][3,4,5,7,8,9][0-9]{9}$/.test(n);
70 |
71 | /**
72 | * 验证固定电话
73 | * @author wm
74 | * @DateTime 2018-09-05
75 | * @param {string} n 验证的固定电话
76 | * @returns {boolean} 是否是固定电话
77 | */
78 |
79 | const validataFixedLineTelephone = n => /\d{2,5}-\d{7,8}/.test(n);
80 |
81 | /**
82 | * 判断平台 pc
83 | * @author wm
84 | * @returns {string} 平台类型
85 | */
86 |
87 | const validataOS = () => {
88 | if (navigator.userAgent.indexOf("Window") > 0) {
89 | return "Windows";
90 | } else if (navigator.userAgent.indexOf("Mac OS X") > 0) {
91 | return "Mac";
92 | } else if (navigator.userAgent.indexOf("Linux") > 0) {
93 | return "Linux";
94 | } else {
95 | return "NUll";
96 | }
97 | };
98 | const isWeiXin = () => {
99 | var ua = window.navigator.userAgent.toLowerCase();
100 | if (
101 | ua.match(/MicroMessenger/i) &&
102 | ua.match(/MicroMessenger/i)[0] === "micromessenger"
103 | ) {
104 | return true;
105 | } else {
106 | return false;
107 | }
108 | };
109 | let inBrowser = typeof window !== "undefined";
110 | let UA = inBrowser && window.navigator.userAgent.toLowerCase();
111 |
112 | /**
113 | *是否是android平台
114 | */
115 | const isAndroid = UA && UA.indexOf("android") > 0;
116 |
117 | /**
118 | * 是否是ios平台
119 | */
120 | const isIOS = UA && /iphone|ipad|ipod|ios/.test(UA);
121 |
122 | /**
123 | * 获取滚动条位置
124 | * @return {Number} 滚动条位置
125 | */
126 | const getScrollTop = _ => {
127 | let scrollTop = 0;
128 | if (document.documentElement && document.documentElement.scrollTop) {
129 | scrollTop = document.documentElement.scrollTop;
130 | } else if (document.body) {
131 | scrollTop = document.body.scrollTop;
132 | }
133 | return scrollTop;
134 | };
135 |
136 | /**
137 | * 获取可视范围高度
138 | * @return {Number} 可视范围高度
139 | */
140 | const getClientHeight = _ => {
141 | let clientHeight = 0;
142 | if (document.body.clientHeight && document.documentElement.clientHeight) {
143 | clientHeight = Math.min(
144 | document.body.clientHeight,
145 | document.documentElement.clientHeight
146 | );
147 | } else {
148 | clientHeight = Math.max(
149 | document.body.clientHeight,
150 | document.documentElement.clientHeight
151 | );
152 | }
153 | return clientHeight;
154 | };
155 | /**
156 | * 获取文档完整的高度
157 | * @return {Number} 文档高度
158 | */
159 | const getScrollHeight = _ => {
160 | return Math.max(
161 | document.body.scrollHeight,
162 | document.documentElement.scrollHeight
163 | );
164 | };
165 | /**
166 | * 距离第二天的倒计时
167 | * @return {String} 距离第二天的时间
168 | */
169 | const timeToNextDay = _ => {
170 | // 现在距离 1970-1-1 毫秒数
171 | let d = new Date();
172 | let now = d.getTime();
173 | // 今天凌晨距离 1970-1-1 毫秒数
174 | let today = new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
175 | let tomorrow = today + 24 * 60 * 60 * 1000;
176 | let dis = (tomorrow - now) / 1000;
177 | let h = parseInt(dis / (60 * 60));
178 | let m = parseInt((dis / 60) % 60);
179 | let s = parseInt(dis % 60);
180 | return `${h}时${m}分${formatTime(s)}秒`;
181 | };
182 |
183 | const formatTime = s => {
184 | return Number(s) >= 10 ? s : "0" + s;
185 | };
186 |
187 | /**
188 | * 获取某个cookie
189 | * @param {string} name cookie的key
190 | * @return {string} cookie的value
191 | */
192 | const getCookie = name => {
193 | let arr;
194 | let reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
195 | if ((arr = document.cookie.match(reg))) {
196 | return unescape(arr[2]).replace(/\"/g, ""); //替换引号
197 | } else {
198 | return null;
199 | }
200 | };
201 | // const getCookie =(cname) => {
202 | // var name = cname + "=";
203 | // var ca = document.cookie.split(';');
204 | // for (var i = 0; i < ca.length; i++) {
205 | // var c = ca[i].trim();
206 | // if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
207 | // }
208 | // return "";
209 | // }
210 |
211 | /**
212 | * 删除cookie
213 | * @param name cookie的名称
214 | */
215 | const delCookie = name => {
216 | setCookie(name, " ", -1);
217 | };
218 |
219 | /**
220 | * 判断页面登录
221 | * @Author wangmeng
222 | * @DateTime 2019-01-08
223 | */
224 | const getPPU = _ => {
225 | return getCookie("PPU");
226 | };
227 |
228 | /**
229 | * M端登录
230 | * @Author wangmeng
231 | * @DateTime 2019-01-08
232 | * @param url 登录成功后回跳页面
233 | */
234 | const H5Login = url => {
235 | let href = window.location.href;
236 | location.href = `//m.m.58.com/login/?path=${url || href}`;
237 | };
238 |
239 | /**
240 | * 点击复制到剪切板中 使用execCommand API
241 | * https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript/30810322#30810322
242 | * @param {string} text 要复制的内容
243 | * @return {promise} new promise
244 | */
245 |
246 | const fallbackCopyTextToClipboard = text => {
247 | let textArea = document.createElement("textarea");
248 | let root = document.getElementById("app");
249 | textArea.value = text;
250 | // document.body.appendChild(textArea);
251 | document.body.insertBefore(textArea, root);
252 | textArea.focus();
253 | textArea.select();
254 | textArea.setSelectionRange(0, text.length); //不设置的话ios 会有问题
255 | return new Promise((reslove, reject) => {
256 | try {
257 | let success = document.execCommand("copy");
258 | let msg = success ? "success" : "unsuccess";
259 | reslove(msg);
260 | } catch (err) {
261 | reject(err);
262 | }
263 | document.body.removeChild(textArea);
264 | });
265 | };
266 |
267 | /**
268 | * 点击复制到剪切板中 使用 navigator.clipboard.writeText(text)
269 | * @param {string} text 要复制的内容
270 | * @return {promise} new promise
271 | */
272 |
273 | const copyTextToClipboard = text => {
274 | if (!navigator.clipboard) {
275 | return fallbackCopyTextToClipboard(text);
276 | }
277 | return new Promise((reslove, reject) => {
278 | navigator.clipboard.writeText(text).then(
279 | function() {
280 | reslove("success");
281 | },
282 | function(err) {
283 | reject(err);
284 | }
285 | );
286 | });
287 | };
288 |
289 | /**
290 | * 函数防抖
291 | * @param {function} func 需要防抖的函数
292 | * @param {string} wait 时间
293 | * @return {function} 防抖函数
294 | */
295 | const simpleDebounce = (func, wait) => {
296 | let timer;
297 | return _ => {
298 | timer && clearTimeout(timer);
299 | timer = setTimeout(func, wait);
300 | };
301 | };
302 | /**
303 | * 函数防抖
304 | * @param {function} func 需要防抖的函数
305 | * @param {string} wait 时间
306 | * @param {bollean} immediate 是否立即执行
307 | * @return {function} 防抖函数
308 | */
309 | const debounce = (func, wait, immediate) => {
310 | var timeout, result;
311 |
312 | return function() {
313 | var context = this;
314 | var args = arguments;
315 |
316 | if (timeout) clearTimeout(timeout);
317 | if (immediate) {
318 | // 如果已经执行过，不再执行
319 | var callNow = !timeout;
320 | timeout = setTimeout(function() {
321 | timeout = null;
322 | }, wait);
323 | if (callNow) result = func.apply(context, args);
324 | } else {
325 | timeout = setTimeout(function() {
326 | result = func.apply(context, args);
327 | }, wait);
328 | }
329 |
330 | return result;
331 | };
332 | };
333 |
334 | /**
335 | * 函数节流
336 | * @param {function} func 需要节流的函数
337 | * @param {strimg} wait 节流函数
338 | * @return {function} 节流的函数
339 | */
340 | const throttle = (func, wait) => {
341 | if (timer) return;
342 | return () => {
343 | timer = setTimeout(_ => {
344 | func();
345 | timer = null;
346 | }, wait);
347 | };
348 | };
349 |
350 | // const throttle2 = (func, wait) => {
351 | // let last = 0
352 | // return () => {
353 | // let current_time = +new Date()
354 | // if (current_time - last > wait) {
355 | // func.apply(this, arguments)
356 | // last = +new Date()
357 | // }
358 | // }
359 | // }
360 |
361 | /**
362 | * 解析url参数
363 | * @example ?id=12345&a=b
364 | * @return {object} {id:12345, a:b}
365 | * */
366 | const urlParse = () => {
367 | let url = window.location.search;
368 | let obj = {};
369 | let reg = /[?&][^?&]+=[^?&]+/g;
370 | let arr = url.match(reg);
371 | if (arr) {
372 | arr.forEach(item => {
373 | let tempArr = item.substr(1).split("=");
374 | let key = decodeURIComponent(tempArr[0]);
375 | let val = decodeURIComponent(tempArr[1]);
376 | obj[key] = val;
377 | });
378 | }
379 | return obj;
380 | };
381 |
382 | /**
383 | * 根据对象某属性排序
384 | * @Author wangmeng
385 | * @DateTime 2019-01-03
386 | * @param {String} prop 对象属性
387 | * @param {Boolean} boolean 排序规则
388 | */
389 | const sortBy = (prop, boolean = true) => {
390 | let flag = boolean ? 1 : -1;
391 | return function(a, b) {
392 | return a[prop] < b[prop] ? flag * -1 : flag;
393 | };
394 | };
395 |
396 | /**
397 | * 缓存函数计算的结果 仅支持一个参数传递
398 | * @Author wangmeng
399 | * @DateTime 2019-02-11
400 | * @param {Function} fn 要缓存的函数
401 | * @return {Function} 缓存后的函数
402 | * @useage const cachedComputed = cached(funcA); cachedComputed(1)
403 | */
404 |
405 | const cached = fn => {
406 | const cache = Object.create(null);
407 | return function cachedFn(str) {
408 | if (!cache[str]) {
409 | cache[str] = fn(str);
410 | }
411 | return cache[str];
412 | };
413 | };
414 |
415 | export {
416 | scrollToTop,
417 | validateEmail,
418 | validateNumber,
419 | validataPhone,
420 | validataFixedLineTelephone,
421 | validataOS,
422 | isWeiXin,
423 | isAndroid,
424 | isIOS,
425 | getScrollTop,
426 | getClientHeight,
427 | getScrollHeight,
428 | timeToNextDay,
429 | getCookie,
430 | getPPU,
431 | H5Login,
432 | isAPP,
433 | copyTextToClipboard,
434 | simpleDebounce,
435 | debounce, // 节流
436 | throttle, // 防抖
437 | // throttle2, //防抖
438 | urlParse,
439 | sortBy,
440 | animateScroll
441 | };
442 |
--------------------------------------------------------------------------------
/generators/app/templates/dist/skeleton.json:
--------------------------------------------------------------------------------
1 | {
2 | "entry": "skeleton.js",
3 | "files": {
4 | "skeleton.js": "module.exports =\n/******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId]) {\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/ \t\t}\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\ti: moduleId,\n/******/ \t\t\tl: false,\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.l = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// define getter function for harmony exports\n/******/ \t__webpack_require__.d = function(exports, name, getter) {\n/******/ \t\tif(!__webpack_require__.o(exports, name)) {\n/******/ \t\t\tObject.defineProperty(exports, name, {\n/******/ \t\t\t\tconfigurable: false,\n/******/ \t\t\t\tenumerable: true,\n/******/ \t\t\t\tget: getter\n/******/ \t\t\t});\n/******/ \t\t}\n/******/ \t};\n/******/\n/******/ \t// getDefaultExport function for compatibility with non-harmony modules\n/******/ \t__webpack_require__.n = function(module) {\n/******/ \t\tvar getter = module && module.__esModule ?\n/******/ \t\t\tfunction getDefault() { return module['default']; } :\n/******/ \t\t\tfunction getModuleExports() { return module; };\n/******/ \t\t__webpack_require__.d(getter, 'a', getter);\n/******/ \t\treturn getter;\n/******/ \t};\n/******/\n/******/ \t// Object.prototype.hasOwnProperty.call\n/******/ \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"/dist/\";\n/******/\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(__webpack_require__.s = 0);\n/******/ })\n/************************************************************************/\n/******/ ([\n/* 0 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue__ = __webpack_require__(1);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_vue__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__components_skeleton_vue__ = __webpack_require__(2);\n\n\n\nconsole.log('Skeleton...')\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (new __WEBPACK_IMPORTED_MODULE_0_vue___default.a({\n components: {\n skeleton: __WEBPACK_IMPORTED_MODULE_1__components_skeleton_vue__[\"a\" /* default */]\n },\n template: ''\n}));\n\n\n/***/ }),\n/* 1 */\n/***/ (function(module, exports) {\n\nmodule.exports = require(\"vue\");\n\n/***/ }),\n/* 2 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__node_modules_vue_loader_lib_template_compiler_index_id_data_v_740ad5dd_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_skeleton_vue__ = __webpack_require__(9);\nfunction injectStyle (ssrContext) {\nvar i\n;(i=__webpack_require__(3),i.__inject__&&i.__inject__(ssrContext),i)\n}\nvar normalizeComponent = __webpack_require__(8)\n/* script */\nvar __vue_script__ = null\n/* template */\n\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = null\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = \"ee7e1cbe\"\nvar Component = normalizeComponent(\n __vue_script__,\n __WEBPACK_IMPORTED_MODULE_0__node_modules_vue_loader_lib_template_compiler_index_id_data_v_740ad5dd_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_skeleton_vue__[\"a\" /* default */],\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\nComponent.options.__file = \"src/components/skeleton.vue\"\n\n/* harmony default export */ __webpack_exports__[\"a\"] = (Component.exports);\n\n\n/***/ }),\n/* 3 */\n/***/ (function(module, exports, __webpack_require__) {\n\n// style-loader: Adds some css to the DOM by adding a '\n }\n return css\n}\n\n\n/***/ }),\n/* 7 */\n/***/ (function(module, exports) {\n\n/**\n * Translates the list format produced by css-loader into something\n * easier to manipulate.\n */\nmodule.exports = function listToStyles (parentId, list) {\n var styles = []\n var newStyles = {}\n for (var i = 0; i < list.length; i++) {\n var item = list[i]\n var id = item[0]\n var css = item[1]\n var media = item[2]\n var sourceMap = item[3]\n var part = {\n id: parentId + ':' + i,\n css: css,\n media: media,\n sourceMap: sourceMap\n }\n if (!newStyles[id]) {\n styles.push(newStyles[id] = { id: id, parts: [part] })\n } else {\n newStyles[id].parts.push(part)\n }\n }\n return styles\n}\n\n\n/***/ }),\n/* 8 */\n/***/ (function(module, exports) {\n\n/* globals __VUE_SSR_CONTEXT__ */\n\n// IMPORTANT: Do NOT use ES2015 features in this file.\n// This module is a runtime utility for cleaner component module output and will\n// be included in the final webpack user bundle.\n\nmodule.exports = function normalizeComponent (\n rawScriptExports,\n compiledTemplate,\n functionalTemplate,\n injectStyles,\n scopeId,\n moduleIdentifier /* server only */\n) {\n var esModule\n var scriptExports = rawScriptExports = rawScriptExports || {}\n\n // ES6 modules interop\n var type = typeof rawScriptExports.default\n if (type === 'object' || type === 'function') {\n esModule = rawScriptExports\n scriptExports = rawScriptExports.default\n }\n\n // Vue.extend constructor export interop\n var options = typeof scriptExports === 'function'\n ? scriptExports.options\n : scriptExports\n\n // render functions\n if (compiledTemplate) {\n options.render = compiledTemplate.render\n options.staticRenderFns = compiledTemplate.staticRenderFns\n options._compiled = true\n }\n\n // functional template\n if (functionalTemplate) {\n options.functional = true\n }\n\n // scopedId\n if (scopeId) {\n options._scopeId = scopeId\n }\n\n var hook\n if (moduleIdentifier) { // server build\n hook = function (context) {\n // 2.3 injection\n context =\n context || // cached call\n (this.$vnode && this.$vnode.ssrContext) || // stateful\n (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional\n // 2.2 with runInNewContext: true\n if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {\n context = __VUE_SSR_CONTEXT__\n }\n // inject component styles\n if (injectStyles) {\n injectStyles.call(this, context)\n }\n // register component module identifier for async chunk inferrence\n if (context && context._registeredComponents) {\n context._registeredComponents.add(moduleIdentifier)\n }\n }\n // used by ssr in case component is cached and beforeCreate\n // never gets called\n options._ssrRegister = hook\n } else if (injectStyles) {\n hook = injectStyles\n }\n\n if (hook) {\n var functional = options.functional\n var existing = functional\n ? options.render\n : options.beforeCreate\n\n if (!functional) {\n // inject component registration as beforeCreate hook\n options.beforeCreate = existing\n ? [].concat(existing, hook)\n : [hook]\n } else {\n // for template-only hot-reload because in that case the render fn doesn't\n // go through the normalizer\n options._injectStyles = hook\n // register for functioal component in vue file\n options.render = function renderWithStyleInjection (h, context) {\n hook.call(context)\n return existing(h, context)\n }\n }\n }\n\n return {\n esModule: esModule,\n exports: scriptExports,\n options: options\n }\n}\n\n\n/***/ }),\n/* 9 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { staticClass: \"skeleton page\" }, [\n _vm._ssrNode(\n ' ' +\n _vm._ssrList(8, function(i) {\n return '
' +\n _vm._ssrList(6, function(i) {\n return ''\n })\n )\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\n/* harmony default export */ __webpack_exports__[\"a\"] = (esExports);\n\n/***/ })\n/******/ ]);"
5 | },
6 | "maps": {}
7 | }
--------------------------------------------------------------------------------
8 | 
13 | 
22 | 
27 | 
34 | 
39 |