update

.babelrc

@@ -0,0 +1,5 @@
+{
+	"presets": [["env",{
+		"modules": false
+	}], "stage-0"]
+}

.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+node_modules/
+npm-debug.log*
+/wc-messagebox
+/static

.postcssrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  "plugins": {
+    "autoprefixer": {
+    	browsers:["> 1%", "last 20 versions", "not ie <= 8"]
+    }
+  }
+}

README.md

@@ -4,7 +4,7 @@
 为vue提供的一个轮播图组件
 
 ## 代码演示如何使用
-npm install better-scroll --save
+
 npm install vue-better-slider --save 
 
 在需要的项目文件中导入改组件 import Slider from 'vue-better-slider'
@@ -26,14 +26,18 @@ components: {
       </div>
   </slider> 
 ```
-
+demo 
+```js
+npm install vue-better-slider
+cd vue-better-slier
+npm run dev
+```
 ## 说明
 
 1. 改组件是根据better-scroll滑动组件封装改成
 
 2. 实现功能有：轮播 自动播放 dots 循环播放，适合手机端,图片高度自适应
 
-![](https://github.com/songhaoreact/vue-better-slider/blob/master/demo1.gif)
 
 
 

build/client.js

@@ -0,0 +1,9 @@
+// 主要就是为了实现页面刷新的时候错误提示依旧在
+require('eventsource-polyfill')
+var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
+
+hotClient.subscribe(function (event) {
+  if (event.action === 'reload') {
+    window.location.reload()
+  }
+})

build/compile.js

@@ -0,0 +1,71 @@
+const webpack = require('webpack');
+const webpackConfig = require('./webpack.compile');
+const rm = require('rimraf');
+const cp = require('shelljs').cp;
+const path = require('path');
+const chalk = require('chalk');
+const fs = require('fs');
+const semver = require('semver');
+const src = path.resolve(process.cwd(), 'static');
+const packageJson = src + '/package.json';
+const name = require(packageJson).name;
+
+const target = path.resolve(process.cwd(), name);
+
+rm(path.resolve(process.cwd() , name), err => {
+    if (err) {
+        console.log(err)
+    } else {
+        webpack(webpackConfig, function(err, stats) {
+            process.stdout.write(stats.toString({
+                colors: true,
+                modules: false,
+                children: false,
+                chunks: false,
+                chunkModules: false
+            }) + '\n\n');
+            // 修改版本号
+            modifyVersion();
+
+            // 不在打包之后的目录里面放置 README.md 文件
+            cp('-R', src + '/*', target);
+            // cp('-R', './README.md');
+
+            console.log();
+            console.log(chalk.green.bold('> Compile Successed'));
+            console.log();
+        })
+    }
+});
+
+
+function modifyVersion() {
+    fs.readFile(packageJson, function(err, data){
+
+        // 获取版本号
+        let obj = JSON.parse(data.toString());
+        let version = obj.version;
+
+        let major = semver.major(version);
+        let minor = semver.minor(version);
+        let patch = semver.patch(version);
+
+        // 如果 patch = 10
+        if (patch == 10) {
+            // 再判断一下 minior 的值 是不是 10
+            if (minor == 10) {
+                major = major + 1;
+                minor = 0;
+                patch = 0;
+            } else {
+                minor = minor + 1;
+                patch = 0;
+            }
+        } else {
+            patch = patch + 1;
+        }
+        // 重新修改 版本号
+        obj.version = major + '.' + minor + '.' + patch;
+        fs.writeFile(packageJson, JSON.stringify(obj, null, 4)) 
+    })
+}

build/server.js

@@ -0,0 +1,58 @@
+const express = require('express');
+const webpack = require('webpack');
+
+const webpackDevMiddleware = require('webpack-dev-middleware');
+const webpackHotMiddleware = require('webpack-hot-middleware');
+
+const webpackConfig = require('./webpack.dev');
+const compiler = webpack(webpackConfig);
+
+const opn = require('opn');
+
+const chalk = require('chalk');
+
+const app = express();
+
+// 这个玩意可以直接给个随机数
+
+// 80 端口是 http 协议的专用端口, 专用端口！
+const port = parseInt(Math.random() * 10000) + 5000;
+// const  port = '80';
+// 设置 webpackDevMiddleware
+const devMiddleware = webpackDevMiddleware(compiler, {
+	publicPath: '/',
+    // 这个字段为 true 会删掉每次 hot reload 的时候输出到 cmd 里面的打包信息
+    quiet: true
+});
+
+const hotMiddleware = webpackHotMiddleware(compiler, {
+  log: () => {}
+})
+
+/*
+当 vue-router 开启 histroy 的时候, 就需要这个插件
+: 这个玩意的顺序必须要在这里, 不能在 devMiddleware, hotMiddleware 后面
+// handle fallback for HTML5 history API
+*/
+
+app.use(require('connect-history-api-fallback')())
+
+app.use(devMiddleware);
+
+// hot-reload
+app.use(hotMiddleware);
+
+// 挂载到虚拟路径上面
+app.use('/static', express.static('./static'));
+
+// 监听路径
+app.listen(port, function(){
+	console.log(chalk.green.bold('> Listening on port: http://localhost:' + port +'/'));
+	console.log();
+});
+
+// 打包成功之后会触发这个玩意
+devMiddleware.waitUntilValid(function(err){
+	// 打开浏览器
+	opn('http://localhost:' + port)
+});

build/webpack.compile.js

@@ -0,0 +1,96 @@
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+// 不需要打包的文件
+const externals = {
+    'vue': 'vue',
+    'lodash/merge': 'lodash/merge'
+}
+
+const packageJson = path.resolve(process.cwd(), 'static') + '/package.json';
+const name = require(packageJson).name;
+
+const config = {
+    node: {
+        Buffer: false
+    },
+    entry: {
+        app: './src/' + name + '/' + 'index.js'
+    },
+    output: {
+        path: path.resolve(process.cwd(), name),
+        filename: 'index.js',
+        publicPath: '/',
+        libraryTarget: "commonjs2"
+    },
+    resolve: {
+        extensions: ['.js', '.json', '.vue']
+    },
+    externals: externals,
+    module: {
+        rules: [{
+            test: /\.css$/,
+            use: ExtractTextPlugin.extract({
+                use: 'css-loader?minimize!postcss-loader'
+            })
+        }, {
+            test: /\.styl$/,
+            use: ExtractTextPlugin.extract({
+                use: 'css-loader?minimize!postcss-loader!stylus-loader'
+            })
+        }, {
+            test: /\.js$/,
+            loader: 'babel-loader',
+            include: [path.resolve(process.cwd(), 'src')],
+        }, {
+            test: /\.vue$/,
+            loader: 'vue-loader',
+            options: {
+                loaders: {
+                    css: ExtractTextPlugin.extract({
+                        use: 'css-loader?minimize',
+                    }),
+
+                    less: ExtractTextPlugin.extract({
+                        use: 'css-loader?minimize!postcss-loader!less-loader',
+                    })
+                    // css:'css-loader?minimize',
+
+                    // less: 'css-loader?minimize!postcss-loader!less-loader'
+
+
+                }
+            }
+        }, {
+            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+            loader: 'url-loader',
+            query: {
+                limit: 1000 * 5,
+                name: '[name].[hash:7].[ext]'
+            }
+        }, {
+            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+            loader: 'url-loader',
+            query: {
+                limit: 1000 * 5,
+                name: '[name].[hash:7].[ext]'
+            }
+        }]
+    },
+    plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      },
+      sourceMap: true
+    }),
+
+
+        new ExtractTextPlugin('style.css'),
+        new webpack.LoaderOptionsPlugin({
+            minimize: true
+        })   
+    ]
+};
+module.exports = config;

build/webpack.dev.js

@@ -0,0 +1,87 @@
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+// 在命令行里面的错误提示友好一点
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
+
+const config = {
+    entry: {
+        // webpack-hot-middleware/client 是必须要加上的, 不然的话不会热更新
+        // ./build/client.js 也是必须要加, 不然刷新之后错误提示就会失效
+        app: [ './build/client.js','./src/main.js','webpack-hot-middleware/client']
+    },
+    // 开发环境需要开启 devtool, 这样方便调试, 因为可以直接通过错误到达具体的文件
+    devtool: '#cheap-module-eval-source-map',
+    output: {
+        path: path.resolve(process.cwd(), 'dist'),
+        filename: '[name].[hash:7].js',
+    },
+    resolve: {
+        extensions: ['.js', '.json', '.vue'],
+        alias: {
+            'vue$': 'vue/dist/vue.esm.js',
+        }
+    },
+    module: {
+        rules: [
+            {
+                test: /\.styl$/,
+                use: ['style-loader', 'css-loader', 'postcss-loader', 'stylus-loader']
+            },
+            {
+                test: /\.css$/,
+                // 这个后面不能加上 postcss-loader
+                // 加上之后报错: 所有的 css 文件都找不到
+                use: ['style-loader', 'css-loader']
+            },
+
+            {
+                test: /\.js$/,
+                loader: 'babel-loader',
+                query: {
+                    compact: false
+                },
+                include: [path.resolve(process.cwd(), 'src')],
+            },
+
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader',
+
+            }, {
+
+                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+                loader: 'url-loader',
+                query: {
+                    limit: 1000 * 10,
+
+                    name: './static/[name].[hash:7].[ext]'
+                }
+
+            }, {
+                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+                loader: 'url-loader',
+                query: {
+                    limit: 1000 * 10,
+                    name: './static/[name].[hash:7].[ext]'
+                }
+
+            }
+        ]
+    },
+    plugins: [
+        new FriendlyErrorsPlugin(),
+        new webpack.HotModuleReplacementPlugin(),
+        new HtmlWebpackPlugin({
+            template: './index.html'
+        }),
+        // 定义全局变量
+        new webpack.DefinePlugin({
+            // 直接使用 env 对象
+            'process.env': '"development"'
+        })
+    ]
+};
+
+module.exports = config;