@pota/vue-base-skeleton

<div align="center">The skeleton with the <b>base Vue webpack configuration</b> for bootstrapping new projects.</div> <br />

Usage no npm install needed!

<script type="module">
  import potaVueBaseSkeleton from 'https://cdn.skypack.dev/@pota/vue-base-skeleton';
</script>

README

vue-base-skeleton downloads extends

The skeleton with the base Vue webpack configuration for bootstrapping new projects.

Setup 🚀

You can create a new project using the @pota/create package.

npx @pota/create vue-base my-vue-base-app

Standards 📒

This project follows the MediaMonks Frontend Coding Standards

Features 🔋

Pota Commands

build - builds the source using webpack.

npm run build # or npx pota build
Option Type Default Description
analyze {Boolean} false When enabled, will open a bundle report after bundling.
cache {Boolean} true Toggles webpack's caching behavior.
image-compression {Boolean} true Toggles image compression.
mode {development\|production} production Override webpack's mode.
output {String} ./build The build output directory.
source-map {false\|devtool} source-map (production), eval-source-map (development) Sets the style of source-map, for enhanced debugging. Disable or use faster options in you are having out of memory or other performance issues.
public-path {String} / The location of static assets on your production server.
type-check {Boolean} true When disabled, will ignore type related errors.
versioning {Boolean} false When enabled, will copy assets in ./static to a versioned directory in the output (e.g. build/version/v2/static/...).
vue-options-api {Boolean} false Toggles the Vue Options API.
vue-prod-devtools {Boolean} false Toggles support for the Vue Devtools in production.

dev - starts the development service using webpack-dev-server.

npm run dev # or npx pota dev
Option Type Default Description
cache {Boolean} true Toggle webpack's caching behavior.
https {Boolean} false Run the development server with HTTPS.
image-compression {Boolean} true Toggles image compression.
mode {development\|production} production Override webpack's mode.
source-map {false\|devtool} source-map (production), eval-source-map (development) Sets the style of source-map, for enhanced debugging. Disable or use faster options in you are having out of memory or other performance issues.
type-check {Boolean} true Toggles checking for type related errors.
vue-options-api {Boolean} false Toggles the Vue Options API.

hidden TODOs

Scripts

Non-Pota scripts defined in "scripts" of package.json and are runnable using npm run {script}

Script Description
check-types Checks for type errors and unused variables/types in the source directory.
fix Executes all fix:* commands in sequence.
fix:eslint Executes eslint:lint and fixes fixable errors.
fix:prettier Formats the source files using prettier.
lint Executes all lint:* commands in sequence.
lint:eslint Lints the source files using eslint.

JavaScript / TypeScript

hidden TODOs

CSS

hidden TODOs

Images

hidden TODOs

Misc. Assets

hidden TODOs

Linting & Formatting

hidden TODOs

Deployment

hidden TODOs

Git

hidden TODOs

Continuous Integration / Continuous Deployment

Bitbucket

webpack-skeleton comes with bitbucket-pipelines.yml, pre-configured to run check-types, lint and test scripts.

hidden TODOs