├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .markdownlintrc ├── .postcssrc.js ├── .prettierignore ├── .prettierrc ├── .vscode ├── extensions.json └── settings.json ├── README.md ├── build ├── aliases.js ├── build.js ├── check-versions.js ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js ├── webpack.prod.conf.js └── webpack.test.conf.js ├── config ├── dev.env.js ├── index.js ├── prod.env.js └── test.env.js ├── cypress.json ├── index.ejs ├── jest.config.js ├── package.json ├── scripts ├── format.js └── format │ ├── check-formatting.js │ ├── collect-file-reads.js │ ├── detect-prettier-lang.js │ ├── extract-vue-tags.js │ ├── extract-vue-tags.unit.js │ ├── format-with-prettier.js │ └── pretty-diff.js ├── src ├── app.unit.js ├── app.vue ├── assets │ └── README.md ├── components │ ├── README.md │ ├── app-button.unit.js │ ├── app-button.vue │ ├── app-icon.vue │ ├── app-input.unit.js │ ├── app-input.vue │ ├── nav-bar-routes.unit.js │ ├── nav-bar-routes.vue │ ├── nav-bar.unit.js │ └── nav-bar.vue ├── content │ └── exercises │ │ ├── another-exercise.md │ │ └── first-exercise.md ├── design.scss ├── main.js ├── router │ ├── index.js │ ├── layouts │ │ ├── main.unit.js │ │ └── main.vue │ ├── pages │ │ ├── exercise.vue │ │ ├── exercises.vue │ │ ├── home.unit.js │ │ └── home.vue │ ├── routes.js │ └── routes.unit.js ├── state │ ├── README.md │ ├── helpers.js │ ├── modules │ │ ├── content.js │ │ └── index.js │ └── store.js └── utils │ ├── README.md │ ├── format-date-relative.js │ ├── format-date-relative.unit.js │ ├── format-date.js │ └── format-date.unit.js ├── static └── .gitkeep ├── stylelint.config.js ├── test ├── e2e │ ├── fixtures │ │ └── example.json │ ├── plugins │ │ └── index.js │ ├── specs │ │ └── home.e2e.js │ └── support │ │ ├── commands.js │ │ └── index.js └── unit │ └── setup.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx"], 12 | "env": { 13 | "test": { 14 | "presets": ["env", "stage-2"] 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 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 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /dist/ 2 | /test/unit/coverage/ 3 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | module.exports = { 3 | root: true, 4 | parserOptions: { 5 | parser: 'babel-eslint', 6 | sourceType: 'module', 7 | }, 8 | env: { 9 | browser: true, 10 | }, 11 | extends: [ 12 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 13 | 'standard', 14 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 15 | 'plugin:vue/recommended', 16 | // https://github.com/prettier/eslint-config-prettier 17 | 'prettier', 18 | 'prettier/standard', 19 | ], 20 | rules: { 21 | // Only allow debugger in development 22 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 23 | }, 24 | overrides: [ 25 | { 26 | files: ['src/**/*'], 27 | rules: { 28 | // Only allow `console.log` in development 29 | 'no-console': 30 | process.env.NODE_ENV === 'production' 31 | ? ['error', { allow: ['warn', 'error'] }] 32 | : 'off', 33 | }, 34 | }, 35 | { 36 | files: ['**/*.unit.js'], 37 | env: { jest: true }, 38 | globals: { 39 | createComponentMocks: false, 40 | createLocalVue: false, 41 | shallow: false, 42 | mount: false, 43 | }, 44 | }, 45 | { 46 | files: ['**/test/e2e/**/*'], 47 | plugins: ['cypress'], 48 | env: { 49 | 'cypress/globals': true, 50 | }, 51 | }, 52 | ], 53 | } 54 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | test/unit/coverage/ 5 | test/e2e/videos/ 6 | test/e2e/screenshots/ 7 | *.log 8 | *.log.* 9 | package-lock.json -------------------------------------------------------------------------------- /.markdownlintrc: -------------------------------------------------------------------------------- 1 | { 2 | "default": true, 3 | // Rule customizations for markdownlint go here 4 | // https://github.com/DavidAnson/markdownlint/blob/master/doc/Rules.md 5 | 6 | // Disable line length restrictions 7 | "MD013": false 8 | } 9 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | plugins: { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | 'postcss-import': {}, 7 | autoprefixer: {}, 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | **/design.scss 2 | **/package.json 3 | **/node_modules/** 4 | **/dist/** 5 | **/coverage/** -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "tabWidth": 2, 4 | "useTabs": false, 5 | "semi": false, 6 | "singleQuote": true, 7 | "trailingComma": "es5", 8 | "bracketSpacing": true, 9 | "jsxBracketSameLine": false, 10 | "proseWrap": "never", 11 | "arrowParens": "avoid" 12 | } 13 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See http://go.microsoft.com/fwlink/?LinkId=827846 3 | // for the documentation about the extensions.json format 4 | "recommendations": [ 5 | // Syntax highlighting and more for .vue files 6 | // https://github.com/vuejs/vetur 7 | "octref.vetur", 8 | // Lint-on-save with ESLint 9 | // https://github.com/Microsoft/vscode-eslint 10 | "dbaeumer.vscode-eslint", 11 | // Lint-on-save with Stylelint 12 | // https://github.com/shinnn/vscode-stylelint 13 | "shinnn.stylelint", 14 | // Format-on-save with Prettier 15 | "esbenp.prettier-vscode", 16 | // SCSS intellisense 17 | "mrmlnc.vscode-scss", 18 | // Test `.spec.js` files on save with Jest 19 | "Orta.vscode-jest", 20 | // Lint markdown in README files 21 | "DavidAnson.vscode-markdownlint", 22 | // Add icons to more easily distinguish between 23 | // files and folders in the sidebar 24 | "robertohuertasm.vscode-icons" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | // === 3 | // Spacing 4 | // === 5 | "editor.wordWrapColumn": 80, 6 | "editor.insertSpaces": true, 7 | "editor.tabSize": 2, 8 | "editor.trimAutoWhitespace": true, 9 | "files.eol": "\n", 10 | "files.trimTrailingWhitespace": true, 11 | "files.insertFinalNewline": true, 12 | // === 13 | // Files 14 | // === 15 | "files.exclude": { 16 | "**/.git": true, 17 | "**/.DS_Store": true, 18 | "**/db.json": true, 19 | "**/*.log.*": true, 20 | "**/dist": true, 21 | "**/tmp": true, 22 | "**/cache": true, 23 | "**/node_modules": true, 24 | "**/coverage": true 25 | }, 26 | // === 27 | // GENERAL FORMATTING 28 | // === 29 | "editor.formatOnSave": true, 30 | "prettier.printWidth": 80, 31 | // === 32 | // HTML 33 | // === 34 | "html.format.enable": false, 35 | "emmet.excludeLanguages": [], 36 | "emmet.includeLanguages": { 37 | "vue-html": "html" 38 | }, 39 | "emmet.syntaxProfiles": { 40 | "markdown": "html", 41 | "vue": "html", 42 | "vue-html": "html", 43 | "javascript": "html" 44 | }, 45 | "html.suggest.angular1": false, 46 | "html.suggest.ionic": false, 47 | "vetur.validation.template": false, 48 | "vetur.format.defaultFormatter.html": "none", 49 | // === 50 | // JS(ON) 51 | // === 52 | "javascript.format.enable": false, 53 | "json.format.enable": false, 54 | "eslint.run": "onSave", 55 | "eslint.autoFixOnSave": true, 56 | "eslint.validate": ["javascript", "javascriptreact", "vue"], 57 | "vetur.validation.script": false, 58 | "vetur.format.scriptInitialIndent": false, 59 | "vetur.format.defaultFormatter.js": "prettier", 60 | "prettier.eslintIntegration": true, 61 | // === 62 | // CSS 63 | // === 64 | "stylelint.enable": true, 65 | "stylelint.additionalDocumentSelectors": ["vue"], 66 | "css.validate": false, 67 | "scss.validate": false, 68 | "vetur.validation.style": false, 69 | "vetur.format.styleInitialIndent": false, 70 | "vetur.format.defaultFormatter.css": "prettier", 71 | "vetur.format.defaultFormatter.scss": "prettier", 72 | "vetur.format.defaultFormatter.postcss": "prettier", 73 | "prettier.stylelintIntegration": true, 74 | // === 75 | // MARKDOWN 76 | // === 77 | "[markdown]": { 78 | "editor.wordWrap": "wordWrapColumn" 79 | }, 80 | // https://github.com/vscode-icons/vscode-icons/blob/master/src/icon-manifest/supportedExtensions.ts 81 | "vsicons.associations.files": [ 82 | { 83 | "icon": "testjs", 84 | "extensions": ["unit.js"], 85 | "format": "svg" 86 | }, 87 | { 88 | "icon": "js", 89 | "extensions": ["js"], 90 | "format": "svg" 91 | } 92 | ], 93 | // https://github.com/vscode-icons/vscode-icons/blob/master/src/icon-manifest/supportedFolders.ts 94 | "vsicons.associations.folders": [ 95 | { 96 | "icon": "webpack", 97 | "extensions": ["build"], 98 | "format": "svg" 99 | }, 100 | { 101 | "icon": "dist", 102 | "extensions": ["static"], 103 | "format": "svg" 104 | }, 105 | { 106 | "icon": "test", 107 | "extensions": ["unit", "e2e"], 108 | "format": "svg" 109 | }, 110 | { 111 | "icon": "helper", 112 | "extensions": ["custom-assertions"] 113 | } 114 | ] 115 | } 116 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue Workshop 2 | 3 | > We'll cover everything you need to know to get started building world-class Vue applications. Topics will include configuring Webpack for single-file components, setting up the most advanced workflows currently possible, how to organize (and reorganize) increasingly complex applications, and more. 4 | 5 | * [Setup](#setup) 6 | * [Development](#development) 7 | * [Editors](#editors) 8 | * [Visual Studio Code](#visual-studio-code) 9 | * [Formatting](#formatting) 10 | * [Linting](#linting) 11 | * [Aliases](#aliases) 12 | * [HTML](#html) 13 | * [In the `