Skip to content

Commit 0cc7b77

Browse files
mrosendinmrosendin
committedJun 8, 2017
scaffold with webpack simple template
1 parent bfe1538 commit 0cc7b77

10 files changed

+280
-60
lines changed
 

‎.babelrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"presets": [
3+
["env", { "modules": false }]
4+
]
5+
}

‎.gitignore

+4-58
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,5 @@
1-
# Logs
2-
logs
3-
*.log
4-
npm-debug.log*
5-
yarn-debug.log*
6-
yarn-error.log*
7-
8-
# Runtime data
9-
pids
10-
*.pid
11-
*.seed
12-
*.pid.lock
13-
14-
# Directory for instrumented libs generated by jscoverage/JSCover
15-
lib-cov
16-
17-
# Coverage directory used by tools like istanbul
18-
coverage
19-
20-
# nyc test coverage
21-
.nyc_output
22-
23-
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24-
.grunt
25-
26-
# Bower dependency directory (https://bower.io/)
27-
bower_components
28-
29-
# node-waf configuration
30-
.lock-wscript
31-
32-
# Compiled binary addons (http://nodejs.org/api/addons.html)
33-
build/Release
34-
35-
# Dependency directories
1+
.DS_Store
362
node_modules/
37-
jspm_packages/
38-
39-
# Typescript v1 declaration files
40-
typings/
41-
42-
# Optional npm cache directory
43-
.npm
44-
45-
# Optional eslint cache
46-
.eslintcache
47-
48-
# Optional REPL history
49-
.node_repl_history
50-
51-
# Output of 'npm pack'
52-
*.tgz
53-
54-
# Yarn Integrity file
55-
.yarn-integrity
56-
57-
# dotenv environment variables file
58-
.env
59-
3+
dist/
4+
npm-debug.log
5+
yarn-error.log

‎README.md

+26-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,26 @@
1-
# vue-bulma-typeahead
2-
A Vue.js typeahead component for the Bulma CSS framework
1+
# Vue Bulma Typeahead
2+
3+
> A Vue.js 2 typeahead component for the Bulma CSS framework
4+
5+
## Installation
6+
7+
Install via NPM:
8+
9+
``` bash
10+
npm install vue-bulma-typeahead --save
11+
```
12+
13+
## Build Setup
14+
15+
``` bash
16+
# install dependencies
17+
npm install
18+
19+
# serve with hot reload at localhost:8080
20+
npm run dev
21+
22+
# build for production with minification
23+
npm run build
24+
```
25+
26+
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Vue Bulma Typeahead</title>
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css">
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script src="/dist/build.js"></script>
12+
</body>
13+
</html>

‎index.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Typeahead from './src/Typeahead.vue'
2+
3+
export default Typeahead

‎package.json

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"name": "vue-bulma-typeahead",
3+
"description": "A Vue.js 2 typeahead component for the Bulma CSS framework",
4+
"version": "0.0.1",
5+
"author": "Matthew Rosendin <matt@roseware.io>",
6+
"keywords": [
7+
"vue",
8+
"bulma",
9+
"typeahead",
10+
"autocomplete"
11+
],
12+
"private": false,
13+
"repository": {
14+
"type": "git",
15+
"url": "https://github.com/roseware/vue-bulma-typeahead"
16+
},
17+
"license": "MIT",
18+
"main": "index.js",
19+
"scripts": {
20+
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
21+
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
22+
},
23+
"dependencies": {
24+
"bulma": "^0.4.2",
25+
"node-sass": "^4.5.3",
26+
"sass-loader": "^5.0.1",
27+
"vue": "^2.3.3"
28+
},
29+
"devDependencies": {
30+
"axios": "^0.16.2",
31+
"babel-core": "^6.0.0",
32+
"babel-loader": "^6.0.0",
33+
"babel-preset-env": "^1.5.1",
34+
"cross-env": "^3.0.0",
35+
"css-loader": "^0.25.0",
36+
"file-loader": "^0.9.0",
37+
"html-webpack-plugin": "^2.28.0",
38+
"node-sass": "^4.5.0",
39+
"sass-loader": "^5.0.1",
40+
"style-loader": "^0.18.2",
41+
"vue-loader": "^12.1.0",
42+
"vue-template-compiler": "^2.3.3",
43+
"webpack": "^2.6.1",
44+
"webpack-dev-server": "^2.4.5"
45+
}
46+
}

‎src/Demo.vue

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<template>
2+
<div id="demo">
3+
<section class="hero is-primary">
4+
<div class="hero-body">
5+
<div class="container">
6+
<h1 class="title">
7+
Vue Bulma Typeahead Demo
8+
</h1>
9+
</div>
10+
</div>
11+
</section>
12+
13+
<div class="container">
14+
15+
<div class="notification is-danger" v-if="error">
16+
<button class="delete" @click="error = ''"></button>
17+
{{ error }}
18+
</div>
19+
20+
<div class="columns">
21+
<div class="column is-4 is-offset-4">
22+
<label class="label">Name</label>
23+
<p class="control">
24+
<!-- Start Typeahead Component -->
25+
<typeahead></typeahead>
26+
<!-- End Typeahead Component -->
27+
</p>
28+
</div>
29+
</div>
30+
31+
</div>
32+
</div>
33+
</template>
34+
35+
<script>
36+
import Typeahead from './Typeahead.vue'
37+
import axios from 'axios';
38+
39+
export default {
40+
name: 'demo',
41+
components: { Typeahead },
42+
data () {
43+
return {
44+
error: ''
45+
}
46+
}
47+
}
48+
</script>
49+
50+
<style scoped>
51+
.hero {
52+
margin-bottom: 35px;
53+
}
54+
</style>

‎src/Typeahead.vue

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<div id="typeahead">
3+
<input class="input" type="text" placeholder="Search for users...">
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: 'typeahead',
10+
props: {},
11+
data () {
12+
return {}
13+
},
14+
mounted () {},
15+
methods: {}
16+
}
17+
</script>
18+
19+
<style lang="sass">
20+
@import "~bulma/sass/utilities/_all"
21+
@import "~bulma/sass/elements/form.sass"
22+
</style>

‎src/main.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import Vue from 'vue'
2+
import Demo from './Demo.vue'
3+
4+
new Vue({
5+
el: '#app',
6+
render: h => h(Demo)
7+
})

‎webpack.config.js

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
var path = require('path')
2+
var webpack = require('webpack')
3+
var HtmlWebpackPlugin = require('html-webpack-plugin')
4+
5+
module.exports = {
6+
entry: './src/main.js',
7+
output: {
8+
path: path.resolve(__dirname, './dist'),
9+
publicPath: '/dist/',
10+
filename: 'build.js'
11+
},
12+
plugins: [
13+
new HtmlWebpackPlugin({
14+
title: 'Vue Bulma Typeahead',
15+
filename: './dist/index.html',
16+
template: './index.html'
17+
})
18+
],
19+
module: {
20+
rules: [
21+
{
22+
test: /\.(sass|scss)$/,
23+
use: [
24+
{
25+
loader: "style-loader" // creates style nodes from JS strings
26+
},
27+
{
28+
loader: "css-loader" // translates CSS into CommonJS
29+
},
30+
{
31+
loader: "sass-loader", // compiles Sass to CSS
32+
options: {
33+
includePaths: [path.resolve(__dirname, 'node_modules')]
34+
}
35+
}
36+
]
37+
},
38+
{
39+
test: /\.vue$/,
40+
loader: 'vue-loader',
41+
options: {
42+
loaders: {
43+
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
44+
// the "scss" and "sass" values for the lang attribute to the right configs here.
45+
// other preprocessors should work out of the box, no loader config like this necessary.
46+
'scss': 'vue-style-loader!css-loader!sass-loader',
47+
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
48+
}
49+
// other vue-loader options go here
50+
}
51+
},
52+
{
53+
test: /\.js$/,
54+
loader: 'babel-loader',
55+
exclude: /node_modules/
56+
},
57+
{
58+
test: /\.(png|jpg|gif|svg)$/,
59+
loader: 'file-loader',
60+
options: {
61+
name: '[name].[ext]?[hash]'
62+
}
63+
}
64+
]
65+
},
66+
resolve: {
67+
alias: {
68+
'vue$': 'vue/dist/vue.esm.js'
69+
}
70+
},
71+
devServer: {
72+
historyApiFallback: true,
73+
noInfo: true
74+
},
75+
performance: {
76+
hints: false
77+
},
78+
devtool: '#eval-source-map'
79+
}
80+
81+
if (process.env.NODE_ENV === 'production') {
82+
module.exports.devtool = '#source-map'
83+
// http://vue-loader.vuejs.org/en/workflow/production.html
84+
module.exports.plugins = (module.exports.plugins || []).concat([
85+
new webpack.DefinePlugin({
86+
'process.env': {
87+
NODE_ENV: '"production"'
88+
}
89+
}),
90+
new webpack.optimize.UglifyJsPlugin({
91+
sourceMap: true,
92+
compress: {
93+
warnings: false
94+
}
95+
}),
96+
new webpack.LoaderOptionsPlugin({
97+
minimize: true
98+
})
99+
])
100+
}

0 commit comments

Comments
 (0)
Please sign in to comment.