Super Vue.JS Project

Standar Vue.JS App Project with

  • SCSS + Shopify Polaris: eastsideco/polaris-vue
  • PUG: vue-cli-plugin-pug
View Demo View Github

SCSS + Shopify Polaris-Vue

SCSS

By this dependency you will be avaible to use SCSS on your src code

-From:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

-To:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Shopify Polaris

Brings Shopify’s desinged components to help developers quickly create the best experience for Shopify merchants.

Viewing the demo page

The demo page contains code examples of almost all the functionality in the library, so it can be pretty helpful.

Online version: http://demo.polaris-vue.eastsideco.io/

Vue CLI Pug Plugin

Full documentation is at pugjs.org

Pug is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers. For bug reports, feature requests and questions, open an issue.

You can test drive Pug online here.

Vue CLI 3 plugin to add pug templating to your components and compilation of .pug template files

Pug is a clean, whitespace sensitive syntax for writing HTML. Here is a simple example:

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug is a terse and simple templating language with a
        strong focus on performance and powerful features.

Pug transforms the above to:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pug</title>
    <script type="text/javascript">
      if (foo) bar(1 + 5)
    </script>
  </head>
  <body>
    <h1>Pug - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>Pug is a terse and simple templating language with a strong focus on performance and powerful features.</p>
    </div>
  </body>
</html>

Install Proyect

Project setup

$  npm install

Compiles and hot-reloads for development

$  npm run serve

Compiles and minifies for production

$  npm run build

Lints and fixes files

$  npm run lint