{"id":265,"date":"2021-06-21T18:43:54","date_gmt":"2021-06-21T09:43:54","guid":{"rendered":"https:\/\/hikki-reserve.com\/wordpress\/?p=265"},"modified":"2021-10-20T07:20:00","modified_gmt":"2021-10-19T22:20:00","slug":"how-to-include-vue3-into-laravel6","status":"publish","type":"post","link":"https:\/\/hikki-reserve.com\/wordpress\/how-to-include-vue3-into-laravel6\/","title":{"rendered":"Laravel6\u3067Vue.js3\u3092\u4f7f\u3046\u305f\u3081\u306e\u8a2d\u5b9a\u65b9\u6cd5"},"content":{"rendered":"

Laravel6\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u65b9\u6cd5<\/h2>\n

\u4ee5\u524d\u306e\u8a18\u4e8b\u3067\u7d39\u4ecb\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u30ea\u30f3\u30af\u3092\u5f35\u3063\u3066\u5272\u611b\u3068\u3059\u308b\u3002
\nLaravel6\u306e\u958b\u767a\u74b0\u5883\u306e\u69cb\u7bc9 | \u30d2\u30c3\u30ad\u30fc\u4e88\u5099\u8ecd\u306e\u30d6\u30ed\u30b0<\/a><\/p>\n

Laravel6\u74b0\u5883\u306bVue.js3\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u65b9\u6cd5<\/h2>\n

\u307e\u305a\u306f\u3001\u3053\u306e\u8a18\u4e8b\u3092\u66f8\u304f\u4e0a\u3067\u53c2\u8003\u306b\u3055\u305b\u3066\u3044\u305f\u3060\u3044\u305f\u30da\u30fc\u30b8\u3078\u306e\u30ea\u30f3\u30af\u306f\u3053\u3061\u3089\u3067\u3059\u3002<\/p>\n

\u3010Laravel6\u3011Vue.js3 + TypeScript\u3092\u5c0e\u5165\u3057\u3066\u307f\u305f\u0669( &#39;\u03c9&#39; )\u0648\u2606\u2605 – Qiita<\/a>
\nLaravel-Mix\u304cVue.js3\u306b\u5bfe\u5fdc\u3057\u305f(TypeScript\u5c0e\u5165\u307e\u3067) – Qiita<\/a><\/p>\n

    \n
  1. Vue.js3 \u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\n
    \n
    npm install --save-dev vue@next<\/code><\/pre>\n<\/div>\n<\/li>\n
  2. vue-loader \u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\n
    \n
    npm install --save-dev vue-loader@next<\/code><\/pre>\n<\/div>\n<\/li>\n
  3. laravel-mix-vue3 \u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\n
    \n
    npm install --save-dev laravel-mix-vue3<\/code><\/pre>\n<\/div>\n<\/li>\n
  4. @vue\/compiler-sfc \u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\n
    \n
    npm install --save-dev @vue\/compiler-sfc<\/code><\/pre>\n<\/div>\n<\/li>\n
  5. cross-env \u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\n
    \n
    npm install --save-dev cross-env<\/code><\/pre>\n<\/div>\n<\/li>\n
  6. “resource\/js\/app.js” \u306e\u7de8\u96c6\n
    \n
    require('.\/bootstrap');<\/span>\r\n\r\nimport { createApp } from 'vue'\r\nimport App from '.\/App.vue'\r\n\r\ncreateApp(App).mount('#app')<\/code><\/pre>\n<\/div>\n<\/li>\n
  7. “resource\/js\/App.vue” \u306e\u4f5c\u6210\n
    \n
    <template>\r\n  <div>Hello World<\/div>\r\n<\/template><\/code><\/pre>\n<\/div>\n<\/li>\n
  8. “webpack.mix.js” \u306b\u8ffd\u8a18\n
    \n
    \r\nconst mix = require('laravel-mix');<\/span>\r\n\r\nrequire('laravel-mix-vue3');\r\n\r\n(\u7565)\r\n\r\n\/\/mix.js('resources\/js\/app.js', 'public\/js');<\/span>\r\nmix.vue3('resources\/js\/app.js', 'public\/js');\r\nmix.sass('resources\/sass\/app.scss', 'public\/css');<\/code><\/pre>\n<\/div>\n<\/li>\n
  9. \u8a2d\u5b9a\u3092\u53cd\u6620\n
    \n
    npm install && npm run dev<\/code><\/pre>\n<\/div>\n<\/li>\n<\/ol>\n
    Typescript \u306f\u4eca\u56de\u3001\u898b\u9001\u308b\u3053\u3068\u306b\u3057\u3066\u3044\u308b\u306e\u3067\u63b2\u8f09\u3057\u3066\u304a\u308a\u307e\u305b\u3093\u3002\u60aa\u3057\u304b\u3089\u305a\u3002\u3002\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
    Laravel6\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u65b9\u6cd5 \u4ee5\u524d\u306e\u8a18\u4e8b\u3067\u7d39\u4ecb\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u30ea\u30f3\u30af\u3092\u5f35\u3063\u3066\u5272\u611b\u3068\u3059\u308b\u3002 Laravel6\u306e\u958b\u767a\u74b0\u5883\u306e\u69cb\u7bc9 | \u30d2\u30c3\u30ad\u30fc\u4e88\u5099\u8ecd\u306e\u30d6\u30ed\u30b0 Laravel6\u74b0\u5883\u306bVue.js3\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u65b9\u6cd5 \u307e\u305a\u306f\u3001…<\/p>\n","protected":false},"author":1,"featured_media":275,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[65,64,73,74],"class_list":["post-265","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3","tag-laravel","tag-laravel6","tag-vue-js","tag-vue3"],"_links":{"self":[{"href":"https:\/\/hikki-reserve.com\/wordpress\/wp-json\/wp\/v2\/posts\/265"}],"collection":[{"href":"https:\/\/hikki-reserve.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hikki-reserve.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hikki-reserve.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hikki-reserve.com\/wordpress\/wp-json\/wp\/v2\/comments?post=265"}],"version-history":[{"count":8,"href":"https:\/\/hikki-reserve.com\/wordpress\/wp-json\/wp\/v2\/posts\/265\/revisions"}],"predecessor-version":[{"id":274,"href":"https:\/\/hikki-reserve.com\/wordpress\/wp-json\/wp\/v2\/posts\/265\/revisions\/274"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hikki-reserve.com\/wordpress\/wp-json\/wp\/v2\/media\/275"}],"wp:attachment":[{"href":"https:\/\/hikki-reserve.com\/wordpress\/wp-json\/wp\/v2\/media?parent=265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hikki-reserve.com\/wordpress\/wp-json\/wp\/v2\/categories?post=265"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hikki-reserve.com\/wordpress\/wp-json\/wp\/v2\/tags?post=265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}