diff --git a/README.md b/README.md index d91c9b1..8689a5d 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,10 @@ # vue-modal -> A Vue.js project +A simple modal component for Vue.js -## Build Setup +##Install -``` bash -# install dependencies -npm install +##Usage -# serve with hot reload at localhost:8080 -npm run dev - -# build for production with minification -npm run build -``` - -For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). +##License +MIT \ No newline at end of file diff --git a/build/build.js b/build/build.js deleted file mode 100644 index b3c9aad..0000000 --- a/build/build.js +++ /dev/null @@ -1,36 +0,0 @@ -// https://github.com/shelljs/shelljs -require('./check-versions')() -require('shelljs/global') -env.NODE_ENV = 'production' - -var path = require('path') -var config = require('../config') -var ora = require('ora') -var webpack = require('webpack') -var webpackConfig = require('./webpack.prod.conf') - -console.log( - ' Tip:\n' + - ' Built files are meant to be served over an HTTP server.\n' + - ' Opening index.html over file:// won\'t work.\n' -) - -var spinner = ora('building for production...') -spinner.start() - -var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory) -rm('-rf', assetsPath) -mkdir('-p', assetsPath) -cp('-R', 'static/*', assetsPath) - -webpack(webpackConfig, function (err, stats) { - spinner.stop() - if (err) throw err - process.stdout.write(stats.toString({ - colors: true, - modules: false, - children: false, - chunks: false, - chunkModules: false - }) + '\n') -}) diff --git a/build/check-versions.js b/build/check-versions.js deleted file mode 100644 index e2b6cf7..0000000 --- a/build/check-versions.js +++ /dev/null @@ -1,45 +0,0 @@ -var semver = require('semver') -var chalk = require('chalk') -var packageConfig = require('../package.json') -var exec = function (cmd) { - return require('child_process') - .execSync(cmd).toString().trim() -} - -var versionRequirements = [ - { - name: 'node', - currentVersion: semver.clean(process.version), - versionRequirement: packageConfig.engines.node - }, - { - name: 'npm', - currentVersion: exec('npm --version'), - versionRequirement: packageConfig.engines.npm - } -] - -module.exports = function () { - var warnings = [] - for (var i = 0; i < versionRequirements.length; i++) { - var mod = versionRequirements[i] - if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { - warnings.push(mod.name + ': ' + - chalk.red(mod.currentVersion) + ' should be ' + - chalk.green(mod.versionRequirement) - ) - } - } - - if (warnings.length) { - console.log('') - console.log(chalk.yellow('To use this template, you must update following to modules:')) - console.log() - for (var i = 0; i < warnings.length; i++) { - var warning = warnings[i] - console.log(' ' + warning) - } - console.log() - process.exit(1) - } -} diff --git a/build/dev-client.js b/build/dev-client.js deleted file mode 100644 index 18aa1e2..0000000 --- a/build/dev-client.js +++ /dev/null @@ -1,9 +0,0 @@ -/* eslint-disable */ -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() - } -}) diff --git a/build/dev-server.js b/build/dev-server.js deleted file mode 100644 index dcba5d2..0000000 --- a/build/dev-server.js +++ /dev/null @@ -1,72 +0,0 @@ -require('./check-versions')() -var config = require('../config') -if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) -var path = require('path') -var express = require('express') -var webpack = require('webpack') -var opn = require('opn') -var proxyMiddleware = require('http-proxy-middleware') -var webpackConfig = require('./webpack.dev.conf') - -// default port where dev server listens for incoming traffic -var port = process.env.PORT || config.dev.port -// Define HTTP proxies to your custom API backend -// https://github.com/chimurai/http-proxy-middleware -var proxyTable = config.dev.proxyTable - -var app = express() -var compiler = webpack(webpackConfig) - -var devMiddleware = require('webpack-dev-middleware')(compiler, { - publicPath: webpackConfig.output.publicPath, - stats: { - colors: true, - chunks: false - } -}) - -var hotMiddleware = require('webpack-hot-middleware')(compiler) -// force page reload when html-webpack-plugin template changes -compiler.plugin('compilation', function (compilation) { - compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { - hotMiddleware.publish({ action: 'reload' }) - cb() - }) -}) - -// proxy api requests -Object.keys(proxyTable).forEach(function (context) { - var options = proxyTable[context] - if (typeof options === 'string') { - options = { target: options } - } - app.use(proxyMiddleware(context, options)) -}) - -// handle fallback for HTML5 history API -app.use(require('connect-history-api-fallback')()) - -// serve webpack bundle output -app.use(devMiddleware) - -// enable hot-reload and state-preserving -// compilation error display -app.use(hotMiddleware) - -// serve pure static assets -var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) -app.use(staticPath, express.static('./static')) - -module.exports = app.listen(port, function (err) { - if (err) { - console.log(err) - return - } - var uri = 'http://localhost:' + port - console.log('Listening at ' + uri + '\n') - - // when env is testing, don't need open it - if (process.env.NODE_ENV !== 'testing') { - opn(uri) - } -}) diff --git a/build/utils.js b/build/utils.js deleted file mode 100644 index dc3cdd0..0000000 --- a/build/utils.js +++ /dev/null @@ -1,61 +0,0 @@ -var path = require('path') -var config = require('../config') -var ExtractTextPlugin = require('extract-text-webpack-plugin') - -exports.assetsPath = function (_path) { - var assetsSubDirectory = process.env.NODE_ENV === 'production' - ? config.build.assetsSubDirectory - : config.dev.assetsSubDirectory - return path.posix.join(assetsSubDirectory, _path) -} - -exports.cssLoaders = function (options) { - options = options || {} - // generate loader string to be used with extract text plugin - function generateLoaders (loaders) { - var sourceLoader = loaders.map(function (loader) { - var extraParamChar - if (/\?/.test(loader)) { - loader = loader.replace(/\?/, '-loader?') - extraParamChar = '&' - } else { - loader = loader + '-loader' - extraParamChar = '?' - } - return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '') - }).join('!') - - // Extract CSS when that option is specified - // (which is the case during production build) - if (options.extract) { - return ExtractTextPlugin.extract('vue-style-loader', sourceLoader) - } else { - return ['vue-style-loader', sourceLoader].join('!') - } - } - - // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html - return { - css: generateLoaders(['css']), - postcss: generateLoaders(['css']), - less: generateLoaders(['css', 'less']), - sass: generateLoaders(['css', 'sass?indentedSyntax']), - scss: generateLoaders(['css', 'sass']), - stylus: generateLoaders(['css', 'stylus']), - styl: generateLoaders(['css', 'stylus']) - } -} - -// Generate loaders for standalone style files (outside of .vue) -exports.styleLoaders = function (options) { - var output = [] - var loaders = exports.cssLoaders(options) - for (var extension in loaders) { - var loader = loaders[extension] - output.push({ - test: new RegExp('\\.' + extension + '$'), - loader: loader - }) - } - return output -} diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js deleted file mode 100644 index dc13c4f..0000000 --- a/build/webpack.base.conf.js +++ /dev/null @@ -1,94 +0,0 @@ -var path = require('path') -var config = require('../config') -var utils = require('./utils') -var projectRoot = path.resolve(__dirname, '../') - -var env = process.env.NODE_ENV -// check env & config/index.js to decide weither to enable CSS Sourcemaps for the -// various preprocessor loaders added to vue-loader at the end of this file -var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap) -var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap) -var useCssSourceMap = cssSourceMapDev || cssSourceMapProd - -module.exports = { - entry: { - app: './src/main.js' - }, - output: { - path: config.build.assetsRoot, - publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, - filename: '[name].js' - }, - resolve: { - extensions: ['', '.js', '.vue'], - fallback: [path.join(__dirname, '../node_modules')], - alias: { - 'vue$': 'vue/dist/vue', - 'src': path.resolve(__dirname, '../src'), - 'assets': path.resolve(__dirname, '../src/assets'), - 'components': path.resolve(__dirname, '../src/components') - } - }, - resolveLoader: { - fallback: [path.join(__dirname, '../node_modules')] - }, - module: { - preLoaders: [ - { - test: /\.vue$/, - loader: 'eslint', - include: projectRoot, - exclude: /node_modules/ - }, - { - test: /\.js$/, - loader: 'eslint', - include: projectRoot, - exclude: /node_modules/ - } - ], - loaders: [ - { - test: /\.vue$/, - loader: 'vue' - }, - { - test: /\.js$/, - loader: 'babel', - include: projectRoot, - exclude: /node_modules/ - }, - { - test: /\.json$/, - loader: 'json' - }, - { - test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, - loader: 'url', - query: { - limit: 10000, - name: utils.assetsPath('img/[name].[hash:7].[ext]') - } - }, - { - test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, - loader: 'url', - query: { - limit: 10000, - name: utils.assetsPath('fonts/[name].[hash:7].[ext]') - } - } - ] - }, - eslint: { - formatter: require('eslint-friendly-formatter') - }, - vue: { - loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }), - postcss: [ - require('autoprefixer')({ - browsers: ['last 2 versions'] - }) - ] - } -} diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js deleted file mode 100644 index 7e1a104..0000000 --- a/build/webpack.dev.conf.js +++ /dev/null @@ -1,34 +0,0 @@ -var config = require('../config') -var webpack = require('webpack') -var merge = require('webpack-merge') -var utils = require('./utils') -var baseWebpackConfig = require('./webpack.base.conf') -var HtmlWebpackPlugin = require('html-webpack-plugin') - -// add hot-reload related code to entry chunks -Object.keys(baseWebpackConfig.entry).forEach(function (name) { - baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) -}) - -module.exports = merge(baseWebpackConfig, { - module: { - loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) - }, - // eval-source-map is faster for development - devtool: '#eval-source-map', - plugins: [ - new webpack.DefinePlugin({ - 'process.env': config.dev.env - }), - // https://github.com/glenjamin/webpack-hot-middleware#installation--usage - new webpack.optimize.OccurenceOrderPlugin(), - new webpack.HotModuleReplacementPlugin(), - new webpack.NoErrorsPlugin(), - // https://github.com/ampedandwired/html-webpack-plugin - new HtmlWebpackPlugin({ - filename: 'index.html', - template: 'index.html', - inject: true - }) - ] -}) diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js deleted file mode 100644 index 3449245..0000000 --- a/build/webpack.prod.conf.js +++ /dev/null @@ -1,98 +0,0 @@ -var path = require('path') -var config = require('../config') -var utils = require('./utils') -var webpack = require('webpack') -var merge = require('webpack-merge') -var baseWebpackConfig = require('./webpack.base.conf') -var ExtractTextPlugin = require('extract-text-webpack-plugin') -var HtmlWebpackPlugin = require('html-webpack-plugin') -var env = config.build.env - -var webpackConfig = merge(baseWebpackConfig, { - module: { - loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) - }, - devtool: config.build.productionSourceMap ? '#source-map' : false, - output: { - path: config.build.assetsRoot, - filename: utils.assetsPath('js/[name].[chunkhash].js'), - chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') - }, - vue: { - loaders: utils.cssLoaders({ - sourceMap: config.build.productionSourceMap, - extract: true - }) - }, - plugins: [ - // http://vuejs.github.io/vue-loader/en/workflow/production.html - new webpack.DefinePlugin({ - 'process.env': env - }), - new webpack.optimize.UglifyJsPlugin({ - compress: { - warnings: false - } - }), - new webpack.optimize.OccurenceOrderPlugin(), - // extract css into its own file - new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')), - // generate dist index.html with correct asset hash for caching. - // you can customize output by editing /index.html - // see https://github.com/ampedandwired/html-webpack-plugin - new HtmlWebpackPlugin({ - filename: config.build.index, - template: 'index.html', - inject: true, - minify: { - removeComments: true, - collapseWhitespace: true, - removeAttributeQuotes: true - // more options: - // https://github.com/kangax/html-minifier#options-quick-reference - }, - // necessary to consistently work with multiple chunks via CommonsChunkPlugin - chunksSortMode: 'dependency' - }), - // split vendor js into its own file - new webpack.optimize.CommonsChunkPlugin({ - name: 'vendor', - minChunks: function (module, count) { - // any required modules inside node_modules are extracted to vendor - return ( - module.resource && - /\.js$/.test(module.resource) && - module.resource.indexOf( - path.join(__dirname, '../node_modules') - ) === 0 - ) - } - }), - // extract webpack runtime and module manifest to its own file in order to - // prevent vendor hash from being updated whenever app bundle is updated - new webpack.optimize.CommonsChunkPlugin({ - name: 'manifest', - chunks: ['vendor'] - }) - ] -}) - -if (config.build.productionGzip) { - var CompressionWebpackPlugin = require('compression-webpack-plugin') - - webpackConfig.plugins.push( - new CompressionWebpackPlugin({ - asset: '[path].gz[query]', - algorithm: 'gzip', - test: new RegExp( - '\\.(' + - config.build.productionGzipExtensions.join('|') + - ')$' - ), - threshold: 10240, - minRatio: 0.8 - }) - ) -} - -module.exports = webpackConfig diff --git a/config/dev.env.js b/config/dev.env.js deleted file mode 100644 index efead7c..0000000 --- a/config/dev.env.js +++ /dev/null @@ -1,6 +0,0 @@ -var merge = require('webpack-merge') -var prodEnv = require('./prod.env') - -module.exports = merge(prodEnv, { - NODE_ENV: '"development"' -}) diff --git a/config/index.js b/config/index.js deleted file mode 100644 index 207dfbd..0000000 --- a/config/index.js +++ /dev/null @@ -1,32 +0,0 @@ -// see http://vuejs-templates.github.io/webpack for documentation. -var path = require('path') - -module.exports = { - build: { - env: require('./prod.env'), - index: path.resolve(__dirname, '../dist/index.html'), - assetsRoot: path.resolve(__dirname, '../dist'), - assetsSubDirectory: 'static', - assetsPublicPath: '/', - productionSourceMap: true, - // Gzip off by default as many popular static hosts such as - // Surge or Netlify already gzip all static assets for you. - // Before setting to `true`, make sure to: - // npm install --save-dev compression-webpack-plugin - productionGzip: false, - productionGzipExtensions: ['js', 'css'] - }, - dev: { - env: require('./dev.env'), - port: 8080, - assetsSubDirectory: 'static', - assetsPublicPath: '/', - proxyTable: {}, - // CSS Sourcemaps off by default because relative paths are "buggy" - // with this option, according to the CSS-Loader README - // (https://github.com/webpack/css-loader#sourcemaps) - // In our experience, they generally work as expected, - // just be aware of this issue when enabling this option. - cssSourceMap: false - } -} diff --git a/config/prod.env.js b/config/prod.env.js deleted file mode 100644 index 773d263..0000000 --- a/config/prod.env.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - NODE_ENV: '"production"' -} diff --git a/static/.gitkeep b/examples/.gitkeep similarity index 100% rename from static/.gitkeep rename to examples/.gitkeep diff --git a/src/App.vue b/examples/App.vue similarity index 100% rename from src/App.vue rename to examples/App.vue diff --git a/index.html b/examples/index.html similarity index 100% rename from index.html rename to examples/index.html diff --git a/src/main.js b/examples/main.js similarity index 100% rename from src/main.js rename to examples/main.js diff --git a/package.json b/package.json index 6c858bb..818ba82 100644 --- a/package.json +++ b/package.json @@ -1,19 +1,23 @@ { "name": "vue-modal", - "version": "1.0.0", - "description": "A Vue.js project", + "version": "0.0.1", + "description": "A Vue.js simple modal dialog component", "author": "euvl ", "private": true, - "scripts": { - "dev": "node build/dev-server.js", - "build": "node build/build.js", - "lint": "eslint --ext .js,.vue src" + "license": "MIT", + "main": "./src/index.js", + "repository": { + "type": "git", + "url": "git+https://github.com/euvl/vue-modal.git" }, - "dependencies": { - "babel-runtime": "^6.18.0", - "vue": "^2.0.1" + "scripts": { + "dev": "node examples/server.js", + "build": "node build/build.js", + "lint": "eslint --fix --ext .js,.vue src" }, "devDependencies": { + "vue": "^2.0.1", + "babel-runtime": "^6.18.0", "autoprefixer": "^6.4.0", "babel-core": "^6.0.0", "babel-eslint": "^7.0.0", diff --git a/src/VueModal/Modal.vue b/src/Modal.vue similarity index 100% rename from src/VueModal/Modal.vue rename to src/Modal.vue diff --git a/src/assets/logo.png b/src/assets/logo.png deleted file mode 100644 index f3d2503..0000000 Binary files a/src/assets/logo.png and /dev/null differ diff --git a/src/components/Hello.vue b/src/components/Hello.vue deleted file mode 100644 index ab319f3..0000000 --- a/src/components/Hello.vue +++ /dev/null @@ -1,53 +0,0 @@ - - - - - - diff --git a/src/VueModal/index.js b/src/index.js similarity index 100% rename from src/VueModal/index.js rename to src/index.js