Merge branch 'release/v0.7.8'

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "src"]
+	path = src
+	url = [email protected]:ericfennis/vue-structure.git

.npmignore

@@ -1 +1,4 @@
-/src
+/src
+build.js
+deploy.sh
+*.log

build.js

@@ -0,0 +1,84 @@
+const path = require("path");
+const fs = require("fs-extra");
+const walk = require('walk');
+
+const dist = './generator/template';
+
+const excludeByBuild = [
+  'src/node_modules',
+  'src/.git',
+  'src/public',
+  'src/.browserslistrc',
+  'src/package.json',
+  'src/postcss.config.js',
+  'src/preset.json',
+  'src/yarn.lock',
+];
+
+fs.emptyDir(dist)
+.then(() => {
+  copy();
+})
+.catch(err => {
+  console.error(err)
+});
+
+const copy = () => {
+  fs.copy(
+    './src', 
+    dist,
+    { 
+      filter: src => !excludeByBuild.includes(src)
+    },
+    (err) => {
+      if (err) {
+        console.error(err);
+      } else {
+        console.log("success!");
+        walker();
+      }
+  });
+}
+
+const walker = () => {
+  walk
+  .walk(dist)
+  .on("file", (root, file, next) => {
+    const prefix = file.name.charAt(0);
+    if(prefix === '_' || prefix === '.'){
+      //console.log(root);
+      console.log(`\nFound file:\t`,file.name);
+      renameFile(root, file, prefix)
+      .then(response => {
+        console.log(`Renamed it to:\t`,response);
+        next();
+      })
+      .catch(error => {
+        console.error(error);
+      })
+
+    } else {
+      next();
+    }
+
+  })
+  .on("end", () => {
+    console.log(`\n======================================\n TEMPLATE BUILDED !!!`)
+  })
+}
+
+const renameFile = (root, file, prefix) => {
+  return new Promise(
+    (resolve, reject) => {
+      const renamedFilename = 
+        prefix === '_' ? `_${file.name}` :
+        prefix === '.' ? '_' + file.name.substring(1)
+        : reject('error');
+
+      fs.rename(`${root}/${file.name}`, `${root}/${renamedFilename}`, function(err) {
+        if ( err ) reject(err)
+        resolve(renamedFilename);
+      });
+    }
+  )
+}

docs/guide/assets.md

@@ -14,16 +14,102 @@ Assets folder is for assets accross the project, as fonts, icons, images and sty
 
 ## Fonts
 
-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` . 
+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`.
 
 ## Icons
 
 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. 
 
+```bash
+├── 📂assets
+│    ├── 📂icons
+│    │   ├── example.svg
+│    ..  └── my-icon.svg
+..
+```
+
 ### Using the `<Icon/>` component
 
 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,
 
 ```html
 <Icon name="vue" />
 ```
+
+## Images
+
+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.
+
+To link images in your components or views you can use:
+
+```vue
+<template>
+  <div class="example-component">
+    <h3>Example Component</h3>
+    <img src="@/assets/images/photo.jpeg">
+  </div>
+</template>
+```
+
+## Styles
+
+In the you will find the styling for the Vue Project. Styling is in [Sass](https://sass-lang.com/). 
+
+### Folders
+
+In the styles folder you will find 5 folders: 
+
+- layout
+- partials
+- variables
+- modules
+- vendor
+
+#### Layout folder
+
+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. 
+
+The `_base.scss` file is for writing your base stylings.
+
+#### Partials folder
+
+This folder is for partial styling files such as: **Animations.scss**, **Reset.scss**, **Fonts.css**
+
+#### Variables folder
+
+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.
+
+::: tip Variables in Vue Components.
+All the variables defined in these files are globally imported, you can use them in your components.
+:::
+
+If you want to add more variables files, you can add them to the `main.scss` and `globals.scss` files.
+
+#### Modules folder
+
+This folder is for sass modules like `mixins` and `functions` , here you can define your sass Mixins and Functions. 
+
+By default there is added a Sass mixin for media queries.
+
+::: tip Mixins & Functions in Vue Components.
+Mixins and Functiuons are globally imported, you can use them in your components.
+
+:::
+
+#### Vendor folder
+
+This folder is for styling from vendor plugins, like styling from node_modules or other stylings.
+
+You can add vendor styling from node_modules like this:
+
+```scss
+@import "~[node_module]/path/to/css";
+```
+
+### Globals.scss
+
+In this file all the sass files are importer that will globally imported in all the components files.
+
+
+
+

docs/guide/the-generator.md

@@ -18,7 +18,7 @@ description: >-
 
 ```bash
 # Add Generator in your vue cli project
-vue add structure generator
+vue add structure-generator
 ```
 
 ### Getting Started with Structure Generator

generator/template/README.md

@@ -1,8 +1,8 @@
-<p align=center><img width="410" src="https://user-images.githubusercontent.com/11825403/47913201-848e1000-de9b-11e8-8c51-8d269bdf4ca1.png" alt="Vue Structure Logo"></p>
+<p align=center><img width="410" src="https://raw.githubusercontent.com/ericfennis/vue-structure/4bff88983d079a288be98b0adcb5cc00e43cecc7/src/assets/images/vue-structure.png" alt="Vue Structure Logo"></p>
 
 
 # Vue Structure
-An project boilerplate for Vue.js made for Vue CLI. Clean code structure to speed up your development time. No more wasting time for setting up Vue projects.
+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.
 
 ## Features
 * Router

generator/template/_eslintrc.js

@@ -18,6 +18,10 @@ module.exports = {
       webpack: {
         config: require.resolve('@vue/cli-service/webpack.config.js'),
       },
+      node: {
+        paths: ['@'],
+        extensions: ['.js', '.vue', '.scss']
+      },
     },
   },
   rules: {

generator/template/src/App/App.scss

@@ -1 +1,4 @@
-// SCSS Styling App.scss
+// App Styling
+.app {
+  //
+}

generator/template/src/App/App.vue

@@ -2,7 +2,7 @@
 <script src="./App.js"></script>
 
 <template>
-  <div>
+  <div class="app">
     <RouterView />
   </div>
 </template>

generator/template/src/assets/styles/main.scss

@@ -3,17 +3,21 @@
 @import './partials/fonts';
 @import './partials/animations';
 
+// Variables
 @import './variables/breakpoints';
 @import './variables/colors';
 @import './variables/typography';
 @import './variables/spacings';
 
+// Modules
 @import './modules/mixins';
 @import './modules/functions';
 
+// Layout
 @import './layout/grid';
 @import './layout/form';
 @import './layout/button';
 @import './layout/base';
 
+// Vendor
 @import './vendor/vendor';

generator/template/src/assets/styles/variables/__colors.scss

@@ -1,18 +1,18 @@
 // Color Pallette
 
 $white:     #fff;
-$black:		  #000;
+$black:     #000;
 $darkGray:  #222;
 $gray:      #777;
 
 $red:       red;
 $purple:    purple;
 $blue-dark: darkblue;
-$blue: 		  blue;
+$blue:      blue;
 $cyan:      cyan;
 $green:     green;
 $yellow:    yellow;
-$orange: 		orange;
+$orange:    orange;
 
 // Colors
 $primary-color: $green;

generator/template/src/components/ExampleComponent/ExampleComponent.scss

@@ -1 +1,4 @@
-// ExampleComponent SCSS
+// Example Component SCSS Scoped
+.example-component {
+  //
+}

generator/template/src/components/ExampleComponent/ExampleComponent.vue

@@ -2,11 +2,9 @@
 <script src="./ExampleComponent.js"></script>
 
 <template>
-  <div>
-    <h3>Component</h3>
-    <div>
-      <Icon name="vue" />
-    </div>
+  <div class="example-component">
+    <h3>Example Component</h3>
+    <Icon name="vue" />
 
     <!-- DELETE ME -->
     <figure style="border-radius: 8px; margin: 12vh auto; width: 480px; background: #fafafa; box-shadow: 0 3px 6px rgba(0,0,0,.16); padding:45px 35px; box-sizing: border-box; text-align: center;">

generator/template/src/components/Icon/Icon.scss

@@ -1,3 +1,4 @@
+// Icon Component SCSS Scoped
 .icon {
   display: inline-block;
   vertical-align: middle;

generator/template/src/components/Icon/Icon.vue

@@ -4,7 +4,7 @@
 <template>
   <!-- eslint-disable vue/no-v-html -->
   <span 
-    class="icon"
-    v-html="icon"
+    class="icon" 
+    v-html="icon" 
   />
 </template>

generator/template/src/components/index.js

@@ -1,2 +1,2 @@
 export { default as Icon } from './Icon';
-export { default as ExampleComponent } from './ExampleComponent';
+export { default as ExampleComponent } from './ExampleComponent';

generator/template/src/config/vue.js

@@ -2,8 +2,10 @@ import Vue from 'vue';
 
 // Vue Config
 Vue.config.productionTip = false;
+
+// Vue Prototype Variables
 Vue.prototype.$filters = Vue.options.filters;
 
-// Vue Plugins
+// Add Vue Plugins
 //
-// Vue.use(MyPlugin);
+// Vue.use(MyPlugin)

generator/template/src/directives/index.js

@@ -1,2 +1,2 @@
-/* eslint-disable import/prefer-default-export, import, prettier/prettier */
-export { default as exampleDirective } from './exampleDirective';
+/* eslint-disable import/prefer-default-export,import,prettier/prettier */
+export { default as exampleDirective } from './exampleDirective';

generator/template/src/filters/index.js

@@ -1,2 +1,2 @@
-/* eslint-disable import/prefer-default-export, import, prettier/prettier */
-export { default as exampleFilter } from './exampleFilter';
+/* eslint-disable import/prefer-default-export,import,prettier/prettier */
+export { default as exampleFilter } from './exampleFilter';

generator/template/src/mixins/index.js

@@ -1,2 +1,2 @@
-/* eslint-disable import/prefer-default-export, import, prettier/prettier */
-export { default as exampleMixin } from './exampleMixin';
+/* eslint-disable import/prefer-default-export,import,prettier/prettier */
+export { default as exampleMixin } from './exampleMixin';

generator/template/src/store/modules/app/index.js

@@ -1 +1 @@
-export { default, types } from './app';
+export { default, types } from './app';

generator/template/src/views/Home/Home.scss

@@ -1 +1,4 @@
-// Home SCSS
+// Home SCSS Scoped
+.home {
+  //
+}

generator/template/src/views/Home/Home.vue

@@ -2,8 +2,8 @@
 <script src="./Home.js"></script>
 
 <template>
-  <div>
-    <h1>Home</h1>
+  <div class="home">
+    <h1>Home view</h1>
     <ExampleComponent />
   </div>
 </template>

generator/template/src/views/NotFound/NotFound.scss

@@ -1 +1,4 @@
 // 404 Not Found SCSS
+.not-found {
+  //
+}