{"id":382,"date":"2019-05-31T09:58:56","date_gmt":"2019-05-31T00:58:56","guid":{"rendered":"http:\/\/localhost:8000\/?p=382"},"modified":"2021-01-24T21:21:36","modified_gmt":"2021-01-24T12:21:36","slug":"vue-typescript-vuetify","status":"publish","type":"post","link":"http:\/\/localhost:8000\/2019\/05\/vue-typescript-vuetify.html","title":{"rendered":"Vue+TypeScript\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306bVuetify\u3092\u5c0e\u5165"},"content":{"rendered":"

2020\u5e746\u6708\u8ffd\u8a18\uff1a\u8a18\u4e8b\u306e\u5185\u5bb9\u304c\u3060\u3044\u3076\u53e4\u304f\u306a\u3063\u3066\u3044\u305f\u306e\u3067\u3001\u6700\u65b0\u306e\u60c5\u5831\u306b\u898b\u76f4\u3057\u307e\u3057\u305f\u3002<\/b><\/p>\n

Vue+TypeScript\u3067\u4f5c\u3063\u305f\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30a2\u30d7\u30ea\u306e\u898b\u305f\u76ee\u3092\u3088\u304f\u3057\u305f\u304b\u3063\u305f\u306e\u3067\u3001Vuetify<\/a>\u3092\u5c0e\u5165\u3057\u307e\u3057\u305f\u3002
\nQuick Start\u306b\u3044\u3063\u3071\u3044\u66f8\u3044\u3066\u3042\u3063\u3066\u3001\u3069\u308c\u3092\u3069\u3046\u3084\u308c\u3070\u3044\u3044\u304b\u304c\u7d50\u69cb\u5206\u304b\u308a\u306b\u304f\u304b\u3063\u305f\u306e\u3067\u3001\u5c0e\u5165\u624b\u9806\u3092\u8a18\u8f09\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n

\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h2>\n

\u3053\u3061\u3089<\/a> \u306b\u3057\u305f\u304c\u3063\u3066\u5c0e\u5165\u3092\u3057\u307e\u3059\u3002<\/p>\n

Vuetify\u306eUI Component\u3092\u5229\u7528\u3059\u308b\u7b87\u6240\u3067\u6bce\u56demodule\u3092import\u3057\u306a\u304f\u3066\u3082\u3001\u81ea\u52d5\u7684\u306bimport\u3057\u3066\u304f\u308c\u308b vuetify-loader<\/a> \u3092\u5229\u7528\u3059\u308b\u30b1\u30fc\u30b9\u306b\u3064\u3044\u3066\u8a18\u8f09\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n

\u4f9d\u5b58\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n

npm install --save vuetify\nnpm install --save-dev sass sass-loader fibers deepmerge -D\nnpm install --save-dev vuetify-loader\nnpm install --save @mdi\/font -D # Material Design Icons\u3092\u4f7f\u3046\u5834\u5408<\/code><\/pre>\n
webpack.config.js\u306e\u8a2d\u5b9a<\/h2>\n
rules<\/code>\u306bsass-loader\u3001plugins<\/code>\u306bVuetifyLoaderPlugin\u306e\u8a2d\u5b9a\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
const VuetifyLoaderPlugin = require('vuetify-loader\/lib\/plugin')\n\nmodule.exports = {\n  rules: [\n    {\n      test: \/\\.s(c|a)ss$\/,\n      use: [\n        'vue-style-loader',\n        'css-loader',\n        {\n          loader: 'sass-loader',\n          \/\/ Requires sass-loader@^7.0.0\n          options: {\n            implementation: require('sass'),\n            fiber: require('fibers'),\n            indentedSyntax: true \/\/ optional\n          },\n          \/\/ Requires sass-loader@^8.0.0\n          options: {\n            implementation: require('sass'),\n            sassOptions: {\n              fiber: require('fibers'),\n              indentedSyntax: true \/\/ optional\n            },\n          },\n        },\n      ],\n    },\n  ],\n  plugins: [\n    new VuetifyLoaderPlugin(),\n  ]\n}<\/code><\/pre>\n
vuetify\u306e\u7d44\u307f\u8fbc\u307f<\/h2>\n
plugins\/vuetify.ts<\/code>\u3092\u4f5c\u6210\u3057\u3066\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u8a18\u8f09\u3057\u307e\u3059\u3002<\/p>\n
import Vue from 'vue'\nimport Vuetify from 'vuetify\/lib'\nimport '@mdi\/font\/css\/materialdesignicons.css' \/\/ mdi-icon\u3092\u4f7f\u3046\u5834\u5408\u3001\u30d0\u30f3\u30c9\u30eb\u306b\u542b\u3081\u308b\u305f\u3081\u306bimport\u5fc5\u8981\n\nVue.use(Vuetify)\n\nexport default new Vuetify({\n  icons: {\n    iconfont: 'mdi', \/\/ mdi-icon\u3092\u4f7f\u3046\u5834\u5408\n  },\n})<\/code><\/pre>\n
\u3053\u306e\u307e\u307e\u3060\u3068\u3001Could not find a declaration file for module 'vuetify\/lib'. <\/code>\u3068\u6012\u3089\u308c\u308b\u306e\u3067\u3001tsconfig.json<\/code>\u306ecompilerOptions<\/code>\u306b\u4ee5\u4e0b\u306e\u8a2d\u5b9a\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
{\n  "compilerOptions": {\n+    "types": [\n+      "vuetify"\n+    ],\n  }\n}<\/code><\/pre>\n
app.ts<\/code>\u3067\u5148\u307b\u3069\u4f5c\u6210\u3057\u305fplugins\/vuetify.ts<\/code>\u3092\u8aad\u307f\u8fbc\u307f\u307e\u3059\u3002<\/p>\n
import Vue, { CreateElement } from 'vue'\nimport vuetify from '..\/plugins\/vuetify'\nimport { VNode } from 'vue\/types\/umd'\n\nnew Vue({\n  vuetify,\n  render: (h: CreateElement): VNode => h(App),\n}).$mount('#app')<\/code><\/pre>\n
vuetify\u3092\u9069\u7528\u3059\u308b\u7bc4\u56f2\u3092\u6307\u5b9a<\/h3>\n
\u3053\u308c\u304c\u4e00\u756a\u5927\u4e8b\u3060\u3068\u601d\u3046\u306e\u3067\u3059\u304c\u3001vuetify\u3092\u9069\u7528\u3059\u308b\u7bc4\u56f2\u3092<v-app><\/code>\u3067\u56f2\u3080\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002  <\/b>
\nApp.vue<\/code>\u306e\u4e00\u756a\u30c8\u30c3\u30d7\u30ec\u30d9\u30eb\u3092\u3067\u56f2\u3080\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n
<template>\n  <v-app>\n    <Hoge \/>\n    <Fuga \/>\n  <\/v-app>\n<\/template><\/code><\/pre>\n
\u3053\u308c\u3067\u3001App.vue<\/code>\u914d\u4e0b\u3067vuetify\u304c\u4f7f\u3048\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n
UI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u5229\u7528<\/h2>\n
\u3042\u3068\u306f\u3001\u3053\u3061\u3089<\/a>\u3092\u53c2\u8003\u306b\u3057\u3066\u3001UI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f7f\u3063\u3066\u3044\u3051\u3070\u5927\u4e08\u592b\u3067\u3059\u3002import\u305b\u305a\u3068\u3082\u4f7f\u3048\u307e\u3059\u3002<\/p>\n
\u4f8b\u3048\u3070\u3001\u30c6\u30ad\u30b9\u30c8\u30a8\u30ea\u30a2\u306b\u88ab\u305b\u308b\u3088\u3046\u306bSAVE<\/code>\u30dc\u30bf\u30f3\u3092\u8868\u793a\u3059\u308b\u30b1\u30fc\u30b9\u3067\u3042\u308c\u3070\u3001\u3068\u3092\u4f7f\u3063\u3066\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u66f8\u3051\u3070\u52d5\u304d\u307e\u3057\u305f\u3002<\/p>\n
<template>\n  <v-card>\n    <v-btn small fab color="info" absolute top right @click=handleSaveButtion>save<\/v-btn>\n    <v-card-text>\n      <v-textarea label="\u81ea\u7531\u306b\u30e1\u30e2\u3092\u8a18\u8f09\u3057\u3066\u304f\u3060\u3055\u3044\u3002" v-model=memo rows=15 ><\/v-textarea>\n    <\/v-card-text>\n  <\/v-card>\n<\/template><\/code><\/pre>\n
\u3053\u3093\u306a\u611f\u3058\u3067\u307e\u3042\u307e\u3042\u3044\u3044\u611f\u3058\u306e\u898b\u305f\u76ee\u306b\u306a\u3063\u305f\u304b\u306a\u3002\u3002
\n\"\"<\/p>\n
[\u53c2\u8003] CDN\u3092\u5229\u7528\u3057\u3066\u30d0\u30f3\u30c9\u30eb\u30b5\u30a4\u30ba\u3092\u524a\u6e1b<\/h2>\n
CDN\u3092\u5229\u7528\u3057\u3066\u30d0\u30f3\u30c9\u30eb\u30b5\u30a4\u30ba\u3092\u524a\u6e1b\u3059\u308b\u3053\u3068\u3092\u8003\u3048\u308b\u3053\u3068\u3082\u3042\u308b\u3068\u601d\u3044\u307e\u3059\u3002\u5225\u8a18\u4e8b\u3092\u66f8\u3044\u3066\u307e\u3057\u3066\u3001\u305d\u3061\u3089\u3067vuetify\u3092CDN\u304b\u3089\u8aad\u307f\u8fbc\u3080\u3088\u3046\u306b\u5909\u66f4\u3057\u3066\u3044\u307e\u3059\u306e\u3067\u3001\u8208\u5473\u304c\u3042\u308c\u3070\u53c2\u7167\u3057\u3066\u304f\u3060\u3055\u3044\u3002
\nVue+Firebase\u3067\u4f5c\u3063\u305f\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30a2\u30d7\u30ea\u306e\u30d0\u30f3\u30c9\u30eb\u30b5\u30a4\u30ba\u3092\u524a\u6e1b\u3059\u308b<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
2020\u5e746\u6708\u8ffd\u8a18\uff1a\u8a18\u4e8b\u306e\u5185\u5bb9\u304c\u3060\u3044\u3076\u53e4\u304f\u306a\u3063\u3066\u3044\u305f\u306e\u3067\u3001\u6700\u65b0\u306e\u60c5\u5831\u306b\u898b\u76f4\u3057\u307e\u3057\u305f\u3002 Vue+TypeScript\u3067\u4f5c\u3063\u305f\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30a2\u30d7\u30ea\u306e\u898b\u305f\u76ee\u3092\u3088\u304f\u3057\u305f\u304b\u3063\u305f\u306e\u3067\u3001Vuetify\u3092\u5c0e\u5165\u3057\u307e\u3057\u305f\u3002 Quick Start\u306b\u3044\u3063\u3071\u3044\u66f8\u3044\u3066\u3042\u3063\u3066\u3001\u3069\u308c\u3092\u3069\u3046\u3084\u308c\u3070\u3044\u3044\u304b\u304c\u7d50\u69cb\u5206\u304b\u308a\u306b\u304f\u304b\u3063\u305f\u306e\u3067\u3001\u5c0e\u5165\u624b\u9806\u3092\u8a18\u8f09\u3057\u3066\u304a\u304d\u307e\u3059\u3002 \u30a4\u30f3\u30b9\u30c8\u30fc\u30eb \u3053\u3061\u3089 \u306b\u3057\u305f\u304c\u3063\u3066\u5c0e\u5165\u3092\u3057\u307e\u3059\u3002 Vuetify\u306eUI Component\u3092\u5229\u7528\u3059\u308b\u7b87\u6240\u3067\u6bce\u56demodule\u3092import\u3057\u306a\u304f\u3066\u3082\u3001\u81ea\u52d5\u7684\u306bimport\u3057\u3066\u304f\u308c\u308b vuetify-loader \u3092\u5229\u7528\u3059\u308b\u30b1\u30fc\u30b9\u306b\u3064\u3044\u3066\u8a18\u8f09\u3057\u3066\u3044\u307e\u3059\u3002 \u4f9d\u5b58\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002 npm install –save vuetify npm install –save-dev sass sass-loader fibers deepmerge -D npm ins <\/span>Continue Reading<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[25,21,22],"tags":[],"_links":{"self":[{"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/posts\/382"}],"collection":[{"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/comments?post=382"}],"version-history":[{"count":1,"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/posts\/382\/revisions"}],"predecessor-version":[{"id":385,"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/posts\/382\/revisions\/385"}],"wp:attachment":[{"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/media?parent=382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/categories?post=382"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/tags?post=382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}