Draw an svg polygon with Vue. Based on Brent Jackson https://github.com/jxnblk/paths.
# Download repository:
git clone https://gitlab.com/stayacid/draw-svg
# Install dependencies:
npm i
# Server with hot reload at http://localhost:8081/
npm run dev
# Output will be at dist/ folder
npm run build
src/pug/pages/index.pug
- main app PUGsrc/scss
- put custom app SCSS styles here. Don't forget to import them inindex.js
src/assets/img
- put images here. Don't forget to use correct path:assets/img/some.jpg
src/js
- put custom app scripts heresrc/index.js
- main app file where you include/import all required libs and init appsrc/components
- folder with custom.vue
componentssrc/store
- app store for vuestatic/
- folder with extra static assets that will be copied into output folder
Easy way to move all files. Default:
const PATHS = {
// Path to main app dir
src: path.join(__dirname, '../src'),
// Path to Output dir
dist: path.join(__dirname, '../dist'),
// Path to Second Output dir (js/css/fonts etc folder)
assets: 'assets/'
}
Change any folders:
const PATHS = {
// src must be src
src: path.join(__dirname, '../src'),
// dist to public
dist: path.join(__dirname, '../public'),
// assets to static
assets: 'static/'
}
- Install libs
- Import libs in
./index.js
// React example
import React from 'react'
// Bootstrap example
import Bootstrap from 'bootstrap/dist/js/bootstrap.min.js'
import 'bootstrap/dist/js/bootstrap.min.js'
- Install libs
- Go to
/assets/scss/utils/libs.scss
- Import libs in node modules
// Sass librarys example:
@import '../../node_modules/spinners/stylesheets/spinners';
// CSS librarys example:
@import '../../node_modules/flickity/dist/flickity.css';
- Create another js module in
./js/
folder - Import modules in
./js/index.js
file
// another js file for example
import './common.js'
- .pug dir:
./src/pug
- Configurations: in
./build/webpack.base.conf.js
const PAGES_DIR = PATHS.src
Usage:
All pages must be created in the ./src/pug/pages
folder.
Example:
./src/pug/pages/index.pug
./src/pug/pages/index.pug
Example for ./src/pug/pages
:
- Create folder for all pug files in
./src
. Be like:./src/pages
- Change
./build/webpack.base.conf.js
const PAGES_DIR:
// Old path
// const PAGES_DIR = PATHS.src
// Your new path
const PAGES_DIR = `${PATHS.src}/pages`
- Rerun webpack dev server
Usage:
All files must be created in the ./src/pug/pages
folder.
Example:
./src/pug/pages/index.pug
./src/pug/pages/about.pug
Automatic creation any html pages:
- Create another html file in
./src
(main folder) - Open new page
http://localhost:8081/about.html
(Don't forget to RERUN dev server) See more - commit
Manual (not Automaticlly) creation any html pages (Don't forget to RERUN dev server and COMMENT lines above)
- Create another html file in
./src
(main folder) - Go to
./build/webpack.base.conf.js
- Comment lines above (create automaticlly html pages)
- Create new page in html:
new HtmlWebpackPlugin({
template: `${PAGES_DIR}/index.html`,
filename: './index.html',
inject: true
}),
new HtmlWebpackPlugin({
template: `${PAGES_DIR}/another.html`,
filename: './another.html',
inject: true
}),
- Open new page
http://localhost:8081/about.html
(Don't forget to RERUN dev server)
Сombine the first method and the second. Example:
...PAGES.map(page => new HtmlWebpackPlugin({
template: `${PAGES_DIR}/${page}`,
filename: `./${page}`
})),
new HtmlWebpackPlugin({
template: `${PAGES_DIR}/about/index.html`,
filename: './about/index.html',
inject: true
}),
new HtmlWebpackPlugin({
template: `${PAGES_DIR}/about/portfolio.html`,
filename: './about/portfolio.html',
inject: true
}),
Create your component in /components/
HTML Usage:
- Init component in
index.js
:
Vue.component('example-component', require('./components/Example.vue').default)
- Any html files:
<example-component />
VUE Usage:
- import components in .vue:
import example from '~/components/Example.vue'
- Register component:
components: {
example
}
- Init in vue component:
<example />
Сhoose one of the ways:
- Handle menthod,
- Use mixin;
Add @font-face in /scss/utils/fonts.scss
:
@include font-face(
"MullerBold",
"../fonts/MullerBold",
400,
normal,
woff woff2
);
Add vars for font in /scss/global/helpers/_variables.scss
:
$mySecontFont : 'Helvetica-Base', Arial, sans-serif;
By default template support only modern format fonts: .woff, .woffs;
Usage:
- Put your font to
src/assets/fonts/FOLDERNAME/FONTNAME
. FOLLOW: Files Required: Example:.woff, .woffs
formats; - Go to
fonts.scss
; - Use mixin
Example:
@include font-face("OpenSans", "../fonts/OpenSans/opensans");
, Example 2:@include font-face("OpenSans", "../fonts/OpenSans/opensansItalic", 400, italic);
.
Images will be compressed on build by 'imagemin-webpack-plugin'. SVG won't be compressed
- Building SVG Icons with React
- Geomicons Open - hand-coded SVG icons
- blk - style guide