README.md

Vue Skeleton - CodelineRed

Demo page

Table of contents

• Included Third Party Code
• Install Guides
  • Install Production Build (Recommended)
  • Install Main/ Develop Build
  • Install with Docker (optional)
• Project Commands
• gulpfile-config.js
• Localization
• Links

Included

• jQuery 3
• Bootstrap 5
• Font Awesome 6
• Slick Carousel 1
• LazyLoad 19
• CSS User Agent 2
• Cookieconsent 3
• Vue 3
• Vue Router 4
• Vue i18n 10
• Vue SFC 1

Install Production Build (Recommended)

Open console on your OS and navigate to your project folder. Download zip if you don't have git on your OS.

With Composer

php composer create-project --ignore-platform-reqs --no-dev codelinered/vue-skeleton vue-skeleton "dev-production" && cd vue-skeleton

With GIT

git clone https://github.com/CodelineRed/vue-skeleton.git && cd vue-skeleton && git checkout production

With ZIP

Unix

wget -O vs-prod.zip https://github.com/CodelineRed/vue-skeleton/archive/production.zip && unzip vs-prod.zip && cd vue-skeleton-production

Windows 10+

curl -L -o vs-prod.zip https://github.com/CodelineRed/vue-skeleton/archive/production.zip && tar -xf vs-prod.zip && cd vue-skeleton-production

If you need PHP, you have to go to Install with Docker.

Install Main/ Develop Build

Required

• Node.js >= 18.17
• npm $ npm i npm@latest -g
• gulp-cli $ npm i gulp-cli@latest -g

Open console on your OS and navigate to your project folder. Download zip if you don't have git on your OS.

With Composer

php composer create-project --ignore-platform-reqs codelinered/vue-skeleton && cd vue-skeleton && npm i && gulp build && gulp watch

With GIT

git clone https://github.com/CodelineRed/vue-skeleton.git && cd vue-skeleton && git checkout main && npm i && gulp build && gulp watch

With ZIP

Unix

wget -O vs-main.zip https://github.com/CodelineRed/vue-skeleton/archive/main.zip && unzip vs-main.zip && cd vue-skeleton-main && npm i && gulp build && gulp watch

Windows 10+

curl -L -o vs-main.zip https://github.com/CodelineRed/vue-skeleton/archive/main.zip && tar -xf vs-main.zip && cd vue-skeleton-main && npm i && gulp build && gulp watch

Open localhost:3000 for Website.

Install with Docker (optional)

Required

• Docker

Open console on your OS and navigate to the place where you want to install the project.

Unix

• Start Docker systemctl docker start
• Copy and run commands below

docker run --rm --interactive --tty --volume $PWD:/app composer create-project --ignore-platform-reqs --no-dev codelinered/vue-skeleton vue-skeleton "dev-production" && cd vue-skeleton && docker-compose up -d && xdg-open http://localhost:7702

Windows 10+

• Start Docker Desktop "C:\Program Files\Docker\Docker Desktop.exe"
• Copy and run commands below

docker run --rm --interactive --tty --volume %cd%:/app composer create-project --ignore-platform-reqs --no-dev codelinered/vue-skeleton vue-skeleton "dev-production" && cd vue-skeleton && docker-compose up -d && start http://localhost:7702

Open localhost:7702 for Website.

Project Commands

	Description
gulp	watch files and start BrowserSync
gulp build	executes following tasks: cleanUp, favicon, font, img, js, jsLint, jsRequire, jsRequireSAR, json, scss, scssLint, svg, vue, vueJs, vueJsLint, vueLint
gulp lint	executes following tasks: jsLint, scssLint, vueJsLint, vueLint
gulp cleanUp	clean up public folder
gulp favicon	generate favicons
gulp font	copy font files
gulp img	copy and compress images
gulp js	uglify, minify and concat js files
gulp jsLint	checks js follows lint rules
gulp jsRequire	copy, uglify and rename files for requirejs
gulp jsRequireSAR	search and replace text in third party files (use this after every gulp jsRequire)
gulp json	copy and minify json files
gulp scss	compile, minify and concat scss files
gulp scssLint	checks scss follows lint rules
gulp svg	copy and compress svg files
gulp thankYou	a small thank for you
gulp vue	transpile vue files
gulp vueJs	transpile vue js files
gulp vueJsLint	checks vue js follows lint rules
gulp vueLint	checks vue follows lint rules
gulp watch	watch scss, js, json, vue, img, font and svg files

Localization

• i18n-locales.js
• langswitch.vue

gulpfile-config.js

	Description
browserSyncConfig	Required - Defines which config is used for BrowserSync (default: browserSyncDev)
sourcePath	Required - Path to raw files (default: src/)
publicPath	Required - Path to transpiled files (default: public/)
systemPath	Optional - Alternative Path to transpiled files on CMS, ECS, PHP Framework, ... (default: path/to/system/)
env	Required - Environment dev, test or prod (default: dev)

Links

• ESLint Js Rules
• ESLint Vue Rules
• ESLint Import Rules
• Sass Lint Rules
• Vue SFC
• Path to RegExp