Pembuatan Komponen pada Vue.js

Pembelajaran mengenai Vue.js saat ini menuju ke pembuatan komponen.

Pembuatan komponen pada Vue.js adalah seperti pada langkah-langkah berikut ini

1. Instal SASS
   

   npm install -D sass
   

2. Pembuatan komponen PesanSosial.vue pada folder molecules
   

   <template>
     <div class="PesanSosial">
       <div class="header">
         <img class="avatar" src="https://i.pravatar.cc/40" />
         <div class="name">Nama Pengguna</div>
         <div class="userId">@userId</div>
       </div>
       <div class="post">Hanya pesan canda</div>
     </div>
   </template>
   
   <script setup></script>
   
   <style lang="scss">
   .PesanSosial {
     .header {
       display: flex;
       align-items: center;
       margin-bottom: 8px;
     }
     .avatar {
       border-radius: 50%;
       margin-right: 12px;
     }
     .name {
       font-weight: bold;
       margin-right: 8px;
       color: white;
     }
   }
   </style>
   

3. Memasukkan komponen ke dalam aplikasi melalui TheWelcome.vue
   

   <script setup>
   import PesanSosial from './molecules/PesanSosial.vue'
   </script>
   
   <template>
     <PesanSosial></PesanSosial>
   </template>
   

4. Melihat package.json dan menjalankan npm run dev
   

   {
     "name": "pro01",
     "version": "0.0.0",
     "private": true,
     "type": "module",
     "scripts": {
       "dev": "vite",
       "build": "run-p type-check \"build-only {@}\" --",
       "preview": "vite preview",
       "test:unit": "vitest",
       "prepare": "cypress install",
       "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
       "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
       "build-only": "vite build",
       "type-check": "vue-tsc --build",
       "lint:oxlint": "oxlint . --fix -D correctness --ignore-path .gitignore",
       "lint:eslint": "eslint . --fix",
       "lint": "run-s lint:*",
       "format": "prettier --write src/"
     },
     "dependencies": {
       "pinia": "^3.0.1",
       "vue": "^3.5.13",
       "vue-router": "^4.5.0"
     },
     "devDependencies": {
       "@tsconfig/node22": "^22.0.1",
       "@types/jsdom": "^21.1.7",
       "@types/node": "^22.14.0",
       "@vitejs/plugin-vue": "^5.2.3",
       "@vitejs/plugin-vue-jsx": "^4.1.2",
       "@vitest/eslint-plugin": "^1.1.39",
       "@vue/eslint-config-prettier": "^10.2.0",
       "@vue/eslint-config-typescript": "^14.5.0",
       "@vue/test-utils": "^2.4.6",
       "@vue/tsconfig": "^0.7.0",
       "cypress": "^14.2.1",
       "eslint": "^9.22.0",
       "eslint-plugin-cypress": "^4.2.0",
       "eslint-plugin-oxlint": "^0.16.0",
       "eslint-plugin-vue": "~10.0.0",
       "jiti": "^2.4.2",
       "jsdom": "^26.0.0",
       "npm-run-all2": "^7.0.2",
       "oxlint": "^0.16.0",
       "prettier": "3.5.3",
       "sass": "^1.89.1",
       "start-server-and-test": "^2.0.11",
       "typescript": "~5.8.0",
       "vite": "^6.2.4",
       "vite-plugin-vue-devtools": "^7.7.2",
       "vitest": "^3.1.1",
       "vue-tsc": "^2.2.8"
     }
   }
   

   

5. Tampilan di browser
   

Kunjungi https://www.proweb.co.id/jasa-pembuatan-website untuk jasa pembuatan website company profile di Jakarta  .