Skip to content

Commit b44bd09

Browse files
author
Shaun
authored
Merge pull request iamshaunjp#1 from iamshaunjp/lesson-21
Lesson 21
2 parents 0e6e94c + 7429107 commit b44bd09

File tree

12 files changed

+274
-41
lines changed

12 files changed

+274
-41
lines changed

‎.babelrc

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"presets": [
3+
["latest", {
4+
"es2015": { "modules": false }
5+
}]
6+
]
7+
}

‎.gitignore

Lines changed: 5 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,5 @@
1-
# Logs
2-
logs
3-
*.log
4-
npm-debug.log*
5-
6-
# Runtime data
7-
pids
8-
*.pid
9-
*.seed
10-
11-
# Directory for instrumented libs generated by jscoverage/JSCover
12-
lib-cov
13-
14-
# Coverage directory used by tools like istanbul
15-
coverage
16-
17-
# nyc test coverage
18-
.nyc_output
19-
20-
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
21-
.grunt
22-
23-
# node-waf configuration
24-
.lock-wscript
25-
26-
# Compiled binary addons (http://nodejs.org/api/addons.html)
27-
build/Release
28-
29-
# Dependency directories
30-
node_modules
31-
jspm_packages
32-
33-
# Optional npm cache directory
34-
.npm
35-
36-
# Optional REPL history
37-
.node_repl_history
1+
.DS_Store
2+
node_modules/
3+
dist/
4+
npm-debug.log
5+
yarn-error.log

‎README.md

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
1-
# vuejs-playlist
2-
Course files for the Vue.js 2 playlist on The Net Ninja YouTube channel
1+
# cli-project
32

4-
# How to use
5-
Each branch represents a specific lesson / video in the playlist. For example, the lesson-9 branch will contain the final state of the code in lesson 9 of the series. Enjoy :).
3+
> A Vue.js project
4+
5+
## Build Setup
6+
7+
``` bash
8+
# install dependencies
9+
npm install
10+
11+
# serve with hot reload at localhost:8080
12+
npm run dev
13+
14+
# build for production with minification
15+
npm run build
16+
```
17+
18+
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).

‎index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>cli-project</title>
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
<script src="/dist/build.js"></script>
10+
</body>
11+
</html>

‎package.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "vuejs-playlist",
3+
"description": "A Vue.js project",
4+
"version": "1.0.0",
5+
"author": "Shaun",
6+
"private": true,
7+
"scripts": {
8+
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
9+
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
10+
},
11+
"dependencies": {
12+
"vue": "^2.2.1"
13+
},
14+
"devDependencies": {
15+
"babel-core": "^6.0.0",
16+
"babel-loader": "^6.0.0",
17+
"babel-preset-latest": "^6.0.0",
18+
"cross-env": "^3.0.0",
19+
"css-loader": "^0.25.0",
20+
"file-loader": "^0.9.0",
21+
"vue-loader": "^11.1.4",
22+
"vue-template-compiler": "^2.2.1",
23+
"webpack": "^2.2.0",
24+
"webpack-dev-server": "^2.2.0"
25+
}
26+
}

‎src/App.vue

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div>
3+
<app-header></app-header>
4+
<app-ninjas></app-ninjas>
5+
<app-footer></app-footer>
6+
</div>
7+
</template>
8+
9+
<script>
10+
// Imports
11+
import Header from './components/Header.vue';
12+
import Footer from './components/Footer.vue';
13+
import Ninjas from './components/Ninjas.vue';
14+
15+
export default {
16+
components: {
17+
'app-header': Header,
18+
'app-footer': Footer,
19+
'app-ninjas': Ninjas
20+
},
21+
data () {
22+
return {
23+
24+
}
25+
}
26+
}
27+
</script>
28+
29+
<style>
30+
body{
31+
margin: 0;
32+
font-family: 'Nunito SemiBold';
33+
}
34+
</style>

‎src/assets/logo.png

6.69 KB
Loading

‎src/components/Footer.vue

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<footer>
3+
<p>{{ copyright }}</p>
4+
</footer>
5+
</template>
6+
<script>
7+
export default {
8+
data(){
9+
return{
10+
copyright: 'Copyright 2017 Vue Ninjas'
11+
}
12+
}
13+
}
14+
</script>
15+
<style scoped>
16+
footer{
17+
background: #222;
18+
padding: 6px;
19+
}
20+
p{
21+
color: lightgreen;
22+
text-align: center;
23+
}
24+
</style>

‎src/components/Header.vue

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<header>
3+
<h1>{{ title }}</h1>
4+
</header>
5+
</template>
6+
<script>
7+
export default {
8+
data(){
9+
return{
10+
title: 'Vue Ninjas'
11+
}
12+
}
13+
}
14+
</script>
15+
<style scoped>
16+
header{
17+
background: lightgreen;
18+
padding: 10px;
19+
}
20+
h1{
21+
color: #222;
22+
text-align: center;
23+
}
24+
</style>

‎src/components/Ninjas.vue

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<div id="ninjas">
3+
<ul>
4+
<li v-for="ninja in ninjas" v-on:click="ninja.show = !ninja.show">
5+
<h2>{{ ninja.name }}</h2>
6+
<h3 v-show="ninja.show">{{ ninja.speciality }}</h3>
7+
</li>
8+
</ul>
9+
</div>
10+
</template>
11+
<script>
12+
export default {
13+
data(){
14+
return{
15+
ninjas: [
16+
{name: 'Ryu', speciality: 'Vue Components', show: false},
17+
{name: 'Crystal', speciality: 'HTML Wizardry', show: false},
18+
{name: 'Hitoshi', speciality: 'Click Events', show: false},
19+
{name: 'Tango', speciality: 'Conditionals', show: false},
20+
{name: 'Kami', speciality: 'Webpack', show: false},
21+
{name: 'Yoshi', speciality: 'Data Diggin', show: false}
22+
]
23+
}
24+
}
25+
}
26+
</script>
27+
<style scoped>
28+
#ninjas{
29+
width: 100%;
30+
max-width: 1200px;
31+
margin: 40px auto;
32+
padding: 0 20px;
33+
box-sizing: border-box;
34+
}
35+
ul{
36+
display: flex;
37+
flex-wrap: wrap;
38+
list-style-type: none;
39+
padding: 0;
40+
}
41+
li{
42+
flex-grow: 1;
43+
flex-basis: 300px;
44+
text-align: center;
45+
padding: 30px;
46+
border: 1px solid #222;
47+
margin: 10px;
48+
}
49+
</style>

‎src/main.js

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

‎webpack.config.js

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
var path = require('path')
2+
var webpack = require('webpack')
3+
4+
module.exports = {
5+
entry: './src/main.js',
6+
output: {
7+
path: path.resolve(__dirname, './dist'),
8+
publicPath: '/dist/',
9+
filename: 'build.js'
10+
},
11+
module: {
12+
rules: [
13+
{
14+
test: /\.vue$/,
15+
loader: 'vue-loader',
16+
options: {
17+
loaders: {
18+
}
19+
// other vue-loader options go here
20+
}
21+
},
22+
{
23+
test: /\.js$/,
24+
loader: 'babel-loader',
25+
exclude: /node_modules/
26+
},
27+
{
28+
test: /\.(png|jpg|gif|svg)$/,
29+
loader: 'file-loader',
30+
options: {
31+
name: '[name].[ext]?[hash]'
32+
}
33+
}
34+
]
35+
},
36+
resolve: {
37+
alias: {
38+
'vue$': 'vue/dist/vue.esm.js'
39+
}
40+
},
41+
devServer: {
42+
historyApiFallback: true,
43+
noInfo: true
44+
},
45+
performance: {
46+
hints: false
47+
},
48+
devtool: '#eval-source-map'
49+
}
50+
51+
if (process.env.NODE_ENV === 'production') {
52+
module.exports.devtool = '#source-map'
53+
// http://vue-loader.vuejs.org/en/workflow/production.html
54+
module.exports.plugins = (module.exports.plugins || []).concat([
55+
new webpack.DefinePlugin({
56+
'process.env': {
57+
NODE_ENV: '"production"'
58+
}
59+
}),
60+
new webpack.optimize.UglifyJsPlugin({
61+
sourceMap: true,
62+
compress: {
63+
warnings: false
64+
}
65+
}),
66+
new webpack.LoaderOptionsPlugin({
67+
minimize: true
68+
})
69+
])
70+
}

0 commit comments

Comments
 (0)