Wilson Mar bio photo

Wilson Mar

Hello. Hire me!

Email me Calendar Skype call 310 320-7878

LinkedIn Twitter Gitter Instagram Youtube

Github Stackoverflow Pinterest

This is the last framework you’ll ever need to switch to, just like ReactJs. And Angular.


Overview

Here is a short introduction to programming using the Vue.js JavaScript Framework.

Vue.js is a JavaScript Framework for building reactive / “progressive” components for modern web interfaces (sophisticated Single-Page Applications).

The core library is focused on the view layer only.

It allows you to write your JS, HTML, and CSS in a single file, has powerful data bindings, focuses on composability, is small, and is insanely fast.

Developers began flocking to Vue.js as a replacement React.js since 2016. This is not just for its improved speed, but for true open-source MIT licensing. Facebook’s license for React is strange and ominous for many. In 2018 Facebook “fixed” their licensing more standard, but distrust remains.

The vuejs.org/ website is built using Hexo from https://github.com/vuejs/vuejs.org, with a Chinese translation at https://github.com/vuejs/cn.vuejs.org

Evan You (@youyuxi) is the author, depending on Patreon for funding. His https://github.com/yyx990803 provides vue-devtools

https://github.com/vuejs/awesome-vue lists resources in its ecosystem

Installation

https://github.com/vuejs/vue was the single most starred repo (among all repos) on Github in 2017. That’s how popular Vue is.

Simplest sample code

From https://vuejs.org/v2/examples/

<!DOCTYPE html>
<html>
<head>
<title>VueJs Sample</title>
</head>
<body>
    <div id="root">
        <input type="text" id="input" v-model="message">
        <p>The value of the input is: .</p>
    </div>
    <script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#root',
            data: {
                message: 'Hello World'
            }
        })
    </script>
</body>
</html>
   

https://unpkg.com is a CDN.

PROTIP: The URL has a hard-code version, which requires update occassionally. So get notifications. https://github.com/vuejs/vue-hackernews-2.0

Sample templates

https://stackshare.io/vuetify is a Google Material Design template using VueJs.

https://github.com/snipcart/vue-prerender-snipcart is described by https://snipcart.com/blog/vue-js-seo-prerender-example

https://github.com/snipcart/vue-blog-demo

Sample Web Store

https://www.sanity.io/blog/e-commerce-vue-nuxt-snipcartjs by Even Westvang includes use of the nuxt.js and (licensed) Sanity.io content infrastructure library. as described at https://github.com/sanity-io/example-ecommerce-snipcart-vue/blob/master/README.md#using-your-own-sanityio-data

I wrote a Bash script to install and configure it, at:

Another library is demo’d at https://vue-snipcart.netlify.com/

Vue CLI

Vue CLI 3.0 integrates with TypeScript, ESLint linting utility, and Mocha unit testing. To build a web component:

vue-cli-service build --target wc --name my-elementsrc/MyComponent.vue\
--modern

”–modern” targets modern browsers that can handle new ECMAScript.

Tutorials

https://scrimba.com/playlist/pXKqta are excellent intro programming videos and it’s free

https://www.vuemastery.com for $150/year

https://www.vuemastery.com/vueconf videos of VueConf New Orleans Mar. 27, 2018

Pluralsight video courses:

Udemy:

Rock stars

  • https://javascriptair.com/episodes/2016-03-30/ Taylor Otwell @taylorotwell on @JavaScriptAir by Kent C. Dodds @kentdodds

More on front-end styling

This is one of several topics:

  1. Text Editors
  2. Markdown text for GitHub from HTML
  3. 508 Accessibility

  4. JAM Stack Website Project Plan
  5. HTTP/2 Transition Project Plan
  6. Static websites
  7. Jekyll Site Development

  8. Website styles
  9. Website Styling
  10. VueJs front-end framework

  11. Protractor to automate testinf of Angular and other web pages

  12. Email from website
  13. Search within Hyde format Jekyll websites
  14. Windows Tile Pin Picture to Website Feed

  15. Data Visualization using Tableau