VueJS - adonisv79/bytecommander.com GitHub Wiki

Starting new project

Create a front-end template project that uses VueJS

Dependencies

npm i vue-template-compiler --save-dev

WebpackConfig

A basic webpack.config.json file should be as follows

const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.vue$/,
        use: 'vue-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.(s*)[a|c]ss$/,
        use: ['vue-style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
        exclude: /node_modules/,
      },
    ],
  },
  devServer: {
    open: true,
    hot: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      filename: './src/default.css',
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
};

SRC FILES

We put all our frontend files under the src folder. In the sample, lets have a simple html, javascript and vue component file.

src/index.html

<html>
  <head>
    <title>sample app</title>
  </head>
  <body>
    <div id="app" />
  </body>
</html>

src/components/country-list/country-item.vue

<template>
  <li
    :class="{
      strikeout: !country.enabled,
      highlight: country.isLargeEconomy
    }"
    @click="country.enabled = !country.enabled; $emit('country-clicked', country.text, country.enabled)"
  >
    {{ country.text }}
  </li>
</template>

<script>
export default {
  name: 'country-item',
  props: [ 'country' ]
}
</script>

<style scoped>
.strikeout {
  text-decoration: line-through;
  color: blue;
}
</style>

src/components/country-list/country-list.vue

<template>
  <div>
    <h3 class="my-style">{{title}}</h3>sad
    <form>
      <input class="my-style" type="text" v-model="newCountry" placeholder="Add new item" />
      <input type="checkbox" v-model="newCountryIsLarge" @click="!newCountryIsLarge" />
    </form>
    <button @click="addNewCountry"> Add "{{newCountry}}" to list</button>
    <ol>
      <country-item
        v-for="country in countries"
        :country="country"
        :key="country.id"
        v-on:country-clicked="notifyCountryItem"
      ></country-item>
    </ol>
    <div>* There are {{largeEconomies}} large economies</div>
    These are : <span v-for="(country, index) in countries" :key="country.id">
      <span v-if="country.isLargeEconomy">[#{{index +1}}]{{country.text}}; </span>
    </span>
  </div>
</template>

<script>
import _ from 'lodash';
import CountryItem from './country-item.vue';

export default {
  name: 'country-list',
  components: {
    'country-item': CountryItem
  },
  props: ['large_country_count'],
  data: function () {
    return {
      title: "List of Countries",
      newCountry: "sdaf",
      newCountryIsLarge: true,
      countries: [
        { id: 'zh', text: 'China' , enabled: true, isLargeEconomy: true},
        { id: 'ph', text: 'Philippines' , enabled: false, isLargeEconomy: false },
        { id: 'us', text: 'United States of America', enabled: true, isLargeEconomy: true },
        { id: 'au', text: 'Australia', enabled: true, isLargeEconomy: false },
        { id: 'jp', text: 'Japan' , enabled: true, isLargeEconomy: false },
      ],
      samplenested: {
        data: "nested data!"
      }
    }
  },
  methods: {
    notifyCountryItem: function(countryName, isEnabled) {
      alert(`${countryName} is ${isEnabled ? 'enabled' : 'disabled'}`);
    },
    addNewCountry: function() {
      this.countries.push({
        text: this.newCountry,
        isLargeEconomy: this.newCountryIsLarge
      });
    }
  },
  computed: {
    largeEconomies: function () {
      const count = _.filter(this.countries, (c)=> {
        return c.isLargeEconomy;
      })
      return count.length
    }
  },
  created: function () {
    console.log('** LifeCycle Hook Sample: Instance of country-list is initialized');
  }
}
</script>

<style scoped>
.my-style {
  color: red;
}
</style>

src/index.js

import Vue from 'vue';
import countryList from './components/country-list/country-list.vue';

new Vue({
  el: '#app',
  render: h => h(countryList),
})

Running the app

add the following convenience scripts in the package.json file

"start:dev": "webpack-dev-server --mode development",
"start:prod": "webpack-dev-server --mode production",

References

⚠️ **GitHub.com Fallback** ⚠️