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
   

   1	npm install -D sass

2. Pembuatan komponen PesanSosial.vue pada folder molecules
   

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

   <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
   

   1 2 3 4 5 6 7

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

4. Melihat package.json dan menjalankan npm run dev
   

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

   {   "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  .