diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..340c9cb --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "src"] + path = src + url = git@github.com:ericfennis/vue-structure.git diff --git a/.npmignore b/.npmignore index dbc8690..35a4e9a 100644 --- a/.npmignore +++ b/.npmignore @@ -1 +1,4 @@ -/src \ No newline at end of file +/src +build.js +deploy.sh +*.log \ No newline at end of file diff --git a/build.js b/build.js new file mode 100755 index 0000000..c636eb2 --- /dev/null +++ b/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); + }); + } + ) +} diff --git a/docs/guide/assets.md b/docs/guide/assets.md index 4574e1a..435c735 100644 --- a/docs/guide/assets.md +++ b/docs/guide/assets.md @@ -14,12 +14,20 @@ 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 `` 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, @@ -27,3 +35,81 @@ The icon component is **registered globally**, so you don't need to import it in ```html ``` + +## 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 + +``` + +## 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. + + + + diff --git a/docs/guide/the-generator.md b/docs/guide/the-generator.md index 850512f..532ca6b 100644 --- a/docs/guide/the-generator.md +++ b/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 diff --git a/generator/template/README.md b/generator/template/README.md index 3ada691..0780f99 100644 --- a/generator/template/README.md +++ b/generator/template/README.md @@ -1,8 +1,8 @@ -

Vue Structure Logo

+

Vue Structure Logo

# 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 diff --git a/generator/template/_eslintrc.js b/generator/template/_eslintrc.js index a773151..b9c6d9d 100644 --- a/generator/template/_eslintrc.js +++ b/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: { diff --git a/generator/template/src/App/App.scss b/generator/template/src/App/App.scss index 4c40e96..a12dd49 100644 --- a/generator/template/src/App/App.scss +++ b/generator/template/src/App/App.scss @@ -1 +1,4 @@ -// SCSS Styling App.scss \ No newline at end of file +// App Styling +.app { + // +} \ No newline at end of file diff --git a/generator/template/src/App/App.vue b/generator/template/src/App/App.vue index 39ba626..a996223 100644 --- a/generator/template/src/App/App.vue +++ b/generator/template/src/App/App.vue @@ -2,7 +2,7 @@ diff --git a/generator/template/src/assets/styles/main.scss b/generator/template/src/assets/styles/main.scss index 35e1eeb..662fe26 100644 --- a/generator/template/src/assets/styles/main.scss +++ b/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'; \ No newline at end of file diff --git a/generator/template/src/assets/styles/variables/__colors.scss b/generator/template/src/assets/styles/variables/__colors.scss index 353eea1..bac2d56 100644 --- a/generator/template/src/assets/styles/variables/__colors.scss +++ b/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; diff --git a/generator/template/src/components/ExampleComponent/ExampleComponent.scss b/generator/template/src/components/ExampleComponent/ExampleComponent.scss index 293b6b6..bcdaf1c 100644 --- a/generator/template/src/components/ExampleComponent/ExampleComponent.scss +++ b/generator/template/src/components/ExampleComponent/ExampleComponent.scss @@ -1 +1,4 @@ -// ExampleComponent SCSS +// Example Component SCSS Scoped +.example-component { + // +} \ No newline at end of file diff --git a/generator/template/src/components/ExampleComponent/ExampleComponent.vue b/generator/template/src/components/ExampleComponent/ExampleComponent.vue index 859aa02..381e078 100644 --- a/generator/template/src/components/ExampleComponent/ExampleComponent.vue +++ b/generator/template/src/components/ExampleComponent/ExampleComponent.vue @@ -2,11 +2,9 @@