├── demo
├── index.js
└── demo.vue
├── src
├── index.js
├── vue-gecode.vue
└── vue-countTo.vue
├── .gitignore
├── index.html
├── webpack.build.config.js
├── package.json
├── webpack.config.js
└── README.md
/demo/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import geCode from '../src';
3 | import Demo from './demo.vue'
4 | new Vue({
5 | el: '#app',
6 | render: (h) => h(Demo)
7 | })
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import GeCode from './vue-gecode.vue';
2 | export default GeCode;
3 | if (typeof window !== 'undefined' && window.Vue) {
4 | window.Vue.component('ge-code', GeCode);
5 | }
6 |
7 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # production
7 | #/build
8 |
9 | # misc
10 | .DS_Store
11 | .env.local
12 | .env.development.local
13 | .env.test.local
14 | .env.production.local
15 |
16 | npm-debug.log*
17 | yarn-debug.log*
18 | yarn-error.log*
19 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | gecode验证码获取组件
7 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/webpack.build.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const VueLoaderPlugin = require('vue-loader/lib/plugin')
3 | module.exports = {
4 | entry: './src/index.js',
5 | output: {
6 | path: path.resolve(__dirname, './dist'),
7 | publicPath: '/dist/',
8 | filename: 'vue-ge-code.min.js',
9 | library: 'GeCode',
10 | libraryTarget: 'umd',
11 | umdNamedDefine: true
12 | },
13 | module: {
14 | rules: [{
15 | test: /\.vue$/,
16 | loader: 'vue-loader'
17 | },
18 | {
19 | test: /\.js$/,
20 | exclude: /node_modules/,
21 | use: [{
22 | loader: 'babel-loader',
23 | options: {
24 | cacheDirectory: true,
25 | 'presets': [
26 | // 把es6转成es5
27 | ['env', {
28 | 'modules': false
29 | }],
30 | 'stage-0'
31 | ],
32 | }
33 | }]
34 | }
35 | ]
36 |
37 | },
38 |
39 | devtool: '#source-map',
40 | plugins:[
41 | new VueLoaderPlugin()
42 | ]
43 | }
44 |
45 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-gecode",
3 | "version": "0.0.4",
4 | "description": "基于Vue2开发的获取验证码倒计时组件,高度自定义配置,可实现各种开发需求.",
5 | "main": "dist/vue-ge-code.min.js",
6 | "scripts": {
7 | "start": "webpack-dev-server --mode development --hide-modules",
8 | "build": "webpack --mode production --config webpack.build.config.js --progress --hide-modules",
9 | "postinstall": "rm -rf dist && git subtree add --prefix=dist origin gh-pages",
10 | "publish": "npm run build && git add . && git commit -am '脚本编译demo并发布到github' && git subtree push --prefix=dist origin gh-pages"
11 | },
12 | "author": "gesnowboy",
13 | "keywords": [
14 | "input",
15 | "gecode",
16 | "手机号",
17 | "验证码",
18 | "倒计时",
19 | "vue",
20 | "验证",
21 | "手机"
22 | ],
23 | "license": "ISC",
24 | "devDependencies": {
25 | "babel": "^6.23.0",
26 | "babel-core": "^6.26.3",
27 | "babel-loader": "^7.1.5",
28 | "babel-preset-env": "^1.7.0",
29 | "babel-preset-stage-0": "^6.24.1",
30 | "html-webpack-plugin": "^3.2.0",
31 | "vue": "^2.5.17",
32 | "vue-loader": "^15.4.1",
33 | "vue-template-compiler": "^2.5.17",
34 | "webpack": "^4.18.0",
35 | "webpack-cli": "^3.1.0",
36 | "webpack-dev-server": "^3.1.8"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var HtmlWebpackPlugin = require('html-webpack-plugin')
2 | let path = require('path')
3 | const VueLoaderPlugin = require('vue-loader/lib/plugin')
4 | function resolve(strPath) {
5 | return path.resolve(__dirname, strPath)
6 | }
7 | module.exports = {
8 | entry: './demo/index.js',
9 | devServer: {
10 | inline: true, //DevServer 会在构建完变化后的代码时通过代理客户端控制网页刷新。
11 | port: 3243,
12 | host: '0.0.0.0',
13 | open: 'http://localhost:' + 3243 + '/'
14 | },
15 | output: {
16 | path: resolve('./dist'),
17 | filename: 'vue-gecode.min.js'
18 | },
19 | resolve: {
20 | modules: [
21 | resolve('src'),
22 | resolve('static'),
23 | resolve('node_modules')
24 | ],
25 | extensions: ['.js', '.jsx', '.ts', '.vue'],
26 | alias: {
27 | 'vue': 'vue/dist/vue.js'
28 | }
29 | },
30 | devtool: 'source-map',
31 | module: {
32 | rules: [
33 | {
34 | test: /\.vue$/,
35 | loader: 'vue-loader'
36 | },{
37 | test: /\.js$/,
38 | exclude: /node_modules/,
39 | include: resolve('src'),
40 | use: [{
41 | loader: 'babel-loader',
42 | options: {
43 | cacheDirectory: true,
44 | 'presets': [
45 | // 把es6转成es5
46 | ['env', {
47 | 'modules': false
48 | }],
49 | 'stage-0'
50 | ],
51 | }
52 | }]
53 | }]
54 | },
55 | plugins: [
56 | new VueLoaderPlugin(),
57 | new HtmlWebpackPlugin({
58 | template: resolve('./index.html'),
59 | inject: true,
60 | minify: {
61 | removeComments: true,
62 | collapseWhitespace: true,
63 | removeAttributeQuotes: true
64 | },
65 | chunksSortMode: 'dependency'
66 | })
67 | ]
68 | }
--------------------------------------------------------------------------------
/demo/demo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
8 |
9 |
10 |
11 |
12 |