{"id":95,"date":"2022-12-26T22:27:40","date_gmt":"2022-12-26T13:27:40","guid":{"rendered":"http:\/\/blog.defree.co.kr\/?p=95"},"modified":"2022-12-26T22:27:40","modified_gmt":"2022-12-26T13:27:40","slug":"vubell-%ec%9e%85%eb%a0%a5-%ed%8f%bc-%ea%b0%9c%eb%b0%9c-1","status":"publish","type":"post","link":"https:\/\/blog.defree.co.kr\/?p=95","title":{"rendered":"vubell \uc785\ub825 \ud3fc \uac1c\ubc1c (1)"},"content":{"rendered":"\n

\uc9c4\ud589\ud558\uae30 \uc55e\uc11c vuetify\ub97c \ucd94\uac00\ud55c\ub2e4.<\/p>\n\n\n\n

\n

Vuetify\ub294 vue \uae30\ubc18\uc758 UI Framework\uc73c\ub85c <v-btn>\uacfc \uac19\uc774 \uc0ac\uc804 \uc815\uc758\ub41c \ucef4\ud3ec\ub10c\ud2b8 \ubc0f \ub808\uc774\uc544\uc6c3 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc774\ub2e4. <\/p>\n\n\n\n

https:\/\/next.vuetifyjs.com\/<\/a><\/p>\nVuetify is a no design skills required UI Framework with beautifully handcrafted Vue Components.<\/cite><\/blockquote>\n\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
cd<\/span> vubell<\/span><\/span>\nyarn add vuetify@^3.0.6<\/span><\/span>\n#vuetify \uacf5\uc2dd \ud648\ud398\uc774\uc9c0\uc5d0\uc11c material design icons\ub97c \uc5b8\uae09\ud574\uc11c \uc5ec\uae30\uc5d0\ub3c4 \uc124\uce58\ud558\uc5ec \uc0ac\uc6a9\ud55c\ub2e4.<\/span><\/span>\nyarn add @mdi\/font -D<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
electron vue app\uc758 \uae30\ubcf8 \ud638\ucd9c \uc21c\uc11c\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4. (\ubb3c\ub860 babel\uacfc webpack\uc758 \ucef4\ud30c\uc77c \ubc0f \ube4c\ub4dc \uacfc\uc815 \ubc0f \uacb0\uacfc js\ub97c \ub85c\ub4dc\ud558\ub294 \uac83\uc774\uae34 \ud574\ub3c4 \uac1c\ub150\uc0c1\uc73c\ub85c\ub294 \uc544\ub798\ub97c \ucc38\uace0\ud558\ub294 \uac83\uc774 \uc88b\ub2e4.)<\/p>\n\n\n\n
    \n
  1. yarn electron:serve (package.json)<\/li>\n\n\n\n
  2. vue.config.js<\/li>\n\n\n\n
  3. src\/main.js<\/li>\n\n\n\n
  4. src\/App.vue<\/li>\n\n\n\n
  5. … (\uc0ac\uc6a9\ub418\ub294 \ucef4\ud3ec\ub10c\ud2b8)<\/li>\n<\/ol>\n\n\n\n
    vuetify\ub97c \uc0ac\uc6a9\ud558\ub824\uba74 \ub2f9\uc5f0\ud788 import\ub098 require\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub85c\ub4dc\ud558\uc5ec\uc57c \ud55c\ub2e4. \uc5ec\uae30\uc11c\ub294 App.vue\ub97c \ud638\ucd9c\ud558\ub294 main.js\uc5d0 \ucd94\uac00\ud558\uaca0\ub2e4.<\/p>\n\n\n\n
    src\/main.js<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    import<\/span> <\/span>{<\/span> <\/span>createApp<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>'<\/span>vue<\/span>'<\/span><\/span>\nimport<\/span> App <\/span>from<\/span> <\/span>'<\/span>.\/App.vue<\/span>'<\/span><\/span>\nimport<\/span> <\/span>'<\/span>vuetify\/styles<\/span>'<\/span><\/span>\nimport<\/span> <\/span>'<\/span>@mdi\/font\/css\/materialdesignicons.css<\/span>'<\/span><\/span>\nimport<\/span> <\/span>{<\/span> <\/span>createVuetify<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>'<\/span>vuetify<\/span>'<\/span><\/span>\nimport<\/span> <\/span>*<\/span> <\/span>as<\/span> components <\/span>from<\/span> <\/span>'<\/span>vuetify\/components<\/span>'<\/span><\/span>\nimport<\/span> <\/span>*<\/span> <\/span>as<\/span> directives <\/span>from<\/span> <\/span>'<\/span>vuetify\/directives<\/span>'<\/span><\/span>\nimport<\/span> <\/span>{<\/span> <\/span>aliases<\/span>,<\/span> <\/span>mdi<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>'<\/span>vuetify\/iconsets\/mdi<\/span>'<\/span><\/span>\n<\/span>\nconst<\/span> vuetify <\/span>=<\/span> <\/span>createVuetify<\/span>(<\/span>{<\/span><\/span>\n  components<\/span>,<\/span> <\/span><\/span>\n  directives<\/span>,<\/span><\/span>\n  <\/span>theme<\/span>:<\/span> <\/span>{<\/span>defaultTheme<\/span>:<\/span> <\/span>'<\/span>dark<\/span>'<\/span>},<\/span><\/span>\n  <\/span>icons<\/span>:<\/span> <\/span>{<\/span><\/span>\n    <\/span>defaultSet<\/span>:<\/span> <\/span>'<\/span>mdi<\/span>'<\/span>,<\/span><\/span>\n    aliases<\/span>,<\/span><\/span>\n    <\/span>sets<\/span>:<\/span> <\/span>{<\/span><\/span>\n      mdi<\/span>,<\/span><\/span>\n    <\/span>}<\/span><\/span>\n  <\/span>}<\/span><\/span>\n}<\/span>)<\/span><\/span>\n<\/span>\ncreateApp<\/span>(App)<\/span>.<\/span>use<\/span>(vuetify)<\/span>.<\/span>mount<\/span>(<\/span>'<\/span>#app<\/span>'<\/span>)<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    \uba3c\uc800 \uc785\ub825 \ud3fc\uc744 \ucef4\ud3ec\ub10c\ud2b8\ub85c \ub9cc\ub4e0\ub2e4.<\/p>\n\n\n\n
    Connection \uc815\ubcf4 \uc785\ub825 \uae30\ubcf8 \uc591\uc2dd \ucef4\ud3ec\ub10c\ud2b8<\/h2>\n\n\n\n
    components\/ConnectionCard.vue<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    <<\/span>template<\/span>><\/span><\/span>\n  <\/span><<\/span>v-card<\/span>><\/span><\/span>\n    <\/span><<\/span>v-form<\/span>><\/span><\/span>\n      <\/span><<\/span>v-card-text<\/span>><\/span>Connection - SSH<\/span><\/<\/span>v-card-text<\/span>><\/span><\/span>\n      <\/span><<\/span>v-card-item<\/span>><\/span><\/span>\n        <\/span><<\/span>v-row<\/span>><\/span><\/span>\n          <\/span><<\/span>v-col<\/span> <\/span>cols<\/span>=<\/span>"<\/span>4<\/span>"<\/span>><\/span><\/span>\n            <\/span><<\/span>v-text-field<\/span> <\/span>label<\/span>=<\/span>"<\/span>Alias<\/span>"<\/span>><\/<\/span>v-text-field<\/span>><\/span><\/span>\n          <\/span><\/<\/span>v-col<\/span>><\/span><\/span>\n          <\/span><<\/span>v-col<\/span> <\/span>cols<\/span>=<\/span>"<\/span>6<\/span>"<\/span>><\/span><\/span>\n            <\/span><<\/span>v-text-field<\/span> <\/span>label<\/span>=<\/span>"<\/span>Host Name (or IP address)<\/span>"<\/span>><\/<\/span>v-text-field<\/span>><\/span><\/span>\n          <\/span><\/<\/span>v-col<\/span>><\/span><\/span>\n          <\/span><<\/span>v-col<\/span> <\/span>cols<\/span>=<\/span>"<\/span>2<\/span>"<\/span>><\/span><\/span>\n            <\/span><<\/span>v-text-field<\/span> <\/span>label<\/span>=<\/span>"<\/span>port<\/span>"<\/span> <\/span>type<\/span>=<\/span>"<\/span>number<\/span>"<\/span>><\/<\/span>v-text-field<\/span>><\/span><\/span>\n          <\/span><\/<\/span>v-col<\/span>><\/span><\/span>\n        <\/span><\/<\/span>v-row<\/span>><\/span><\/span>\n        <\/span><<\/span>v-row<\/span>><\/span><\/span>\n          <\/span><<\/span>v-col<\/span> <\/span>cols<\/span>=<\/span>"<\/span>6<\/span>"<\/span>><\/span><\/span>\n            <\/span><<\/span>v-text-field<\/span> <\/span>label<\/span>=<\/span>"<\/span>User ID<\/span>"<\/span>><\/<\/span>v-text-field<\/span>><\/span><\/span>\n          <\/span><\/<\/span>v-col<\/span>><\/span><\/span>\n          <\/span><<\/span>v-col<\/span> <\/span>cols<\/span>=<\/span>"<\/span>6<\/span>"<\/span>><\/span><\/span>\n            <\/span><<\/span>v-text-field<\/span> <\/span>label<\/span>=<\/span>"<\/span>Password<\/span>"<\/span> <\/span>type<\/span>=<\/span>"<\/span>password<\/span>"<\/span>><\/<\/span>v-text-field<\/span>><\/span><\/span>\n          <\/span><\/<\/span>v-col<\/span>><\/span><\/span>\n        <\/span><\/<\/span>v-row<\/span>><\/span><\/span>\n      <\/span><\/<\/span>v-card-item<\/span>><\/span><\/span>\n    <\/span><\/<\/span>v-form<\/span>><\/span><\/span>\n  <\/span><\/<\/span>v-card<\/span>><\/span><\/span>\n<\/<\/span>template<\/span>><\/span><\/span>\n<\/span>\n<<\/span>script<\/span>><\/span><\/span>\nexport default <\/span>{<\/span><\/span>\n  name: <\/span>'<\/span>ConnectionCard<\/span>'<\/span>,<\/span><\/span>\n}<\/span><\/span>\n<\/<\/span>script<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    Hello world\ub97c \ubcf4\uc5ec\uc8fc\uace0 \uc788\ub294 App.vue\ub97c \uc218\uc815\ud558\uc5ec \uae30\ubcf8 \ub808\uc774\uc544\uc6c3\uc744 \uad6c\uc131\ud55c\ub2e4.<\/p>\n\n\n\n
    App.vue<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    <<\/span>template<\/span>><\/span><\/span>\n  <\/span><<\/span>v-app<\/span> <\/span>id<\/span>=<\/span>"<\/span>appRoot<\/span>"<\/span>><\/span><\/span>\n    <\/span><<\/span>v-system-bar<\/span>><\/span><\/span>\n      <\/span><<\/span>v-spacer<\/span>><\/<\/span>v-spacer<\/span>><\/span><\/span>\n      <\/span><<\/span>v-icon<\/span>><\/span>mdi-square<\/span><\/<\/span>v-icon<\/span>><\/span><\/span>\n      <\/span><<\/span>v-icon<\/span>><\/span>mdi-circle<\/span><\/<\/span>v-icon<\/span>><\/span><\/span>\n      <\/span><<\/span>v-icon<\/span>><\/span>mdi-triangle<\/span><\/<\/span>v-icon<\/span>><\/span><\/span>\n    <\/span><\/<\/span>v-system-bar<\/span>><\/span><\/span>\n    <\/span><<\/span>v-navigation-drawer<\/span> <\/span>v-model<\/span>=<\/span>"<\/span>drawer<\/span>"<\/span>><\/span><\/span>\n      <\/span><<\/span>v-sheet<\/span> <\/span>color<\/span>=<\/span>"<\/span>grey-lighten-4<\/span>"<\/span> <\/span>class<\/span>=<\/span>"<\/span>pa-4<\/span>"<\/span>><\/span><\/span>\n        <\/span><<\/span>v-avatar<\/span> <\/span>class<\/span>=<\/span>"<\/span>mb-4<\/span>"<\/span> <\/span>color<\/span>=<\/span>"<\/span>grey-lighten-1<\/span>"<\/span> <\/span>size<\/span>=<\/span>"<\/span>64<\/span>"<\/span>><\/<\/span>v-avatar<\/span>><\/span><\/span>\n        <\/span><<\/span>div<\/span>><\/span>defree.inc@defree.co.kr<\/span><\/<\/span>div<\/span>><\/span><\/span>\n      <\/span><\/<\/span>v-sheet<\/span>><\/span><\/span>\n      <\/span><<\/span>v-divider<\/span>><\/<\/span>v-divider<\/span>><\/span><\/span>\n      <\/span><<\/span>v-list<\/span>><\/span><\/span>\n        <\/span><<\/span>v-list-item<\/span> <\/span>v-for<\/span>=<\/span>"<\/span>[icon, text] in links<\/span>"<\/span> :key="icon" <\/span>link<\/span>><\/span><\/span>\n          <\/span><<\/span>template<\/span> <\/span>v-slot<\/span>:<\/span>prepend<\/span>><\/span><\/span>\n            <\/span><<\/span>v-icon<\/span>>{{<\/span> icon <\/span>}}<\/<\/span>v-icon<\/span>><\/span><\/span>\n          <\/span><\/<\/span>template<\/span>><\/span><\/span>\n          <\/span><<\/span>v-list-item-title<\/span>>{{<\/span> text <\/span>}}<\/<\/span>v-list-item-title<\/span>><\/span><\/span>\n        <\/span><\/<\/span>v-list-item<\/span>><\/span><\/span>\n      <\/span><\/<\/span>v-list<\/span>><\/span><\/span>\n    <\/span><\/<\/span>v-navigation-drawer<\/span>><\/span><\/span>\n    <\/span><<\/span>v-main<\/span>><\/span><\/span>\n      <\/span><<\/span>v-container<\/span> <\/span>class<\/span>=<\/span>"<\/span>py-8 px-6<\/span>"<\/span> <\/span>fluid<\/span>><\/span><\/span>\n        <\/span><<\/span>ConnectionCard<\/span>\/><\/span><\/span>\n      <\/span><\/<\/span>v-container<\/span>><\/span><\/span>\n    <\/span><\/<\/span>v-main<\/span>><\/span><\/span>\n  <\/span><\/<\/span>v-app<\/span>><\/span><\/span>\n<\/<\/span>template<\/span>><\/span><\/span>\n<\/span>\n<<\/span>script<\/span>><\/span><\/span>\nimport ConnectionCard from '.\/components\/ConnectionCard.vue'<\/span><\/span>\nexport default <\/span>{<\/span><\/span>\n  components: <\/span>{<\/span><\/span>\n    ConnectionCard<\/span><\/span>\n  <\/span>},<\/span><\/span>\n  data: <\/span>()<\/span> <\/span>=><\/span> (<\/span>{<\/span><\/span>\n    <\/span>drawer<\/span>:<\/span> <\/span>null,<\/span><\/span>\n    <\/span>links<\/span>:<\/span> [<\/span><\/span>\n      [<\/span>'<\/span>mdi-inbox-arrow-down<\/span>'<\/span>,<\/span> <\/span>'<\/span>Connection<\/span>'<\/span>]<\/span>,<\/span><\/span>\n      [<\/span>'<\/span>mdi-send<\/span>'<\/span>,<\/span> <\/span>'<\/span>Hosts<\/span>'<\/span>]<\/span>,<\/span><\/span>\n      [<\/span>'<\/span>mdi-delete<\/span>'<\/span>,<\/span> <\/span>'<\/span>Trash<\/span>'<\/span>]<\/span>,<\/span><\/span>\n      [<\/span>'<\/span>mdi-alert-octagon<\/span>'<\/span>,<\/span> <\/span>'<\/span>Span<\/span>'<\/span>]<\/span>,<\/span><\/span>\n    ]<\/span><\/span>\n  <\/span>}<\/span>)<\/span>,<\/span><\/span>\n  methods: <\/span>{<\/span><\/span>\n    <\/span>loadProjectFile<\/span>:<\/span> <\/span>function<\/span>()<\/span> <\/span>{<\/span><\/span>\n    <\/span>}<\/span><\/span>\n  <\/span>},<\/span><\/span>\n  mounted: <\/span>function<\/span>()<\/span> <\/span>{<\/span><\/span>\n    <\/span>this.<\/span>loadProjectFile<\/span>()<\/span>;<\/span><\/span>\n  <\/span>}<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n<\/span>\n<\/<\/span>script<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    \uc9c0\uae08\uae4c\uc9c0 \uc9c4\ud589\ud55c \uac83\uc744 \ud655\uc778\ud574\ubcf8\ub2e4.<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    yarn electron:serve<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    \"\"
    dark \ud14c\ub9c8\ub97c \uc801\uc6a9\ud588\ub2e4.<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"
    \uc9c4\ud589\ud558\uae30 \uc55e\uc11c vuetify\ub97c \ucd94\uac00\ud55c\ub2e4. Vuetify\ub294 vue \uae30\ubc18\uc758 UI Framework\uc73c\ub85c <v-btn>\uacfc \uac19\uc774 \uc0ac\uc804 \uc815\uc758\ub41c \ucef4\ud3ec\ub10c\ud2b8 \ubc0f \ub808\uc774\uc544\uc6c3 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc774\ub2e4. https:\/\/next.vuetifyjs.com\/ Vuetify is a no design skills required UI Framework with beautifully handcrafted Vue Components. electron vue app\uc758 \uae30\ubcf8 \ud638\ucd9c \uc21c\uc11c\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4. (\ubb3c\ub860 babel\uacfc webpack\uc758 \ucef4\ud30c\uc77c \ubc0f \ube4c\ub4dc \uacfc\uc815 \ubc0f \uacb0\uacfc js\ub97c \ub85c\ub4dc\ud558\ub294 \uac83\uc774\uae34 \ud574\ub3c4 \uac1c\ub150\uc0c1\uc73c\ub85c\ub294 \uc544\ub798\ub97c […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-95","post","type-post","status-publish","format-standard","hentry","category-1","post-preview"],"_links":{"self":[{"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/95","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=95"}],"version-history":[{"count":1,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/95\/revisions"}],"predecessor-version":[{"id":98,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/95\/revisions\/98"}],"wp:attachment":[{"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=95"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=95"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=95"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}