├── .gitignore ├── package.json ├── public ├── favicon.ico └── index.html ├── readme.md ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ ├── About.vue │ └── Skills.vue ├── main.js └── router.js ├── vue.config.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-skills", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "vee-validate": "^2.0.3", 12 | "vue": "^2.5.13", 13 | "vue-router": "^3.0.1" 14 | }, 15 | "devDependencies": { 16 | "@vue/cli-plugin-babel": "^3.0.0-alpha.12", 17 | "@vue/cli-plugin-eslint": "^3.0.0-alpha.12", 18 | "@vue/cli-service": "^3.0.0-alpha.12", 19 | "vue-template-compiler": "^2.5.13" 20 | }, 21 | "babel": { 22 | "presets": [ 23 | "@vue/app" 24 | ] 25 | }, 26 | "eslintConfig": { 27 | "root": true, 28 | "extends": [ 29 | "plugin:vue/essential", 30 | "eslint:recommended" 31 | ] 32 | }, 33 | "postcss": { 34 | "plugins": { 35 | "autoprefixer": {} 36 | } 37 | }, 38 | "browserslist": [ 39 | "> 1%", 40 | "last 2 versions", 41 | "not ie <= 8" 42 | ] 43 | } 44 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/vue2-tutorial/0682889a6b41e77af0fdc4cc6119bf5edba7c00d/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue-skills 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ## Vuejs 2 Tutorial Project from Coursetro 2 | 3 | Visit the full video and written tutorial for this Vue 2 Crash Course: 4 | [Vue Tutorial in 2018 - Learn Vue.js by Example](https://coursetro.com/courses/23/Vue-Tutorial-in-2018---Learn-Vue.js-by-Example) 5 | 6 | This is a simple app that allows you to learn all about the most important Vue 2 topics including: 7 | 8 | - Installing Vue (Three different methods) 9 | - Vue Components 10 | - Templating 11 | - Styling 12 | - Forms 13 | - Animation 14 | - Routing 15 | 16 | Also, be sure to subscribe to our [Official YouTube Channel](http://youtube.com/user/designcourse) 17 | 18 | Enjoy! -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 22 | 23 | 56 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/designcourse/vue2-tutorial/0682889a6b41e77af0fdc4cc6119bf5edba7c00d/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/About.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | -------------------------------------------------------------------------------- /src/components/Skills.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 56 | 57 | 58 | 132 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import VeeValidate from 'vee-validate'; 4 | import router from './router' 5 | 6 | Vue.use(VeeValidate); 7 | Vue.config.productionTip = false 8 | 9 | new Vue({ 10 | router, 11 | render: h => h(App) 12 | }).$mount('#app') 13 | -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import Skills from './components/Skills.vue' 4 | import About from './components/About.vue' 5 | 6 | Vue.use(Router) 7 | 8 | export default new Router({ 9 | routes: [ 10 | { 11 | path: '/', 12 | name: 'skills', 13 | component: Skills 14 | }, 15 | { 16 | path: '/about/:name', 17 | name: 'about', 18 | component: About 19 | } 20 | ] 21 | }) -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = undefined --------------------------------------------------------------------------------