├── .github ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .gitmodules ├── .npmignore ├── LICENCE.txt ├── README.md ├── build.js ├── deploy.sh ├── docs ├── .vuepress │ ├── config.js │ ├── public │ │ ├── favicon.ico │ │ ├── infographic.svg │ │ ├── logo-text.svg │ │ └── logo.svg │ └── styles │ │ └── index.styl ├── README.md └── guide │ ├── Installation.md │ ├── README.md │ ├── assets.md │ ├── components.md │ ├── config.md │ ├── filter-directives-mixins.md │ ├── project-structure.md │ ├── router.md │ ├── store.md │ ├── the-generator.md │ └── views.md ├── generator ├── index.js └── template │ ├── README.md │ ├── _env │ ├── _eslintrc.js │ ├── _gitignore │ ├── _prettierrc │ ├── babel.config.js │ ├── src │ ├── App │ │ ├── App.js │ │ ├── App.scss │ │ ├── App.vue │ │ └── index.js │ ├── assets │ │ ├── fonts │ │ │ └── _gitkeep │ │ ├── icons │ │ │ ├── _gitkeep │ │ │ └── vue.svg │ │ ├── images │ │ │ └── _gitkeep │ │ └── styles │ │ │ ├── globals.scss │ │ │ ├── layout │ │ │ ├── __base.scss │ │ │ ├── __button.scss │ │ │ ├── __form.scss │ │ │ └── __grid.scss │ │ │ ├── main.scss │ │ │ ├── modules │ │ │ ├── __functions.scss │ │ │ └── __mixins.scss │ │ │ ├── partials │ │ │ ├── __animations.scss │ │ │ ├── __fonts.scss │ │ │ └── __reset.scss │ │ │ ├── variables │ │ │ ├── __breakpoints.scss │ │ │ ├── __colors.scss │ │ │ ├── __spacings.scss │ │ │ └── __typography.scss │ │ │ └── vendor │ │ │ └── __vendor.scss │ ├── components │ │ ├── ExampleComponent │ │ │ ├── ExampleComponent.js │ │ │ ├── ExampleComponent.scss │ │ │ ├── ExampleComponent.vue │ │ │ └── index.js │ │ ├── Icon │ │ │ ├── Icon.js │ │ │ ├── Icon.scss │ │ │ ├── Icon.vue │ │ │ └── index.js │ │ ├── __globals.js │ │ └── index.js │ ├── config │ │ ├── index.js │ │ └── vue.js │ ├── directives │ │ ├── __globals.js │ │ ├── exampleDirective.js │ │ └── index.js │ ├── filters │ │ ├── __globals.js │ │ ├── exampleFilter.js │ │ └── index.js │ ├── main.js │ ├── mixins │ │ ├── __globals.js │ │ ├── exampleMixin.js │ │ └── index.js │ ├── router │ │ ├── index.js │ │ ├── router.js │ │ └── routes.js │ ├── store │ │ ├── index.js │ │ ├── modules │ │ │ ├── app │ │ │ │ ├── app.js │ │ │ │ └── index.js │ │ │ └── index.js │ │ └── store.js │ └── views │ │ ├── Home │ │ ├── Home.js │ │ ├── Home.scss │ │ ├── Home.vue │ │ └── index.js │ │ ├── NotFound │ │ ├── NotFound.js │ │ ├── NotFound.scss │ │ ├── NotFound.vue │ │ └── index.js │ │ └── index.js │ └── vue.config.js ├── index.js ├── logo.png ├── package.json ├── preset.json ├── yarn-error.log └── yarn.lock /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Vue CLI Plugin Structure 2 | 3 | > :sparkles: First off, thanks for taking the time to contribute!:sparkles: 4 | 5 | Now, take a moment to be sure your contributions make sense to everyone else. 6 | These are just guidelines, not rules. 7 | Use your best judgment, and feel free to propose changes to this document in a pull request. 8 | 9 | ## How can I contribute? 10 | 11 | ### Improve documentation 12 | 13 | As a developer, you're the perfect candidate to help us improve our documentation. Typo corrections, error fixes, better explanations, more examples, etc. Open issues for things that could be improved. Anything. Even improvements to this document. 14 | 15 | ### Improve issues 16 | 17 | Some issues are created with missing information, not reproducible, or plain invalid. Help make them easier to resolve. Handling issues takes a lot of time that we would rather spend on fixing bugs and adding features. 18 | 19 | ### New ideas 20 | 21 | Do you have awesome ideas for Vue Structure? Don't hesitate, we are open to hear new ideas. Just create an issue. 22 | 23 | ## Reporting Issues 24 | 25 | - Found a problem? Want a new feature? First of all, see if your issue or idea has [already been reported](https://github.com/ericfennis/vue-cli-plugin-structure/issues). 26 | - If not, just open a [new clear and descriptive issue](https://github.com/ericfennis/vue-cli-plugin-structure/issues/new). 27 | - Use a clear and descriptive title. 28 | - Include as much information as possible: Steps to reproduce the issue, error message, Browser version, operating system, etc. 29 | - The more time you put into an issue, the more we will. 30 | 31 | ## Submitting pull requests 32 | 33 | - Non-trivial changes are often best discussed in an issue first, to prevent you from doing unnecessary work. 34 | - For ambitious tasks, you should try to get your work in front of the reviewers for feedback as soon as possible. Open a pull request as soon as you have done the minimum needed to demonstrate your idea. At this early stage, don't worry about making things perfect, or 100% complete. Add a [WIP] prefix to the title, and describe what you still need to do. This lets reviewers know not to nit-pick small details or point out improvements you already know you need to make. 35 | - New features should be accompanied with tests and documentation. 36 | - Don't include unrelated changes. 37 | - Lint and test before submitting the pull request. 38 | - Make the pull request from a **feature branch** to dev branch. 39 | - Use a clear and descriptive title for the pull request and commits. 40 | - You might be asked to do changes to your pull request. There's never a need to open another pull request. [Just update the existing one.](https://github.com/RichardLitt/knowledge/blob/master/github/amending-a-commit-guide.md) 41 | 42 | ## Commit Message Emoji 43 | 44 | Every commit is important. 45 | So let's celebrate each and every commit with a corresponding emoji! :smile: 46 | 47 | ### Which Emoji to Use? :confused: 48 | 49 | Commit Type | Emoji 50 | ---------- | ------------- 51 | Initial Commit | :tada: `:tada:` 52 | Improve the format/structure of the code | :art: `:art:` 53 | Improving performance | :racehorse: `:racehorse:` 54 | Writing docs | :memo: `:memo:` 55 | Fix a bug | :bug: `:bug:` 56 | Remove code or files | :fire: `:fire:` 57 | Fix CI build | :green_heart: `:green_heart:` 58 | Deal with security | :lock: `:lock:` 59 | Upgrade dependencies | :arrow_up: `:arrow_up:` 60 | Downgrading dependencies | :arrow_down: `:arrow_down:` 61 | Add tests | :umbrella: `:umbrella:` 62 | Improving accessibility | :wheelchair: `:wheelchair:` 63 | Add new features | :sparkles: `:sparkles:` 64 | Refactoring | :package: `:package:` 65 | Other | [Be creative](http://www.emoji-cheat-sheet.com/) 66 | 67 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: "[BUG]" 5 | labels: bug 6 | assignees: ericfennis 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 16 | 1. Go to '...' 17 | 2. Click on '....' 18 | 3. Scroll down to '....' 19 | 4. See error 20 | 21 | **Expected behavior** 22 | A clear and concise description of what you expected to happen. 23 | 24 | **Screenshots** 25 | If applicable, add screenshots to help explain your problem. 26 | 27 | **Machine information** 28 | 29 | - OS: [e.g. iOS] 30 | - Browser [e.g. chrome, safari] 31 | - Vue CLI Version 32 | - Vue CLI Plugin Structure Version [e.g. v0.7.8] 33 | - Othe Vue CLI Plugins... with versions 34 | 35 | **Additional context** 36 | Add any other context about the problem here. 37 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '[FEATURE]' 5 | labels: enhancement 6 | assignees: ericfennis 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ### Fixed the following Issues: 2 | - 3 | - 4 | - 5 | 6 | *or* 7 | ### Added the following Features: 8 | - 9 | - 10 | - 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | .test_bash 5 | docs/.vuepress/dist 6 | *.log -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "src"] 2 | path = src 3 | url = git@github.com:ericfennis/vue-structure.git 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /src 2 | build.js 3 | deploy.sh 4 | *.log -------------------------------------------------------------------------------- /LICENCE.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019 Eric Fennis (github.com/ericfennis) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Vue Structure Logo

2 | 3 | ![NPM Downloads](https://img.shields.io/npm/dw/vue-cli-plugin-structure.svg?style=popout) 4 | ![MIT License](https://img.shields.io/github/license/ericfennis/vue-cli-plugin-structure.svg?style=popout) 5 | ![Issues](https://img.shields.io/github/issues/ericfennis/vue-cli-plugin-structure.svg?style=popout) 6 | ![Release Date](https://img.shields.io/github/release-date/ericfennis/vue-cli-plugin-structure.svg?label=Last%20Release&style=popout) 7 | 8 | # Vue CLI Plugin Structure 9 | 10 | Vue Structure is a Vue CLI Plugin that generate a project structure. It's made following the: Javascript Conventions and [Vue Style Guide](https://vuejs.org/v2/style-guide/). 11 | 12 | ## Documentation 13 | 14 | The Vue Structure documentation, visit [Vue Structure Docs](https://ericfennis.github.io/vue-cli-plugin-structure/) 15 | 16 | ## Vue Structure provide 17 | 18 | * Conventional project structure 19 | * Code Comfort 20 | * Modularity 21 | 22 | ## Features 23 | 24 | * Router 25 | * Store (State Management) 26 | * Directives folder (with globals file) 27 | * Filters folder (with globals file) 28 | * Mixins folder (with globals file) 29 | * Views folder (with "404 Not Found view") 30 | * Asset folder included: fonts, icons, images and SCSS files. 31 | * Airbnb Code Style 32 | 33 | ![Infograpic](https://ericfennis.github.io/vue-cli-plugin-structure/infographic.svg) 34 | 35 | ## Packages 36 | 37 | * [Vue CLI](https://cli.vuejs.org/) 38 | * [Vuex](https://github.com/vuejs/vuex) 39 | * [Vue Router](https://github.com/vuejs/vue-router) 40 | * [SCSS](https://github.com/sass/sass) 41 | * [Prettier](https://prettier.io/) 42 | * [ESLint](https://eslint.org/) 43 | 44 | ## Getting Started 45 | 46 | ```bash 47 | # Create new project with vue cli 48 | vue create my-project 49 | ``` 50 | 51 | ```bash 52 | # Go into your new folder 53 | cd my-project 54 | ``` 55 | 56 | ```bash 57 | # Add Vue Structure 58 | vue add structure 59 | ``` 60 | 61 | ```bash 62 | # Start Developing! 63 | yarn serve 64 | ``` 65 | 66 | ## Quick Installation 67 | 68 | ``` sh 69 | vue create --preset ericfennis/vue-structure {my-project} 70 | ``` -------------------------------------------------------------------------------- /build.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const fs = require("fs-extra"); 3 | const walk = require('walk'); 4 | 5 | const dist = './generator/template'; 6 | 7 | const excludeByBuild = [ 8 | 'src/node_modules', 9 | 'src/.git', 10 | 'src/public', 11 | 'src/.browserslistrc', 12 | 'src/package.json', 13 | 'src/postcss.config.js', 14 | 'src/preset.json', 15 | 'src/yarn.lock', 16 | ]; 17 | 18 | fs.emptyDir(dist) 19 | .then(() => { 20 | copy(); 21 | }) 22 | .catch(err => { 23 | console.error(err) 24 | }); 25 | 26 | const copy = () => { 27 | fs.copy( 28 | './src', 29 | dist, 30 | { 31 | filter: src => !excludeByBuild.includes(src) 32 | }, 33 | (err) => { 34 | if (err) { 35 | console.error(err); 36 | } else { 37 | console.log("success!"); 38 | walker(); 39 | } 40 | }); 41 | } 42 | 43 | const walker = () => { 44 | walk 45 | .walk(dist) 46 | .on("file", (root, file, next) => { 47 | const prefix = file.name.charAt(0); 48 | if(prefix === '_' || prefix === '.'){ 49 | //console.log(root); 50 | console.log(`\nFound file:\t`,file.name); 51 | renameFile(root, file, prefix) 52 | .then(response => { 53 | console.log(`Renamed it to:\t`,response); 54 | next(); 55 | }) 56 | .catch(error => { 57 | console.error(error); 58 | }) 59 | 60 | } else { 61 | next(); 62 | } 63 | 64 | }) 65 | .on("end", () => { 66 | console.log(`\n======================================\n TEMPLATE BUILDED !!!`) 67 | }) 68 | } 69 | 70 | const renameFile = (root, file, prefix) => { 71 | return new Promise( 72 | (resolve, reject) => { 73 | const renamedFilename = 74 | prefix === '_' ? `_${file.name}` : 75 | prefix === '.' ? '_' + file.name.substring(1) 76 | : reject('error'); 77 | 78 | fs.rename(`${root}/${file.name}`, `${root}/${renamedFilename}`, function(err) { 79 | if ( err ) reject(err) 80 | resolve(renamedFilename); 81 | }); 82 | } 83 | ) 84 | } 85 | -------------------------------------------------------------------------------- /deploy.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # abort on errors 4 | set -e 5 | 6 | # build 7 | yarn docs:build 8 | 9 | # navigate into the build output directory 10 | cd docs/.vuepress/dist 11 | 12 | git init 13 | git add -A 14 | git commit -m 'Deploy Docs' 15 | 16 | git push -f git@github.com:ericfennis/vue-cli-plugin-structure.git master:gh-pages 17 | 18 | cd - -------------------------------------------------------------------------------- /docs/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | title: 'Vue Structure', 3 | description: 'A Vue CLI plugin to generate a project structure before starting a Vue project', 4 | head: [ 5 | ['link', { rel: 'shortcut icon', href: `/favicon.ico` }], 6 | ], 7 | base: '/vue-cli-plugin-structure/', 8 | ga: 'UA-134637770-1', 9 | themeConfig: { 10 | nav: [ 11 | { text: 'Home', link: '/' }, 12 | { text: 'Guide', link: '/guide/' }, 13 | ], 14 | displayAllHeaders: true, 15 | repo: 'ericfennis/vue-cli-plugin-structure', 16 | docsDir: 'docs', 17 | docsBranch: 'docs', 18 | editLinks: true, 19 | lastUpdated: 'Last Updated', 20 | editLinkText: 'Edit this page on GitHub', 21 | sidebarDepth: 0, 22 | sidebar: { 23 | '/guide/': [ 24 | { 25 | title: 'Getting Started', 26 | sidebarDepth: 0, 27 | collapsable: false, 28 | path: '/guide/', 29 | children: [ 30 | '', 31 | 'installation', 32 | 'project-structure', 33 | ] 34 | }, 35 | { 36 | title: 'Using Vue Structure', 37 | sidebarDepth: 1, 38 | collapsable: false, 39 | children: [ 40 | 'components', 41 | 'views', 42 | 'router', 43 | 'store', 44 | 'filter-directives-mixins', 45 | 'assets', 46 | 'config', 47 | ] 48 | }, 49 | { 50 | title: 'The generator', 51 | sidebarDepth: 1, 52 | collapsable: false, 53 | children: [ 54 | 'the-generator', 55 | ] 56 | }, 57 | ] 58 | }, 59 | }, 60 | plugins: [ 61 | [ 62 | '@vuepress/google-analytics', 63 | { 64 | 'ga': 'UA-134637770-1' 65 | } 66 | ] 67 | ] 68 | } -------------------------------------------------------------------------------- /docs/.vuepress/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ericfennis/vue-cli-plugin-structure/042b4f6e73ae76f721c7be0a3a17bc5a9b26a57f/docs/.vuepress/public/favicon.ico -------------------------------------------------------------------------------- /docs/.vuepress/public/infographic.svg: -------------------------------------------------------------------------------- 1 | 2 | Infographic 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | Assets 19 | 20 | Store 21 | 22 | Mixins 23 | 24 | Router 25 | 26 | Filters 27 | 28 | Views 29 | 30 | Components 31 | 32 | Directives 33 | -------------------------------------------------------------------------------- /docs/.vuepress/public/logo-text.svg: -------------------------------------------------------------------------------- 1 | 3 | logo 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 24 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /docs/.vuepress/public/logo.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 14 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/index.styl: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Asap:400,400i,500,500i,600,600i,700,700i'); 2 | #app 3 | font-family 'Asap', sans-serif 4 | 5 | .navbar 6 | .home-link .site-name 7 | vertical-align: top; 8 | .home-link:before 9 | vertical-align: top; 10 | content "" 11 | display inline-block 12 | height 2.2rem 13 | width 2.2rem 14 | margin-right .2rem 15 | background url("/vue-cli-plugin-structure/logo.svg") -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | heroImage: /logo.svg 4 | actionText: Get Started → 5 | actionLink: /guide/ 6 | features: 7 | - title: Conventional structure 8 | details: It follows the Javascript Conventions and Vue Style Guide. 9 | - title: Code Comfort 10 | details: Structural folder structure give you a good overview of your vue projects. 11 | - title: Modularity 12 | details: It follows the Vue CLI folder structure, so it can work with other Vue CLI Plugins. 13 | footer: LICENCE MIT - Created by Eric Fennis (@ericfennis) 14 | --- 15 | 16 | ## Quick installation 17 | 18 | ``` sh 19 | vue create --preset ericfennis/vue-structure {my-project} 20 | ``` 21 | 22 | ## The Structure 23 | ![Infograpic](/vue-cli-plugin-structure/infographic.svg) 24 | 25 | ## Add-on 26 | 27 | ::: tip 28 | [Vue Structure Generator](https://github.com/ericfennis/vue-cli-plugin-structure-generator) Generate: Components, Views + Routes, Stores, Filters, Directives and Mixins. 29 | ::: 30 | 31 | ## Known compatible other Vue CLI Plugins 32 | 33 | * [**Vue CLI Plugin i18n**](https://github.com/kazupon/vue-cli-plugin-i18n) 34 | * [**Vue CLI Plugin Electron Builder**](https://github.com/nklayman/vue-cli-plugin-electron-builder) 35 | -------------------------------------------------------------------------------- /docs/guide/Installation.md: -------------------------------------------------------------------------------- 1 | # Installation 2 | 3 | ::: warning Vue Structure requires Vue CLI 3. 4 | To download and install see [installation guide](https://cli.vuejs.org/guide/installation.html) 5 | ::: 6 | 7 | ## Quick installation command 8 | 9 | ``` sh 10 | vue create --preset ericfennis/vue-structure {my-project} 11 | ``` 12 | 13 | ## To install vue structure follow these commands 14 | 15 | ``` sh 16 | # Create new project 17 | vue create my-project 18 | 19 | # Go into your new folder 20 | cd my-project 21 | 22 | # Add Vue Structure Plugin 23 | vue add structure 24 | 25 | # Start Developing! 26 | yarn serve 27 | # or 28 | npm run serve 29 | ``` 30 | -------------------------------------------------------------------------------- /docs/guide/README.md: -------------------------------------------------------------------------------- 1 | # Overview 2 | 3 | ## Features 4 | 5 | * Router 6 | * Store (State Management) 7 | * Directives folder (with globals file) 8 | * Filters folder (with globals file) 9 | * Mixins folder (with globals file) 10 | * Views folder (with "404 Not Found view") 11 | * Asset folder included: fonts, icons, images and SCSS files. 12 | * Airbnb Code Style 13 | 14 | ## Packages 15 | 16 | * [Vue CLI](https://cli.vuejs.org/) 17 | * [Vuex](https://github.com/vuejs/vuex) 18 | * [Vue Router](https://github.com/vuejs/vue-router) 19 | * [SCSS](https://github.com/sass/sass) 20 | * [Prettier](https://prettier.io/) 21 | * [ESLint](https://eslint.org/) -------------------------------------------------------------------------------- /docs/guide/assets.md: -------------------------------------------------------------------------------- 1 | # Assets 2 | 3 | Assets folder is for assets accross the project, as fonts, icons, images and styles. 4 | 5 | ```text 6 | ├── 📂assets 7 | │ ├── 📂fonts 8 | │ ├── 📂icons 9 | │ ├── 📂images 10 | │ └── 📂styles 11 | │ 12 | .. 13 | ``` 14 | 15 | ## Fonts 16 | 17 | Fonts you want to load in you can use the fonts folder to place your webfonts. To load the fonts in the project use the the SASS file in `./src/assets/styles/partials/_fonts.scss`. 18 | 19 | ## Icons 20 | 21 | This folder you can use for SVG icons. To use the SVG icons in your project you can use the global Icon component located in the components folder. 22 | 23 | ```bash 24 | ├── 📂assets 25 | │ ├── 📂icons 26 | │ │ ├── example.svg 27 | │ .. └── my-icon.svg 28 | .. 29 | ``` 30 | 31 | ### Using the `` component 32 | 33 | The icon component is **registered globally**, so you don't need to import it in your Vue component again. To use the Icon component: use the filename of the svg and fill it in the the name prop. Omit the file extension, 34 | 35 | ```html 36 | 37 | ``` 38 | 39 | ## Images 40 | 41 | In the images you can place your images you use in the project. When building the images will automatically moved by Vue CLI to a `img` folder in the dist folder. 42 | 43 | To link images in your components or views you can use: 44 | 45 | ```vue 46 | 52 | ``` 53 | 54 | ## Styles 55 | 56 | In the you will find the styling for the Vue Project. Styling is in [Sass](https://sass-lang.com/). 57 | 58 | ### Folders 59 | 60 | In the styles folder you will find 5 folders: 61 | 62 | - layout 63 | - partials 64 | - variables 65 | - modules 66 | - vendor 67 | 68 | #### Layout folder 69 | 70 | The style files in the layout folder are for the base styling of the app. For example all the button stylings in your app you can write it in the `_button.scss` file. 71 | 72 | The `_base.scss` file is for writing your base stylings. 73 | 74 | #### Partials folder 75 | 76 | This folder is for partial styling files such as: **Animations.scss**, **Reset.scss**, **Fonts.css** 77 | 78 | #### Variables folder 79 | 80 | This folder is for all the variables you want to use in the project. Because you can have a lot of diffrent variables for colors, typography etc. There is made for each type of variable a different file. 81 | 82 | ::: tip Variables in Vue Components. 83 | All the variables defined in these files are globally imported, you can use them in your components. 84 | ::: 85 | 86 | If you want to add more variables files, you can add them to the `main.scss` and `globals.scss` files. 87 | 88 | #### Modules folder 89 | 90 | This folder is for sass modules like `mixins` and `functions` , here you can define your sass Mixins and Functions. 91 | 92 | By default there is added a Sass mixin for media queries. 93 | 94 | ::: tip Mixins & Functions in Vue Components. 95 | Mixins and Functiuons are globally imported, you can use them in your components. 96 | 97 | ::: 98 | 99 | #### Vendor folder 100 | 101 | This folder is for styling from vendor plugins, like styling from node_modules or other stylings. 102 | 103 | You can add vendor styling from node_modules like this: 104 | 105 | ```scss 106 | @import "~[node_module]/path/to/css"; 107 | ``` 108 | 109 | ### Globals.scss 110 | 111 | In this file all the sass files are importer that will globally imported in all the components files. 112 | 113 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /docs/guide/components.md: -------------------------------------------------------------------------------- 1 | # Components 2 | 3 | ## Component Folder 4 | 5 | Each component has his own folder included with a: Component Javascript file, SCSS file for styling and a Vue file for html. 6 | 7 | ```bash 8 | 📂src 9 | ├── 📂components 10 | │   ├── 📂Button #component folder 11 | │   │   ├── Button.js 12 | │   │   ├── Button.scss 13 | │   │   ├── Button.vue 14 | │   │   └── index.js 15 | │   │   .. 16 | │   ├── _globals.js 17 | │   └── index.js 18 | .. 19 | ``` 20 | 21 | You see `index.js` files in the Component folder and the components folder. 22 | 23 | **Why index files?** Index files makes importing components in other components shorter. 24 | 25 | Instead of importing each component with a new line: 26 | 27 | ```javascript 28 | // Example view 29 | import FormItem from '@/components/FormInput/FormInput' 30 | import Button from '@/components/Button/Button'; 31 | ``` 32 | 33 | You can import it like: 34 | 35 | ```javascript 36 | // Example view 37 | import { Button, FormItem } from '@/components'; 38 | ``` 39 | 40 | ## Register components globally 41 | 42 | If you want to register components globally you can add components to the `_globals.js` file located in the components folder. If you imported the component to the index file located in the components folder you can simply add it to the coded import and to make the component globally add it to the constant. 43 | 44 | ```javascript 45 | // _globals.js in ./src/components 46 | 47 | import { 48 | Icon, 49 | Button, 50 | } from '.'; 51 | 52 | /** 53 | * Register components globally 54 | * */ 55 | const components = { 56 | Icon, 57 | Button, 58 | }; 59 | 60 | Object.keys(components).forEach(key => Vue.component(key, components[key])); 61 | 62 | ``` 63 | 64 | ------ 65 | ### Using the generator CLI 66 | 67 | If you using the structure generator it can generate the files and imports for you. Depending on the chosen answers it will generates a folder with the files: Index.js, {component}.js, {component}.scss and {component}.vue. 68 | 69 | For more info check the [Generator Guide](./the-generator.md). 70 | -------------------------------------------------------------------------------- /docs/guide/config.md: -------------------------------------------------------------------------------- 1 | # Config 2 | 3 | The config folder you can configure base setting for libraries. By default you will find here a vue.js dat configures Vue. 4 | 5 | ## Example of a Vue.js config file 6 | 7 | ```javascript 8 | import Vue from 'vue'; 9 | import Axios from 'axios'; 10 | import MyVuePlugin from 'MyVuePlugin'; 11 | 12 | // Vue Config 13 | Vue.config.productionTip = false; 14 | 15 | // Vue Prototype Variables 16 | Vue.prototype.$filters = Vue.options.filters; 17 | Vue.prototype.$http = Axios; 18 | 19 | // Vue Plugins 20 | Vue.use(MyVuePlugin); 21 | ``` 22 | 23 | ## Adding config files 24 | 25 | If you want to add new config files you can create new .js files and import them in the index.js file. They doesn't need to exported because it will import it as a file in main.js. 26 | -------------------------------------------------------------------------------- /docs/guide/filter-directives-mixins.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: 'Filters, directives and mixins.' 3 | --- 4 | 5 | # Filters, Directives & Mixins 6 | 7 | ​Filters, Directives & Mixins, each of them have their own folder. In the folder there's located an index.js, \_globals.js file and your ​Filters, Directives & Mixins. Index.js is for indexing all the filters, directives, mixins. Globals file is for register Filters, Directives and mixins globally. 8 | 9 | ## Directories 10 | 11 | ``` sh 12 | 📂src 13 | ├── 📂filters 14 | │ ├── _globals.js 15 | │ ├── {my-filter}.js 16 | │ └── index.js 17 | │  18 | ├── 📂directives 19 | │   ├── _globals.js 20 | │   ├── {my-directive}.js 21 | │   └── index.js 22 | │  23 | ├── 📂mixins 24 | │ ├── _globals.js 25 | │ ├── {my-mixin}.js 26 | │ └── index.js 27 | .. 28 | ``` 29 | 30 | ## Adding a filter/directive/mixin to a component 31 | 32 | You can simply import your filter/directive/mixin in your component file and add it to the filters/directives/mixins object in the Vue Javascript. This is pure Vue, this doesn't require other libraries. 33 | 34 | ```javascript 35 | import { myFilter, myOtherFilter } from '@/filters'; 36 | import { myDirective, myOtherDirective } from '@/directives'; 37 | import { myMixin, myOtherMixin } from '@/mixins'; 38 | 39 | export default { 40 | name: 'My Component', 41 | data() { 42 | return { 43 | message: 'Hello world!' 44 | }; 45 | }, 46 | filters: { 47 | myFilter, 48 | myOtherFilter, 49 | }, 50 | directives: { 51 | myDirective, 52 | myOtherDirective, 53 | }, 54 | mixins: { 55 | myMixin, 56 | myOtherMixin, 57 | }, 58 | }; 59 | 60 | ``` 61 | 62 | ## Register a filter/directive/mixin globally 63 | 64 | In the `_globals.js` you can add add filters/directives/mixins to the global object. Make sure that the import module is also added to the filters/directives/mixins object. 65 | 66 | ```javascript 67 | import Vue from 'vue'; 68 | 69 | import { 70 | myFilter, 71 | } from '.'; 72 | 73 | /** 74 | * Register filters globally 75 | * */ 76 | const filters = { 77 | myFilter, 78 | }; 79 | 80 | Object.keys(filters).forEach(key => Vue.filter(key, filters[key])); 81 | 82 | ``` 83 | 84 | ::: danger 85 | Watch out registering **Mixins** Globally, by making Mixins globally it will add the mixin data to each Vue Component Node. Read [Vue Documentation](https://vuejs.org/v2/guide/mixins.html#Global-Mixin). 86 | ::: 87 | 88 | ### Generate Filters, Directives & Mixins using the Generator CLI 89 | 90 | If you using the structure generator you can generate filters, directives and mixins bij running the generator. You can give a name, and choose if you want to have the filter/directive/mixin globally. It will automatically generate: 91 | 92 | * a empty filter/directive/mixin 93 | * the import in the index file 94 | * _optional:_ register it globally. 95 | 96 | For more info check the [Generator Guide](./the-generator.md). 97 | -------------------------------------------------------------------------------- /docs/guide/project-structure.md: -------------------------------------------------------------------------------- 1 | # Project Structure 2 | 3 | ## Root 4 | Like the default config generated by Vue CLI. In this folder you will find a .env file to define Environment Variables. It's not Git ignored, be careful to store application keys, passwords etc. Instead of using .env you can use .env.local check [Vue CLI Docs](https://cli.vuejs.org/guide/mode-and-env.html#modes) 5 | 6 | ```text 7 | . 8 | ├── .env 9 | ├── .eslintrc.js 10 | ├── .prettierrc 11 | ├── vue.config.js 12 | ├── 📂 public 13 | │   ├── favicon.ico 14 | │   └── index.html 15 | └── 📂 src 16 |    └── ... 17 | ``` 18 | 19 | ## The Source Folder 20 | 21 | ```bash 22 | .. 23 | │ 24 | 📂 src 25 | │ 26 | ├── main.js 27 |    ├── 📂 App 28 |    ├── 📂 assets 29 |    ├── 📂 components 30 |    ├── 📂 config 31 |    ├── 📂 directives 32 |    ├── 📂 filters 33 |    ├── 📂 mixins 34 |    ├── 📂 router 35 |    ├── 📂 store 36 |    └── 📂 views 37 | ``` 38 | -------------------------------------------------------------------------------- /docs/guide/router.md: -------------------------------------------------------------------------------- 1 | # Router & Routes 2 | 3 | Vue router \(index.js\) and the routes file is located in the /Router folder. Routes file is a separated file including the routes. 4 | 5 | The routes folder: 6 | 7 | ```text 8 | 📂src 9 | ├── 📂router 10 | │   ├── index.js 11 | │   └── routes.js 12 | .. 13 | ``` 14 | 15 | ### Router 16 | 17 | In the `index.js` file you will find the configuration of the router. 18 | 19 | Default configuration: 20 | 21 | ```javascript 22 | const router = new Router({ 23 | mode: 'history', 24 | base: process.env.BASE_URL, 25 | linkActiveClass: 'active', 26 | scrollBehavior() { 27 | return { x: 0, y: 0 }; 28 | }, 29 | routes, 30 | }); 31 | ``` 32 | 33 | More about how to configure the Vue Router read their [documentation](https://router.vuejs.org/guide/). 34 | 35 | ### Routes 36 | 37 | The routes are placed in a separated file `routes.js` to keep a good overview of all the configured routes. In the top of the file all the views can be imported. If you have added the view component in the index file located in: `src/views/index.js` , you can simply import all the views with one import. See example below. 38 | 39 | ```javascript 40 | import { 41 | About, 42 | .. 43 | } from '@/views'; 44 | 45 | export default [ 46 | { 47 | path: '/about', 48 | component: About, 49 | name: 'About', 50 | meta: { 51 | title: 'About us', 52 | }, 53 | }, 54 | 55 | ... 56 | ] 57 | ``` 58 | 59 | In the meta Object you can define the title of the view. In router file \(index.js\) there is written a navigation guard to set the meta title every time when the user switch route. 60 | 61 | More information about router, check [Vue Router Documentation](https://router.vuejs.org/guide/essentials/named-routes.html) . 62 | 63 | ### Generate routes using the Generator CLI 64 | 65 | You can generate new routes using the Structure Generator when generating a new view. 66 | 67 | For more info check the [Generator Guide](./the-generator.md). 68 | -------------------------------------------------------------------------------- /docs/guide/store.md: -------------------------------------------------------------------------------- 1 | # Store 2 | 3 | ## The store folder 4 | 5 | The store folder includes an index file for indexing the store.js file, a store.js for initializing the store and a modules folder for store modules. 6 | 7 | ``` text 8 | 📂src 9 | ├── 📂store 10 | │ ├── index.js 11 | │ ├── store.js 12 | │ └── 📂modules 13 | │ ├── 📂app 14 | │ │ ├── app.js 15 | │ │ └── index.js 16 | │ └── index.js 17 | .. 18 | ``` 19 | 20 | ## Adding Store modules 21 | 22 | The store modules are imported with the index.js file located in the store folder. If you want to add more stores you can create a new folder with store javascript in the modules folder and add add the new store in the index.js in the store module folder: 23 | 24 | ```javascript 25 | // Example code in ./src/store/modules/index.js 26 | 27 | export { default as app } from './app'; 28 | export { default as account } from './account'; 29 | export { default as products } from './products'; 30 | 31 | ``` 32 | 33 | ## The Store module 34 | 35 | By the default there is added an app store module located in the modules folder. By default the store module is namespaced. More information about that read [Vuex Documentation](https://vuex.vuejs.org/guide/modules.html#namespacing). 36 | 37 | ## An example of using the store. 38 | 39 | ```javascript 40 | export const types = { 41 | MENU_OPEN: `menuOpen`, 42 | MENU_CLOSE: `menuClose`, 43 | }; 44 | 45 | export default { 46 | namespaced: true, 47 | state: { 48 | menuOpen: false, 49 | }, 50 | getters: { 51 | [types.MENU_OPEN]: state => state.menuOpen, 52 | }, 53 | mutations: { 54 | // MENU 55 | [types.MENU_OPEN](state) { 56 | state.menuOpen = true; 57 | }, 58 | [types.MENU_CLOSE](state) { 59 | state.menuOpen = false; 60 | }, 61 | }, 62 | actions: { 63 | toggleMenu({ commit, state }) { 64 | if (state.menuOpen) { 65 | commit(types.MENU_CLOSE); 66 | } else { 67 | commit(types.MENU_OPEN); 68 | } 69 | }, 70 | }, 71 | }; 72 | 73 | ``` 74 | 75 | ## Example for using the store in a component 76 | 77 | ```javascript 78 | import { mapGetters, mapActions } from 'vuex'; 79 | import { types } from '../../store/modules/app'; 80 | 81 | export default { 82 | name: 'ExampleComponent', 83 | computed: { 84 | ...mapGetters('app', { 85 | isMenuOpen: types.MENU_OPEN, 86 | }), 87 | }, 88 | methods: { 89 | ...mapActions('app', [ 90 | toggleMenu, 91 | ]), 92 | }, 93 | } 94 | 95 | ``` 96 | 97 | ### Using the Vue Structure Generator 98 | 99 | If you using the structure generator you can generate stores fro you. It will ask you a name and it generates a new store folder and add it to the store modules index.js file. 100 | 101 | For more info check the [Generator Guide](./the-generator.md). 102 | 103 | -------------------------------------------------------------------------------- /docs/guide/the-generator.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: >- 3 | The Vue Structure generator is a CLI (Command Line Interface) running in Vue 4 | CLI to generate: Components, Views, stores etc. 5 | --- 6 | 7 | # Using the Structure Generator CLI 8 | 9 | * Components 10 | * Views 11 | * Routes 12 | * Store Modules 13 | * Filters 14 | * Directives 15 | * Mixins 16 | 17 | ### Installation 18 | 19 | ```bash 20 | # Add Generator in your vue cli project 21 | vue add structure-generator 22 | ``` 23 | 24 | ### Getting Started with Structure Generator 25 | 26 | ```bash 27 | # Start using 28 | $ yarn make 29 | 30 | ? What do you want to generate? #(Use arrow keys) 31 | ❯ Component 32 | View 33 | Store 34 | Mixin 35 | Directive 36 | ``` 37 | 38 | ### Shorthand generate commands 39 | 40 | Shorthand commands give you the option to skip the prompt, it will also not generate imports in `_globals.js` files \(for component, directive, filters and mixins\), for views will it skip the route generator as wel. 41 | 42 | **Using Shorthand commands** 43 | 44 | ```text 45 | yarn make -- [] 46 | ``` 47 | 48 | **Examples:** 49 | 50 | ```bash 51 | # Generate component 52 | yarn make --component button 53 | ``` 54 | 55 | ```bash 56 | # Generate view 57 | yarn make --view contact 58 | ``` 59 | 60 | ```bash 61 | # Generate store 62 | yarn make --store products 63 | ``` 64 | 65 | ```bash 66 | # Generate filter 67 | yarn make --filter uppercase 68 | ``` 69 | 70 | ```bash 71 | # Generate directive 72 | yarn make --directive focus 73 | ``` 74 | 75 | ```bash 76 | # Generate mixin 77 | yarn make --mixin scrollTo 78 | ``` 79 | 80 | ::: warning 81 | When using the shorthand command it will generate by using the default settings. By generating a view it skips the route generation. 82 | ::: 83 | -------------------------------------------------------------------------------- /docs/guide/views.md: -------------------------------------------------------------------------------- 1 | # Views 2 | 3 | ### Views Folder 4 | 5 | Same as the component folder each views has his own folder with a: Vue Javascript file, SCSS file for styling and a .Vue file for html. 6 | 7 | ```text 8 | 📂src 9 | ├── 📂views 10 | │   ├── 📂Home #View component folder 11 | │   │   ├── Home.js 12 | │   │   ├── Home.scss 13 | │   │   ├── Home.vue 14 | │   │   └── index.js 15 | │   │   .. 16 | │   └── index.js 17 | .. 18 | ``` 19 | 20 | The `index.js` file is for indexing all the views in the views folder. This makes importing in the routes file easier. See [Router & Routes](router-and-routes.md) how to import views in the router. 21 | 22 | #### Not Found View 23 | 24 | Also added is the Not Found page to show the user a 404 Error not found page. 25 | 26 | ### Adding components to views 27 | 28 | ```javascript 29 | import { Button, FormItem } from '@/components'; 30 | ``` 31 | 32 | ### Using the generator CLI 33 | 34 | If you using the structure generator it can generate the files and imports for you. Depending on the chosen answers it will generates a view folder with the files: Index.js, {component}.js, {component}.scss and {component}.vue. And it will add the import of the view in the index.js file in Views folder. 35 | 36 | You can also generate the route for the view. 37 | 38 | For more info check the [Generator Guide](./the-generator.md). 39 | -------------------------------------------------------------------------------- /generator/index.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | 3 | const originalFiles = [ 4 | 'src/App.vue', 5 | 'src/router.js', 6 | 'src/store.js', 7 | 'src/assets/logo.png', 8 | 'src/components/HelloWorld.vue', 9 | 'src/views/About.vue', 10 | 'src/views/Home.vue', 11 | ] 12 | 13 | let srcFileList = []; 14 | 15 | const devDependencies = { 16 | "node-sass": "^4.9.0", 17 | "sass-loader": "^7.0.1", 18 | "@vue/eslint-config-airbnb": "^4.0.0", 19 | "@vue/eslint-config-prettier": "^3.0.5", 20 | "babel-plugin-transform-imports": "^1.5.1", 21 | "eslint-plugin-html": "^4.0.1", 22 | "eslint-friendly-formatter": "^4.0.1", 23 | "svg-inline-loader": "^0.8.0", 24 | } 25 | 26 | const newDependencies = { 27 | "vue-router": "^3.0.1", 28 | "vuex": "^3.0.1", 29 | } 30 | 31 | module.exports = (api, options, rootOptions, opts) => { 32 | 33 | // Install Dev Dependecies 34 | Object.keys(devDependencies).forEach( dependencyName => { 35 | if (!api.hasPlugin(dependencyName)) { 36 | api.extendPackage({ 37 | "devDependencies": { 38 | [dependencyName] : devDependencies[dependencyName] 39 | } 40 | }) 41 | } 42 | }); 43 | 44 | // Install new Dependecies 45 | Object.keys(newDependencies).forEach( dependencyName => { 46 | if (!api.hasPlugin(dependencyName)) { 47 | api.extendPackage({ 48 | "dependencies": { 49 | [dependencyName] : newDependencies[dependencyName] 50 | } 51 | }) 52 | } 53 | }); 54 | 55 | api.postProcessFiles(files => { 56 | const fileList = Object.keys(files); 57 | srcFileList = fileList.filter(file => /^src\//.test(file)); 58 | }) 59 | 60 | api.onCreateComplete(() => { 61 | srcFileList.forEach(file => { 62 | if(originalFiles.indexOf(file) >= 0) { 63 | const currentPath = api.resolve(file) 64 | try { 65 | fs.unlinkSync(currentPath); 66 | console.log('successfully deleted', file); 67 | } catch (err) { 68 | console.error(err); 69 | } 70 | } 71 | }) 72 | }) 73 | 74 | api.render('./template') 75 | } -------------------------------------------------------------------------------- /generator/template/README.md: -------------------------------------------------------------------------------- 1 |

Vue Structure Logo

2 | 3 | 4 | # Vue Structure 5 | An project boilerplate for Vue CLI. Clean code structure to speed up your development time. No more wasting time to set-up your Vue projects. 6 | 7 | ## Features 8 | * Router 9 | * Store (State Management) 10 | * Directives folder (with globals file) 11 | * Filters folder (with globals file) 12 | * Mixins folder (with globals file) 13 | * Views folder (with "404 Error Page") 14 | * Asset folder for: fonts, icons, images and SCSS files. 15 | 16 | ## Packages 17 | * [Vue CLI](https://cli.vuejs.org/) 18 | * [Vuex](https://github.com/vuejs/vuex) 19 | * [Vue Router](https://github.com/vuejs/vue-router) 20 | * [SCSS](https://github.com/sass/sass) 21 | * [Prettier](https://prettier.io/) 22 | * [ESLint](https://eslint.org/) 23 | 24 | 25 | ## Getting Started 26 | 27 | Vue CLI REQUIRED!
28 | [How to install Vue CLI](https://cli.vuejs.org/guide/installation.html) 29 | 30 | ### 1. Clone 31 | ``` 32 | git clone https://github.com/ericfennis/vue-structure my-project 33 | ``` 34 | ### 2. Enter your new project folder 35 | ``` 36 | cd my-project 37 | ``` 38 | ### 3. Install dependencies 39 | ``` 40 | yarn 41 | # or 42 | npm install 43 | ``` 44 | ### 4. Start dev server 45 | ``` 46 | yarn serve 47 | # or 48 | npm run serve 49 | ``` 50 | 51 | #### For building 52 | ``` 53 | yarn build 54 | ``` 55 | 56 | #### Run your tests 57 | ``` 58 | yarn test 59 | ``` 60 | 61 | #### Lints and fixes files 62 | ``` 63 | yarn lint 64 | ``` 65 | -------------------------------------------------------------------------------- /generator/template/_env: -------------------------------------------------------------------------------- 1 | VUE_APP_NAME = 'New App' 2 | BASE_URL = '/' -------------------------------------------------------------------------------- /generator/template/_eslintrc.js: -------------------------------------------------------------------------------- 1 | // http://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parser: 'vue-eslint-parser', 6 | parserOptions: { 7 | sourceType: 'module', 8 | parser: 'babel-eslint', 9 | }, 10 | env: { 11 | browser: true, 12 | node:true 13 | }, 14 | extends: ['@vue/airbnb', '@vue/prettier', 'plugin:vue/essential', 'plugin:vue/recommended'], 15 | plugins: ['import', 'prettier', 'vue'], 16 | settings: { 17 | 'import/resolver': { 18 | webpack: { 19 | config: require.resolve('@vue/cli-service/webpack.config.js'), 20 | }, 21 | node: { 22 | paths: ['@'], 23 | extensions: ['.js', '.vue', '.scss'] 24 | }, 25 | }, 26 | }, 27 | rules: { 28 | // don't require .vue extension when importing 29 | 'import/extensions': [ 30 | 'error', 31 | 'always', 32 | { 33 | js: 'never', 34 | vue: 'never', 35 | ts: 'never', 36 | }, 37 | ], 38 | // allow debugger during development 39 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 40 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 41 | 'no-param-reassign': 0, 42 | // only for use with getter-setters 43 | 'no-underscore-dangle': 0, 44 | 'prettier/prettier': [ 45 | 'error', 46 | { singleQuote: true, trailingComma: 'all', printWidth: 100, tabWidth: 2 }, 47 | ], 48 | }, 49 | overrides: [ 50 | { 51 | files: ['src/**/*.vue'], 52 | rules: { 53 | 'prettier/prettier': ['off'], 54 | }, 55 | }, 56 | ], 57 | }; 58 | -------------------------------------------------------------------------------- /generator/template/_gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Linter Files 10 | .eslintcache 11 | .stylelintcache 12 | 13 | # Log files 14 | npm-debug.log* 15 | yarn-debug.log* 16 | yarn-error.log* 17 | /*error.txt 18 | /*-debug.log 19 | /*-error.log 20 | 21 | # Editor directories and files 22 | .idea 23 | .vscode 24 | *.suo 25 | *.ntvs* 26 | *.njsproj 27 | *.sln 28 | *.sw* 29 | -------------------------------------------------------------------------------- /generator/template/_prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "tabWidth": 2, 4 | "singleQuote": true, 5 | "trailingComma": "all" 6 | } -------------------------------------------------------------------------------- /generator/template/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/app'], 3 | plugins: [ 4 | [ 5 | 'transform-imports', 6 | { 7 | '@/components': { 8 | /* eslint-disable-next-line no-template-curly-in-string */ 9 | transform: '@/components/${member}', 10 | preventFullImport: true, 11 | }, 12 | }, 13 | ], 14 | ], 15 | }; 16 | -------------------------------------------------------------------------------- /generator/template/src/App/App.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'App', 3 | }; 4 | -------------------------------------------------------------------------------- /generator/template/src/App/App.scss: -------------------------------------------------------------------------------- 1 | // App Styling 2 | .app { 3 | // 4 | } -------------------------------------------------------------------------------- /generator/template/src/App/App.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | -------------------------------------------------------------------------------- /generator/template/src/App/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './App.vue'; 2 | -------------------------------------------------------------------------------- /generator/template/src/assets/fonts/_gitkeep: -------------------------------------------------------------------------------- 1 | # Keep folder -------------------------------------------------------------------------------- /generator/template/src/assets/icons/_gitkeep: -------------------------------------------------------------------------------- 1 | # Keep folder -------------------------------------------------------------------------------- /generator/template/src/assets/icons/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /generator/template/src/assets/images/_gitkeep: -------------------------------------------------------------------------------- 1 | # Keep folder -------------------------------------------------------------------------------- /generator/template/src/assets/styles/globals.scss: -------------------------------------------------------------------------------- 1 | // Globals SASS Variables, Functions & Mixins. 2 | // This will import in every Vue component SCSS File. 3 | // 4 | 5 | @import './variables/breakpoints'; 6 | @import './variables/colors'; 7 | @import './variables/typography'; 8 | @import './variables/spacings'; 9 | 10 | @import './modules/mixins'; 11 | @import './modules/functions'; 12 | -------------------------------------------------------------------------------- /generator/template/src/assets/styles/layout/__base.scss: -------------------------------------------------------------------------------- 1 | // Base styling 2 | body { 3 | @extend %base-style; 4 | } 5 | 6 | h1, h2 ,h3, h4, h5, h6, label { 7 | @extend %heading-style; 8 | } 9 | 10 | h1 { 11 | font-size: 2.4rem; 12 | } 13 | 14 | h2 { 15 | font-size: 2.1rem; 16 | } 17 | 18 | h3 { 19 | font-size: 1.9rem; 20 | } 21 | 22 | h4 { 23 | font-size: 1.6rem; 24 | } 25 | 26 | p { 27 | color: lighten( $black, 40% ); 28 | } 29 | 30 | a { 31 | color: $primary-color; 32 | } 33 | -------------------------------------------------------------------------------- /generator/template/src/assets/styles/layout/__button.scss: -------------------------------------------------------------------------------- 1 | // Button styling 2 | -------------------------------------------------------------------------------- /generator/template/src/assets/styles/layout/__form.scss: -------------------------------------------------------------------------------- 1 | // Form styling 2 | -------------------------------------------------------------------------------- /generator/template/src/assets/styles/layout/__grid.scss: -------------------------------------------------------------------------------- 1 | // Grid styling 2 | -------------------------------------------------------------------------------- /generator/template/src/assets/styles/main.scss: -------------------------------------------------------------------------------- 1 | // Partials 2 | @import './partials/reset'; 3 | @import './partials/fonts'; 4 | @import './partials/animations'; 5 | 6 | // Variables 7 | @import './variables/breakpoints'; 8 | @import './variables/colors'; 9 | @import './variables/typography'; 10 | @import './variables/spacings'; 11 | 12 | // Modules 13 | @import './modules/mixins'; 14 | @import './modules/functions'; 15 | 16 | // Layout 17 | @import './layout/grid'; 18 | @import './layout/form'; 19 | @import './layout/button'; 20 | @import './layout/base'; 21 | 22 | // Vendor 23 | @import './vendor/vendor'; -------------------------------------------------------------------------------- /generator/template/src/assets/styles/modules/__functions.scss: -------------------------------------------------------------------------------- 1 | // Functions -------------------------------------------------------------------------------- /generator/template/src/assets/styles/modules/__mixins.scss: -------------------------------------------------------------------------------- 1 | // Mixins 2 | 3 | // Media Queries 4 | @mixin mobile { 5 | @media all and (max-width: #{$mobile}) { 6 | @content; 7 | } 8 | } 9 | 10 | @mixin tablet { 11 | @media all and (min-width: #{$mobile + .063em}) { 12 | @content; 13 | } 14 | } 15 | 16 | @mixin desktop { 17 | @media all and (min-width: #{$tablet + .063em}) { 18 | @content; 19 | } 20 | } 21 | 22 | @mixin wide { 23 | @media (min-width: #{$desktop + .063em}) { 24 | @content; 25 | } 26 | } -------------------------------------------------------------------------------- /generator/template/src/assets/styles/partials/__animations.scss: -------------------------------------------------------------------------------- 1 | // Animations 2 | 3 | // @keyframes example { 4 | // from { 5 | // background-color: red; 6 | // } 7 | // to { 8 | // background-color: yellow; 9 | // } 10 | // } -------------------------------------------------------------------------------- /generator/template/src/assets/styles/partials/__fonts.scss: -------------------------------------------------------------------------------- 1 | // Fonts 2 | 3 | @import url('https://fonts.googleapis.com/css?family=Roboto:400,500'); 4 | 5 | // @font-face { 6 | // font-family: myNewFont; 7 | // src: url(''); 8 | // } -------------------------------------------------------------------------------- /generator/template/src/assets/styles/partials/__reset.scss: -------------------------------------------------------------------------------- 1 | // /* 2 | // html5doctor.com Reset Stylesheet 3 | // v1.6.1 4 | // Last Updated: 2010-09-17 5 | // Author: Richard Clark - http://richclarkdesign.com 6 | // Twitter: @rich_clark 7 | // */ 8 | html, body, div, span, object, iframe, 9 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 10 | abbr, address, cite, code, 11 | del, dfn, em, img, ins, kbd, q, samp, 12 | small, strong, sub, sup, var, 13 | b, i, 14 | dl, dt, dd, ol, ul, li, 15 | fieldset, form, label, legend, 16 | table, caption, tbody, tfoot, thead, tr, th, td, 17 | article, aside, canvas, details, figcaption, figure, 18 | footer, header, hgroup, menu, nav, section, summary, 19 | time, mark, audio, video { 20 | margin:0; 21 | padding:0; 22 | border:0; 23 | outline:0; 24 | font-size:100%; 25 | vertical-align:baseline; 26 | background:transparent; 27 | } 28 | html { 29 | -ms-text-size-adjust: 100%; 30 | -webkit-text-size-adjust: 100%; 31 | font-size: 62.5%; //10px 32 | } 33 | body { 34 | line-height:1; 35 | } 36 | 37 | *, 38 | *:before, 39 | *:after { 40 | -webkit-font-smoothing: antialiased; 41 | -moz-osx-font-smoothing: grayscale; 42 | box-sizing: inherit; 43 | } 44 | 45 | article,aside,details,figcaption,figure, 46 | footer,header,hgroup,menu,nav,section { 47 | display:block; 48 | } 49 | address { 50 | font-style: normal; 51 | } 52 | nav ul, nav ul li { 53 | list-style:none; 54 | } 55 | 56 | ul, ol { 57 | margin: 0; 58 | padding: 0; 59 | li { 60 | list-style: inside; 61 | } 62 | } 63 | #content { 64 | & ul li { 65 | list-style-type: disc; 66 | } 67 | & ol li { 68 | list-style-type:decimal; 69 | } 70 | } 71 | 72 | blockquote, q { 73 | quotes:none; 74 | } 75 | 76 | blockquote, q { 77 | &:before, &:after { 78 | content:''; 79 | content:none; 80 | } 81 | } 82 | 83 | 84 | a { 85 | margin:0; 86 | padding:0; 87 | font-size:100%; 88 | vertical-align:baseline; 89 | background:transparent; 90 | &:focus { 91 | outline: none; 92 | border:none; 93 | } 94 | } 95 | 96 | ins { 97 | background-color:#ff9; 98 | color:#000; 99 | text-decoration:none; 100 | } 101 | 102 | /* change colours to suit your needs */ 103 | mark { 104 | background-color:#ff9; 105 | color:#000; 106 | font-style:italic; 107 | font-weight:bold; 108 | } 109 | 110 | del { 111 | text-decoration: line-through; 112 | } 113 | 114 | abbr, dfn { 115 | &[title]{ 116 | border-bottom:1px dotted; 117 | cursor:help; 118 | } 119 | } 120 | table { 121 | border-collapse: collapse; 122 | border-spacing: 0; 123 | } 124 | input, textarea, select, button { 125 | border-radius: 0; 126 | -webkit-appearance: none; 127 | &:focus { 128 | outline: none; 129 | border: 1px solid #ccc; 130 | -webkit-appearance: none; 131 | } 132 | } 133 | input { 134 | &[type=submit] { 135 | -webkit-appearance: none; 136 | border:1px solid #999; 137 | } 138 | &.middle:focus { 139 | outline-width: 0; 140 | } 141 | &[type=text]:focus { 142 | outline:none; 143 | } 144 | } 145 | input, select { 146 | vertical-align:middle; 147 | } 148 | /* change border colour to suit your needs */ 149 | hr { 150 | display:block; 151 | height:1px; 152 | border:0; 153 | border-top:1px solid #ccc; 154 | margin:1em 0; 155 | padding:0; 156 | } 157 | code, pre { 158 | font-size: 1em; 159 | } 160 | pre { 161 | font-size: 0.8em; 162 | padding: 1em; 163 | background: #eee; 164 | } -------------------------------------------------------------------------------- /generator/template/src/assets/styles/variables/__breakpoints.scss: -------------------------------------------------------------------------------- 1 | /* Breakpoints 2 | * See the mixin file to see how to use Media Queries. 3 | */ 4 | 5 | /* Mobile 0px - 640px */ 6 | $mobile: 40em; // 640px 7 | 8 | /* Tablet 640px - 1024px */ 9 | $tablet: 64em; // 1024px 10 | 11 | /* Desktop 1024px - 1920px */ 12 | $desktop: 120em; //1920px 13 | 14 | /* Import this file in Javascipt to use those variables in javscript files */ 15 | :export { 16 | mobile: ($mobile * 16) / 1em; 17 | tablet: ($tablet * 16) / 1em; 18 | desktop: ($desktop * 16) / 1em; 19 | } 20 | -------------------------------------------------------------------------------- /generator/template/src/assets/styles/variables/__colors.scss: -------------------------------------------------------------------------------- 1 | // Color Pallette 2 | 3 | $white: #fff; 4 | $black: #000; 5 | $darkGray: #222; 6 | $gray: #777; 7 | 8 | $red: red; 9 | $purple: purple; 10 | $blue-dark: darkblue; 11 | $blue: blue; 12 | $cyan: cyan; 13 | $green: green; 14 | $yellow: yellow; 15 | $orange: orange; 16 | 17 | // Colors 18 | $primary-color: $green; 19 | $secondary-color: $blue-dark; 20 | 21 | $succes-color: $green; 22 | $warning-color: $orange; 23 | $danger-color: $red; -------------------------------------------------------------------------------- /generator/template/src/assets/styles/variables/__spacings.scss: -------------------------------------------------------------------------------- 1 | //Spacings SCSS 2 | 3 | $margin: 1.6rem; 4 | $padding: 1rem; -------------------------------------------------------------------------------- /generator/template/src/assets/styles/variables/__typography.scss: -------------------------------------------------------------------------------- 1 | // Typography 2 | 3 | // Base Font 4 | $font-family: 'Roboto', sans-serif; 5 | $font-family-heading: 'Roboto', sans-serif; 6 | 7 | $font-weight: normal; 8 | $font-size: 1.6rem; 9 | $line-height: 1.4; 10 | 11 | $font-color: #222; 12 | 13 | // Font Extender 14 | 15 | %base-style { 16 | font: $font-weight #{$font-size}/#{$line-height} $font-family; 17 | color: $font-color; 18 | } 19 | 20 | %heading-style { 21 | font-family: $font-family-heading; 22 | font-weight: bold; 23 | } -------------------------------------------------------------------------------- /generator/template/src/assets/styles/vendor/__vendor.scss: -------------------------------------------------------------------------------- 1 | // Vendor Styles 2 | 3 | // @import "~[node_module]/path/to/css"; -------------------------------------------------------------------------------- /generator/template/src/components/ExampleComponent/ExampleComponent.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'ExampleComponent', 3 | }; 4 | -------------------------------------------------------------------------------- /generator/template/src/components/ExampleComponent/ExampleComponent.scss: -------------------------------------------------------------------------------- 1 | // Example Component SCSS Scoped 2 | .example-component { 3 | // 4 | } -------------------------------------------------------------------------------- /generator/template/src/components/ExampleComponent/ExampleComponent.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /generator/template/src/components/ExampleComponent/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './ExampleComponent.vue'; 2 | -------------------------------------------------------------------------------- /generator/template/src/components/Icon/Icon.js: -------------------------------------------------------------------------------- 1 | const svgContext = require.context('../../assets/icons/', false, /\.svg/); 2 | 3 | export default { 4 | name: 'Icon', 5 | props: { 6 | name: { 7 | type: String, 8 | required: true, 9 | }, 10 | }, 11 | computed: { 12 | icon() { 13 | return svgContext(`./${this.name}.svg`); 14 | }, 15 | }, 16 | }; 17 | -------------------------------------------------------------------------------- /generator/template/src/components/Icon/Icon.scss: -------------------------------------------------------------------------------- 1 | // Icon Component SCSS Scoped 2 | .icon { 3 | display: inline-block; 4 | vertical-align: middle; 5 | min-height: 1.6rem; 6 | min-width: 1.6rem; 7 | } -------------------------------------------------------------------------------- /generator/template/src/components/Icon/Icon.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 11 | -------------------------------------------------------------------------------- /generator/template/src/components/Icon/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Icon.vue'; 2 | -------------------------------------------------------------------------------- /generator/template/src/components/__globals.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | /* eslint-disable import/prefer-default-export,import,prettier/prettier */ 4 | import { 5 | Icon, 6 | } from '.'; 7 | 8 | /** 9 | * Register components globally 10 | * */ 11 | const components = { 12 | Icon, 13 | }; 14 | 15 | Object.keys(components).forEach(key => Vue.component(key, components[key])); 16 | -------------------------------------------------------------------------------- /generator/template/src/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as Icon } from './Icon'; 2 | export { default as ExampleComponent } from './ExampleComponent'; 3 | -------------------------------------------------------------------------------- /generator/template/src/config/index.js: -------------------------------------------------------------------------------- 1 | // Import all config files 2 | import './vue'; 3 | -------------------------------------------------------------------------------- /generator/template/src/config/vue.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | // Vue Config 4 | Vue.config.productionTip = false; 5 | 6 | // Vue Prototype Variables 7 | Vue.prototype.$filters = Vue.options.filters; 8 | 9 | // Add Vue Plugins 10 | // 11 | // Vue.use(MyPlugin) 12 | -------------------------------------------------------------------------------- /generator/template/src/directives/__globals.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | /* eslint-disable import/prefer-default-export,import,prettier/prettier */ 4 | import { 5 | // exampleDirective, 6 | } from '.'; 7 | 8 | /** 9 | * Register directives globally 10 | * */ 11 | const directives = { 12 | // exampleDirective, 13 | }; 14 | 15 | Object.keys(directives).forEach(key => Vue.directive(key, directives[key])); 16 | -------------------------------------------------------------------------------- /generator/template/src/directives/exampleDirective.js: -------------------------------------------------------------------------------- 1 | export default { 2 | inserted: el => { 3 | el.focus(); 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /generator/template/src/directives/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/prefer-default-export,import,prettier/prettier */ 2 | export { default as exampleDirective } from './exampleDirective'; 3 | -------------------------------------------------------------------------------- /generator/template/src/filters/__globals.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | /* eslint-disable import/prefer-default-export,import,prettier/prettier */ 4 | import { 5 | // exampleFilter, 6 | } from '.'; 7 | 8 | /** 9 | * Register filters globally 10 | * */ 11 | const filters = { 12 | // exampleFilter, 13 | }; 14 | 15 | Object.keys(filters).forEach(key => Vue.filter(key, filters[key])); 16 | -------------------------------------------------------------------------------- /generator/template/src/filters/exampleFilter.js: -------------------------------------------------------------------------------- 1 | export default value => (value ? 'active' : 'inactive'); 2 | -------------------------------------------------------------------------------- /generator/template/src/filters/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/prefer-default-export,import,prettier/prettier */ 2 | export { default as exampleFilter } from './exampleFilter'; 3 | -------------------------------------------------------------------------------- /generator/template/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App'; 3 | import router from './router'; 4 | import store from './store'; 5 | 6 | // Import config files 7 | import './config'; 8 | 9 | // Import SCSS and Globals 10 | import './assets/styles/main.scss'; 11 | import './components/_globals'; 12 | import './directives/_globals'; 13 | import './filters/_globals'; 14 | import './mixins/_globals'; 15 | 16 | // Vue Init 17 | new Vue({ 18 | router, 19 | store, 20 | render: h => h(App), 21 | }).$mount('#app'); 22 | -------------------------------------------------------------------------------- /generator/template/src/mixins/__globals.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | /* eslint-disable import/prefer-default-export,import,prettier/prettier */ 4 | import { 5 | // exampleMixin, 6 | } from '.'; 7 | 8 | /** 9 | * Register mixins globally 10 | * */ 11 | const mixins = { 12 | // exampleMixin, 13 | }; 14 | 15 | Object.keys(mixins).forEach(key => Vue.mixin(mixins[key])); 16 | -------------------------------------------------------------------------------- /generator/template/src/mixins/exampleMixin.js: -------------------------------------------------------------------------------- 1 | export default { 2 | mounted() { 3 | this.hello(); 4 | }, 5 | methods: { 6 | hello() { 7 | // eslint-disable-next-line 8 | console.log('hello from mixin!'); 9 | }, 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /generator/template/src/mixins/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/prefer-default-export,import,prettier/prettier */ 2 | export { default as exampleMixin } from './exampleMixin'; 3 | -------------------------------------------------------------------------------- /generator/template/src/router/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './router'; 2 | -------------------------------------------------------------------------------- /generator/template/src/router/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Router from 'vue-router'; 3 | 4 | import routes from './routes'; 5 | 6 | Vue.use(Router); 7 | 8 | const router = new Router({ 9 | mode: 'history', 10 | base: process.env.BASE_URL, 11 | linkActiveClass: 'active', 12 | scrollBehavior() { 13 | return { x: 0, y: 0 }; 14 | }, 15 | routes, 16 | }); 17 | 18 | router.beforeEach((to, from, next) => { 19 | next(); 20 | document.title = `${to.meta.title} - ${process.env.VUE_APP_NAME}`; 21 | next(); 22 | }); 23 | 24 | export default router; 25 | -------------------------------------------------------------------------------- /generator/template/src/router/routes.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable-next-line import,prettier/prettier */ 2 | import { 3 | Home, 4 | NotFound, 5 | } from '@/views'; 6 | 7 | export default [ 8 | { 9 | path: '/', 10 | component: Home, 11 | name: 'Home', 12 | meta: { 13 | title: 'Home', 14 | }, 15 | }, 16 | { 17 | path: '*', 18 | component: NotFound, 19 | name: 'Error 404', 20 | meta: { 21 | title: 'Page not Found', 22 | }, 23 | }, 24 | ]; 25 | -------------------------------------------------------------------------------- /generator/template/src/store/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './store'; 2 | -------------------------------------------------------------------------------- /generator/template/src/store/modules/app/app.js: -------------------------------------------------------------------------------- 1 | export const types = { 2 | MUTATION: 'mutation', 3 | }; 4 | 5 | export default { 6 | state: { 7 | value: null, 8 | }, 9 | getters: { 10 | [types.MUTATION]: state => state.value, 11 | }, 12 | mutations: { 13 | [types.MUTATION](state, value) { 14 | state.value = value; 15 | }, 16 | }, 17 | actions: {}, 18 | }; 19 | -------------------------------------------------------------------------------- /generator/template/src/store/modules/app/index.js: -------------------------------------------------------------------------------- 1 | export { default, types } from './app'; 2 | -------------------------------------------------------------------------------- /generator/template/src/store/modules/index.js: -------------------------------------------------------------------------------- 1 | // STORE MODULES IMPORTER 2 | // Add new modules by adding: 3 | // + export { default as {MyStoreModule} } from './{MyStoreModule}'; 4 | // 5 | /* eslint-disable import/prefer-default-export, import, prettier/prettier */ 6 | export { default as app } from './app'; 7 | -------------------------------------------------------------------------------- /generator/template/src/store/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | 4 | import * as modules from './modules'; 5 | 6 | Vue.use(Vuex); 7 | 8 | export default new Vuex.Store({ 9 | modules, 10 | strict: process.env.NODE_ENV !== 'production', 11 | }); 12 | -------------------------------------------------------------------------------- /generator/template/src/views/Home/Home.js: -------------------------------------------------------------------------------- 1 | import { ExampleComponent } from '@/components'; 2 | 3 | export default { 4 | name: 'Home', 5 | components: { 6 | ExampleComponent, 7 | }, 8 | }; 9 | -------------------------------------------------------------------------------- /generator/template/src/views/Home/Home.scss: -------------------------------------------------------------------------------- 1 | // Home SCSS Scoped 2 | .home { 3 | // 4 | } -------------------------------------------------------------------------------- /generator/template/src/views/Home/Home.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /generator/template/src/views/Home/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Home.vue'; 2 | -------------------------------------------------------------------------------- /generator/template/src/views/NotFound/NotFound.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'NotFound', 3 | }; 4 | -------------------------------------------------------------------------------- /generator/template/src/views/NotFound/NotFound.scss: -------------------------------------------------------------------------------- 1 | // 404 Not Found SCSS 2 | .not-found { 3 | // 4 | } -------------------------------------------------------------------------------- /generator/template/src/views/NotFound/NotFound.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /generator/template/src/views/NotFound/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './NotFound.vue'; 2 | -------------------------------------------------------------------------------- /generator/template/src/views/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/prefer-default-export,import,prettier/prettier */ 2 | export { default as Home } from './Home'; 3 | export { default as NotFound } from './NotFound'; 4 | -------------------------------------------------------------------------------- /generator/template/vue.config.js: -------------------------------------------------------------------------------- 1 | // vue.config.js 2 | module.exports = { 3 | css: { 4 | loaderOptions: { 5 | sass: { 6 | data: `@import "@/assets/styles/globals.scss";`, 7 | }, 8 | }, 9 | }, 10 | chainWebpack: config => { 11 | // SVG Loader 12 | const svgRule = config.module.rule('svg'); 13 | svgRule.uses.clear(); 14 | svgRule 15 | .use('svg-inline-loader') 16 | .loader('svg-inline-loader') 17 | .end(); 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = (api, options) => {} 2 | -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ericfennis/vue-cli-plugin-structure/042b4f6e73ae76f721c7be0a3a17bc5a9b26a57f/logo.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cli-plugin-structure", 3 | "description": "Vue Structure Cli Plugin for rendering project structure", 4 | "author": "Eric Fennis ", 5 | "license": "MIT", 6 | "version": "0.7.8", 7 | "main": "index.js", 8 | "scripts": { 9 | "build": "node ./build.js", 10 | "docs:dev": "vuepress dev docs", 11 | "docs:build": "vuepress build docs", 12 | "docs:deploy": "./deploy.sh" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/ericfennis/vue-cli-plugin-structure.git" 17 | }, 18 | "keywords": [ 19 | "vue", 20 | "cli", 21 | "structure", 22 | "starter", 23 | "template" 24 | ], 25 | "bugs": { 26 | "url": "https://github.com/ericfennis/vue-cli-plugin-structure/issues" 27 | }, 28 | "homepage": "https://github.com/ericfennis/vue-cli-plugin-structure#readme", 29 | "publishConfig": { 30 | "access": "public" 31 | }, 32 | "devDependencies": { 33 | "@vuepress/plugin-google-analytics": "^1.0.0-alpha.0", 34 | "fs-extra": "^7.0.1", 35 | "vuepress": "^1.0.0-alpha.37", 36 | "walk": "^2.3.14" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /preset.json: -------------------------------------------------------------------------------- 1 | { 2 | "useConfigFiles": true, 3 | "router": true, 4 | "routerHistoryMode": true, 5 | "vuex": true, 6 | "plugins": { 7 | "@vue/cli-plugin-babel": {}, 8 | "@vue/cli-plugin-eslint": { 9 | "config": "base", 10 | "lintOn": [ 11 | "save" 12 | ] 13 | }, 14 | "vue-cli-plugin-structure": {}, 15 | "vue-cli-plugin-structure-generator": {} 16 | } 17 | } --------------------------------------------------------------------------------