Vue.js पर तेजी से अनुप्रयोगों का विकास करना

परियोजना निर्माण

1. Vue.js 3 कमांड लाइन इंटरफ़ेस का उपयोग करके एक नया प्रोजेक्ट बनाएं:
   
   

   vue create notes-app

2. package.jsonनिम्न फ़ाइल को प्रोजेक्ट में जोड़ें :
   
   

   {
     "name": "notes-app",
     "version": "0.1.0",
     "private": true,
     "scripts": {
       "serve": "vue-cli-service serve",
       "build": "vue-cli-service build",
       "lint": "vue-cli-service lint"
     },
     "dependencies": {
       "axios": "^0.19.1",
       "buefy": "^0.8.9",
       "core-js": "^3.4.4",
       "lodash": "^4.17.15",
       "marked": "^0.8.0",
       "vee-validate": "^3.2.1",
       "vue": "^2.6.10",
       "vue-router": "^3.1.3"
     },
     "devDependencies": {
       "@vue/cli-plugin-babel": "^4.1.0",
       "@vue/cli-plugin-eslint": "^4.1.0",
       "@vue/cli-service": "^4.1.0",
       "@vue/eslint-config-prettier": "^5.0.0",
       "babel-eslint": "^10.0.3",
       "eslint": "^5.16.0",
       "eslint-plugin-prettier": "^3.1.1",
       "eslint-plugin-vue": "^5.0.0",
       "prettier": "^1.19.1",
       "vue-template-compiler": "^2.6.10"
     }
   }

3. इसमें वर्णित निर्भरताएँ निर्धारित करें package.json:
   
   

   npm install

रूटिंग

• नेस्टेड मार्ग / दृश्य।
• राउटर का मॉड्यूलर कॉन्फ़िगरेशन।
• मार्ग मापदंडों, अनुरोधों, टेम्पलेट्स तक पहुंच।
• Vue.js. की क्षमताओं के आधार पर अभ्यावेदन के परिवर्तन का एनीमेशन
• सुविधाजनक नेविगेशन नियंत्रण।
• सक्रिय लिंक की स्वचालित स्टाइल के लिए समर्थन।
• HTML5-API इतिहास, URL हैश का उपयोग करने की क्षमता, स्वचालित रूप से IE9 संगतता मोड में स्विच करने के लिए समर्थन।
• अनुकूलन पृष्ठ स्क्रॉल व्यवहार।

import Vue from "vue";
import VueRouter from "vue-router";
import DashboardLayout from "../layout/DashboardLayout.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/home",
    component: DashboardLayout,
    children: [
      {
        path: "/notes",
        name: "Notes",
        component: () =>
          import(/* webpackChunkName: "home" */ "../views/Home.vue")
      }
    ]
  },
  {
    path: "/",
    redirect: { name: "Notes" }
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;

<template>
  <span>
    <nav-bar />
    <div class="container is-fluid body-content">
      <router-view :key="$router.path" />
    </div>
  </span>
</template>

घटक मूल बातें

1. कार्यक्षमता के एक अलग टुकड़े को पहचानें जो एक घटक के रूप में परियोजना से चुना जा सकता है।
2. उन क्षमताओं के साथ घटक को अधिभार न डालें जो इसकी मुख्य कार्यक्षमता के अनुरूप नहीं हैं।
3. केवल उस कोड को शामिल करें जिसका उपयोग अपने स्वयं के संचालन को सुनिश्चित करने के लिए किया जाएगा। उदाहरण के लिए, यह कोड है जो एक निश्चित घटक के लिए मानक डेटा बाइंडिंग के संचालन को सुनिश्चित करता है, जैसे कि वर्ष, उपयोगकर्ता लिंग, और इसी तरह।
4. उस घटक के कोड को न जोड़ें जो घटक को बाहरी के साथ कार्य प्रदान करता है, उदाहरण के लिए, कुछ एपीआई के साथ।

<template>
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="/home/notes">
        <img align="center" src="@/assets/logo.png" width="112" height="28">
      </a>

      <a
        role="button"
        class="navbar-burger burger"
        aria-label="menu"
        aria-expanded="false"
        data-target="navbarBasicExample"
      >
        <span aria-hidden="true" />
        <span aria-hidden="true" />
        <span aria-hidden="true" />
      </a>
    </div>
  </nav>
</template>

<template>
  <span>
    <nav-bar />
    <div class="container is-fluid body-content">
      <router-view :key="$router.path" />
    </div>
  </span>
</template>

<script>
import NavBar from "@/components/NavBar";
export default {
  components: {
    NavBar
  }
};
</script>

<style scoped></style>

घटक बातचीत

1. गुण (प्रॉप्स) का उपयोग मूल घटकों से बाल घटकों में डेटा स्थानांतरित करते समय किया जाता है।
2. $ Emit () विधि का उपयोग बाल घटकों से मूल घटकों में डेटा स्थानांतरित करते समय किया जाता है।
3. ग्लोबल इवेंट बस (EventBus) का उपयोग तब किया जाता है जब घटक संरचनाओं का गहरी नेस्टिंग के साथ उपयोग किया जाता है, या जब यह आवश्यक होता है, वैश्विक स्तर पर, प्रकाशक / ग्राहक मॉडल का उपयोग करते हुए घटकों के बीच एक आदान-प्रदान का आयोजन करने के लिए।

• वह घटक Addजिसका उपयोग सिस्टम में नए कार्यों को जोड़ने और मौजूदा कार्यों को संपादित करने के लिए किया जाएगा।
• एक NoteViewerकार्य के बारे में जानकारी प्रदर्शित करने के लिए डिज़ाइन किया गया घटक ।

<template>
  <div class="container">
    <div class="card note-card">
      <div class="card-header">
        <div class="card-header-title title">
          <div class="title-content">
            <p v-if="addMode">
              Add Note
            </p>
            <p v-else>
              Update Note
            </p>
          </div>
        </div>
      </div>
      <div class="card-content">
        <div class="columns">
          <div class="column is-12">
            <template>
              <section>
                <b-field label="Note Header">
                  <b-input
                    v-model="note.content.title"
                    type="input"
                    placeholder="Note header"
                  />
                </b-field>
                <b-field label="Description">
                  <b-input
                    v-model="note.content.description"
                    type="textarea"
                    placeholder="Note Description"
                  />
                </b-field>
                <div class="buttons">
                  <b-button class="button is-default" @click="cancelNote">
                    Cancel
                  </b-button>
                  <b-button
                    v-if="addMode"
                    class="button is-primary"
                    @click="addNote"
                  >
                    Add
                  </b-button>
                  <b-button
                    v-else
                    class="button is-primary"
                    @click="updateNote"
                  >
                    Update
                  </b-button>
                </div>
              </section>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    addMode: {
      type: Boolean,
      required: false,
      default() {
        return true;
      }
    },
    note: {
      type: Object,
      required: false,
      default() {
        return {
          content: {
            title: "",
            description: "",
            isComplated: false
          }
        };
      }
    }
  },
  methods: {
    addNote() {
      this.$emit("add", this.note);
    },
    updateNote() {
      this.$emit("update", this.note);
    },
    cancelNote() {
      this.$emit("cancel");
    }
  }
};
</script>

<style></style>

<template>
  <div class="container">
    <div class="card note-card">
      <div class="card-header">
        <div class="card-header-title title">
          <div class="column is-6">
            <p>Created at {{ note.content.createdAt }}</p>
          </div>
          <div class="column is-6 ">
            <div class="buttons is-pulled-right">
              <button
                v-show="!note.content.isCompleted"
                class="button is-success is-small "
                title="Mark Completed"
                @click="markCompleted"
              >
                <b-icon pack="fas" icon="check" size="is-small" />
              </button>
              <button
                v-show="!note.content.isCompleted"
                class="button is-primary is-small"
                title="Edit Note"
                @click="editNote"
              >
                <b-icon pack="fas" icon="pen" size="is-small" />
              </button>
              <button
                class="button is-primary is-small "
                title="Delete Note"
                @click="deleteNote"
              >
                <b-icon pack="fas" icon="trash" size="is-small" />
              </button>
            </div>
          </div>
        </div>
      </div>
      <div
        class="card-content"
        :class="note.content.isCompleted ? 'note-completed' : ''"
      >
        <strong>{{ note.content.title }}</strong>
        <p>{{ note.content.description }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NoteViewer",
  props: {
    note: {
      type: Object,
      required: true
    }
  },
  methods: {
    editNote() {
      this.$emit("edit", this.note);
    },
    deleteNote() {
      this.$emit("delete", this.note);
    },
    markCompleted() {
      this.$emit("markCompleted", this.note);
    }
  }
};
</script>

<style></style>

<template>
  <div class="container">
    <div class="columns">
      <div class="column is-12">
        <button
          class="button is-primary is-small is-pulled-right"
          title="Add New Note"
          @click="enableAdd()"
        >
          <b-icon pack="fas" icon="plus" size="is-small" />
        </button>
      </div>
    </div>
    <div class="columns">
      <div class="column is-12">
        <note-editor
          v-show="enableAddNote"
          :key="enableAddNote"
          @add="addNote"
          @cancel="disableAdd"
        />

        <div v-for="(note, index) in data" :key="index">
          <note-viewer
            v-show="note.viewMode"
            :note="note"
            @edit="editNote"
            @markCompleted="markCompletedConfirm"
            @delete="deleteNoteConfirm"
          />

          <note-editor
            v-show="!note.viewMode"
            :add-mode="false"
            :note="note"
            @update="updateNote"
            @cancel="cancelUpdate(note)"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import NoteEditor from "@/components/NoteEditor.vue";
import NoteEditor from "@/components/Add.vue";
import NoteViewer from "@/components/NoteViewer.vue";
export default {
  name: "Home",
  components: {
    // NoteEditor,
    NoteEditor,
    NoteViewer
  },
  data() {
    return {
      enableAddNote: false,
      data: []
    };
  },
  mounted() {
    this.getNotes();
  },
  methods: {
    enableAdd() {
      this.enableAddNote = true;
    },
    disableAdd() {
      this.enableAddNote = false;
    },
    async getNotes() {
      this.data = [];
      const data = await this.$http.get("notes/getall");
      data.forEach(note => {
        this.data.push({
          content: note,
          viewMode: true
        });
      });
    },
    async addNote(note) {
      await this.$http.post("notes/create", note.content);
      this.disableAdd();
      await this.getNotes();
    },
    editNote(note) {
      note.viewMode = false;
    },
    async updateNote(note) {
      await this.$http.put(`notes/${note.content.id}`, note.content);
      note.viewMode = true;
      await this.getNotes();
    },
    cancelUpdate(note) {
      note.viewMode = true;
    },
    markCompletedConfirm(note) {
      this.$buefy.dialog.confirm({
        title: "Mark Completed",
        message: "Would you really like to mark the note completed?",
        type: "is-warning",
        hasIcon: true,
        onConfirm: async () => await this.markCompleted(note)
      });
    },
    async markCompleted(note) {
      note.content.isCompleted = true;
      await this.$http.put(`notes/${note.content.id}`, note.content);
      await this.getNotes();
    },
    deleteNoteConfirm(note) {
      this.$buefy.dialog.confirm({
        title: "Delete note",
        message: "Would you really like to delete the note?",
        type: "is-danger",
        hasIcon: true,
        onConfirm: async () => await this.deleteNote(note)
      });
    },
    async deleteNote(note) {
      await this.$http.delete(`notes/${note.content.id}`);
      await this.getNotes();
    }
  }
};
</script>

<!-- Add Task -->
<note-editor v-show="enableAddNote"
:key="enableAddNote"
@add="addNote"
@cancel="disableAdd" />
<!-- Update Task -->
<note-editor v-show="!note.viewMode"
:add-mode="false"
:note="note"
@update="updateNote"
@cancel="cancelUpdate(note)" />

Axios लाइब्रेरी का उपयोग करना

import axios from "axios";

const apiHost = process.env.VUE_APP_API_HOST || "/";

let baseURL = "api";

if (apiHost) {
  baseURL = `${apiHost}api`;
}
export default axios.create({ baseURL: baseURL });

import HTTP from "./axios";

//   
HTTP.interceptors.response.use(
  response => {
    if (response.data instanceof Blob) {
      return response.data;
    }
    return response.data.data || {};
  },
  error => {
    if (error.response) {
      Vue.prototype.$buefy.toast.open({
        message: error.response.data.message || "Something went wrong",
        type: "is-danger"
      });
    } else {
      Vue.prototype.$buefy.toast.open({
        message: "Unable to connect to server",
        type: "is-danger"
      });
    }
    return Promise.reject(error);
  }
);

Vue.prototype.$http = HTTP;

import HTTP from "./axios";
Vue.prototype.$http = HTTP;

const data = await this.$http.get("notes/getall");

अनुकूलन

1. यह सुनिश्चित करने के लिए कि वर्तमान में उपयोग में नहीं आने वाले घटक और दृश्य लोड नहीं हैं?
2. डाउनलोड की गई सामग्री का आकार कैसे कम करें?
3. एप्लिकेशन लोडिंग समय कैसे सुधारें?

{
path: "/notes",
name: "Notes",
component: () =>
import(/* webpackChunkName: "home" */ "../views/Home.vue")
}
//   /* webpackChunkName: "home" */

एक डॉकटर कंटेनर में एक परियोजना को पैकिंग करना और इसे तैनात करना

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
ARG VUE_APP_API_HOST
ENV VUE_APP_API_HOST $VUE_APP_API_HOST
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

const apiHost = process.env.VUE_APP_API_HOST || "/";

sudo docker build --build-arg VUE_APP_API_HOST=<Scheme>://<ServiceHost>:<ServicePort>/ -f Dockerfile -t vue-app-image .

sudo docker run -d -p 8080:80 — name vue-app vue-app-image

सारांश