Wilson Mar bio photo

Wilson Mar

Hello!

Calendar YouTube Github

LinkedIn

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

US (English)   Norsk (Norwegian)   Español (Spanish)   Français (French)   Deutsch (German)   Italiano   Português   Estonian   اَلْعَرَبِيَّةُ (Egypt Arabic)   Napali   中文 (简体) Chinese (Simplified)   日本語 Japanese   한국어 Korean

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. UI Design Systems
  2. Text Editors
  3. Markdown text for GitHub from HTML
  4. 508 Accessibility

  5. gRPC (g___ Remote Procedure Call)
  6. HTTP/2 Transition Project Plan

  7. Front-end UI creation options
  8. Docusaurus static website generator
  9. Static websites
  10. JAM Stack Website Project Plan
  11. Jekyll Site Development
  12. Gatsby app generator

  13. Website styles
  14. Website Styling
  15. VueJs front-end framework

  16. Protractor to automate testing of Angular and other web pages

  17. Email from website
  18. Search within Hyde format Jekyll websites
  19. Windows Tile Pin Picture to Website Feed

  20. Data Visualization using Tableau