8000 finished Basics · MissionVistaCS/Vue.js-Tutorial@096dfd6 · GitHub
[go: up one dir, main page]
Skip to content

Commit 096dfd6

Browse files
vwheezyvwheezy
committed
finished Basics
1 parent 1496f0f commit 096dfd6

35 files changed

+1152
-1
lines changed

‎Basics/Basic-Structure/2.2.A/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<script src="https://unpkg.com/vue"></script>
66
</head>
77
<body>
8-
<!-- the start of our Vue app -->
8+
<!-- the start of our Vue app/ the root element -->
99
<div id="app">
1010
<img src="https://vuejs.org/images/logo.png" alt="Vue logo">
1111
<h1>{{ greeting }}</h1>

‎Basics/Basic-Structure/2.2.B/.babelrc

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

‎Basics/Basic-Structure/2.2.B/.editorconfig

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true

‎Basics/Basic-Structure/2.2.B/.gitignore

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.DS_Store
2+
node_modules/
3+
dist/
4+
npm-debug.log
5+
yarn-error.log
6+
7+
# Editor directories and files
8+
.idea
9+
*.suo
10+
*.ntvs*
11+
*.njsproj
12+
*.sln

‎Basics/Basic-Structure/2.2.B/index.html

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

‎Basics/Basic-Structure/2.2.B/info.txt

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
This project: 2.2.B
2+
Refers to Chapter 2: Basics
3+
Section 2: Basic Directory Structure
4+
Example B: Webpack Simple Structure
5+
6+
Description: More in depth of the structure of the webpack simple template
7+
8+
Steps:
9+
1. npm install (if you haven't already)
10+
2. npm run dev (for development build)
11+
3. npm run build (for minification)
12+
13+
Reference: Webpack Documentation - https://webpack.js.org/concepts
14+
Vue Loader - https://vue-loader.vuejs.org/en/

‎Basics/Basic-Structure/2.2.B/package.json

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "webpacksimple",
3+
"description": "A Vue.js project",
4+
"version": "1.0.0",
5+
"author": "vwheezy22 <vwhiz22@gmail.com>",
6+
"license": "MIT",
7+
"private": true,
8+
"scripts": {
9+
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
10+
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
11+
},
12+
"dependencies": {
13+
"vue": "^2.5.11"
14+
},
15+
"browserslist": [
16+
"> 1%",
17+
"last 2 versions",
18+
"not ie <= 8"
19+
],
20+
"devDependencies": {
21+
"babel-core": "^6.26.0",
22+
"babel-loader": "^7.1.2",
23+
"babel-preset-env": "^1.6.0",
24+
"babel-preset-stage-3": "^6.24.1",
25+
"cross-env": "^5.0.5",
26+
"css-loader": "^0.28.7",
27+
"file-loader": "^1.1.4",
28+
"vue-loader": "^13.0.5",
29+
"vue-template-compiler": "^2.4.4",
30+
"webpack": "^3.6.0",
31+
"webpack-dev-server": "^2.9.1"
32+
}
33+
}

‎Basics/Basic-Structure/2.2.B/src/App.vue

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<!-- template for Vue to be rendered -->
3+
<div id="app">
4+
<img src="./assets/logo.png">
5+
<h1>{{ msg }}</h1>
6+
<h2>Essential Links</h2>
7+
<ul>
8+
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
9+
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
10+
<li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
11+
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
12+
</ul>
13+
<h2>Ecosystem</h2>
14+
<ul>
15+
<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
16+
<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
17+
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
18+
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
19+
</ul>
20+
</div>
21+
</template>
22+
23+
<script>
24+
// script logic
25+
export default {
26+
name: 'app',
27+
data () {
28+
return {
29+
msg: 'Welcome to Your Vue.js App'
30+
}
31+
}
32+
}
33+
</script>
34+
35+
<style>
36+
// style to be applied to all pages (since it's not scoped)
37+
#app {
38+
font-family: 'Avenir', Helvetica, Arial, sans-serif;
39+
-webkit-font-smoothing: antialiased;
40+
-moz-osx-font-smoothing: grayscale;
41+
text-align: center;
42+
color: #2c3e50;
43+
margin-top: 60px;
44+
}
45+
46+
h1, h2 {
47+
font-weight: normal;
48+
}
49+
50+
ul {
51+
list-style-type: none;
52+
padding: 0;
53+
}
54+
55+
li {
56+
display: inline-block;
57+
margin: 0 10px;
58+
}
59+
60+
a {
61+
color: #42b983;
62+
}
63+
</style>

‎Basics/Basic-Structure/2.2.B/src/assets/logo.png

6.69 KB
Loading

‎Basics/Basic-Structure/2.2.B/src/main.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// entry point for webpack.config.js
2+
import Vue from 'vue'
3+
import App from './App.vue'
4+
5+
new Vue({
6+
el: '#app', // connects the HTML to the Vue instance
7+
render: h => h(App) // short for createElement(App)
8+
// createElement() renders the code from App.vue
9+
})

0 commit comments

Comments
 (0)
0