{"id":6729,"date":"2022-11-02T01:24:31","date_gmt":"2022-11-01T16:24:31","guid":{"rendered":"https:\/\/suzutukiblog.com\/?p=6729"},"modified":"2022-12-04T10:26:15","modified_gmt":"2022-12-04T01:26:15","slug":"vuerails-2","status":"publish","type":"post","link":"https:\/\/suzutukiblog.com\/index.php\/2022\/11\/02\/vuerails-2\/","title":{"rendered":"Vue\u3068Rails\u3067\u4f5c\u6210\u3057\u305f\u30a2\u30d7\u30ea\u3067\u5f97\u305f\u77e5\u898b\u3068\u5099\u5fd8\u93322(Nuxt\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210)"},"content":{"rendered":"

1\u304b\u3089\u7d9a\u3044\u3066\u3044\u307e\u3059<\/a><\/h3>\n

\u76ee\u6a19\uff1a\u5fd8\u308c\u305f\u6642\u306b\u3059\u3050\u306b\u601d\u3044\u51fa\u305b\u308b\u3088\u3046\u306b\u3056\u3063\u304f\u308a\u89e3\u8aac\u3059\u308b\u3002<\/h2>\n

2\u7ae0:Nuxt\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210 (Front)<\/h3>\n

\u30db\u30fc\u30e0\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u79fb\u52d5\u3057\u3001pwd\u3067\u5834\u6240\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n

pwd\r\n\/Users\/<\u30e6\u30fc\u30b6\u30fc\u540d>\/Desktop\/\u30a2\u30d7\u30ea\u540d<\/pre>\n
1:front\u3068\u3044\u3046\u540d\u524d\u3067\u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3059\u308b(\u540d\u524d\u306f\u308f\u304b\u308a\u3084\u3059\u3051\u308c\u3070OK\u3067\u3059\u3002)<\/h3>\n
npx create-nuxt-app front<\/pre>\n
\u69d8\u3005\u306a\u8cea\u554f\u306b\u7b54\u3048\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n
Need to install the following packages:\r\ncreate-nuxt-app\r\nOk to proceed? (y)<\/pre>\n
y\u3092\u5165\u529b\u3057return\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002
\nNuxt\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f5c\u6210\u306b\u5fc5\u8981\u306a\u30d1\u30c3\u30b1\u30fc\u30b8\u304c\u5165\u3063\u3066\u3044\u306a\u3044\u5834\u5408\u306b\u51fa\u307e\u3059\u3002<\/p>\n
create-nuxt-app v3.6.0\r\n\u2728 Generating Nuxt.js project in front\r\n? Project name: (front)<\/pre>\n
\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d\u306e\u6c7a\u5b9a\u306b\u3064\u3044\u3066\u3067\u3059\u3002return\u3092\u5165\u529b\u3057\u307e\u3059\u3002<\/p>\n
? Programming language: (Use arrow keys)\r\n\u276f JavaScript \r\nTypeScript<\/pre>\n
JavaScript\u3092\u4f7f\u7528\u3059\u308b\u306e\u3067\u3001\u305d\u306e\u307e\u307ereturn\u3092\u5165\u529b\u3057\u307e\u3059\u3002<\/p>\n
? Package manager: (Use arrow keys)\r\n\u276f Yarn \r\nNpm<\/pre>\n
Npm<\/strong>\u3092\u4f7f\u7528\u3057\u305f\u3044\u306e\u3067\u3001Npm<\/strong>\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/p>\n
? UI framework: (Use arrow keys)\r\nNone \r\nAnt Design Vue \r\nBalmUI \r\nBootstrap Vue \r\nBuefy \r\nChakra UI \r\nElement \r\nFramevuerk \r\nOruga \r\nTachyons \r\nTailwind CSS \r\nWindi CSS \r\nVant \r\nView UI \r\nVuesax \r\nconsoleWindi CSS \r\nVant \r\nView UI \r\nVuesax \r\n\u276f Vuetify.js \r\nNone \r\nAnt Design Vue \r\nBalmUI \r\nBootstrap Vue<\/pre>\n
Vuetify.js<\/strong>\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/p>\n
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)\r\n\u276f\u25ef Axios - Promise based HTTP client\r\n\u25ef Progressive Web App (PWA)\r\n\u25ef Content - Git-based headless CMS<\/pre>\n
\u4f55\u306e\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u4f7f\u3046\u304b\u306b\u95a2\u3057\u3066\u3067\u3059\u3002
\nAxios<\/strong>\u3092\u4f7f\u7528\u3057\u3066api\u5074\u3068\u901a\u4fe1\u3092\u3059\u308b\u306e\u3067\u3001Axios<\/strong>\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/p>\n
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)\r\n\u276f\u25ef ESLint\r\n\u25ef Prettier\r\n\u25ef Lint staged files\r\n\u25ef StyleLint\r\n\u25ef Commitlint<\/pre>\n
\u6f5c\u5728\u7684\u306a\u30a8\u30e9\u30fc\u306b\u3064\u3044\u3066\u30b3\u30fc\u30c9\u3092\u5206\u6790\u3059\u308b\u30ea\u30f3\u30c6\u30a3\u30f3\u30b0\u30c4\u30fc\u30eb\u306e\u9078\u629e\u3067\u3059\u3002
\n\u4f7f\u7528\u3057\u306a\u3044\u305f\u3081\u3001\u30b9\u30da\u30fc\u30b9\u30ad\u30fc\u3092\u62bc\u3055\u305a\u306breturn\u3092\u5165\u529b\u3057\u307e\u3059\u3002<\/p>\n
? Testing framework: (Use arrow keys)\r\n\u276f None \r\nJest \r\nAVA \r\nWebdriverIO \r\nNightwatch<\/pre>\n
\u30c6\u30b9\u30c8\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u9078\u629e\u3067\u3059\u3002
\n\u4f7f\u7528\u3057\u306a\u3044\u305f\u3081\u3001None<\/strong>\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/p>\n
? Rendering mode: (Use arrow keys)\r\n\u276f Universal (SSR \/ SSG) \r\nSingle Page App<\/pre>\n
\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u306e\u8a2d\u5b9a\u3067\u3059\u3002
\nSPA\u3092\u4f5c\u6210\u3059\u308b\u306e\u3067\u3001Single Page App<\/strong>\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/p>\n
? Deployment target: (Use arrow keys)\r\n\u276f Server (Node.js hosting) \r\nStatic (Static\/Jamstack hosting)<\/pre>\n
\u30c7\u30d7\u30ed\u30a4\u30db\u30b9\u30c6\u30a3\u30f3\u30b0\u3068\u3044\u3046\u3001\u30c7\u30d7\u30ed\u30a4\u5f8c\u306e\u30d5\u30a1\u30a4\u30eb\u306e\u516c\u958b\u306b\u95a2\u3059\u308b\u65b9\u6cd5\u306e\u8a2d\u5b9a\u3067\u3059\u3002
\nServer\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/p>\n
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)\r\n\u276f\u25ef jsconfig.json (Recommended for VS Code if you're not using typescript)\r\n\u25ef Semantic Pull Requests\r\n\u25ef Dependabot (For auto-updating dependencies, GitHub only)<\/pre>\n
\u958b\u767a\u8005\u30c4\u30fc\u30eb\u3067\u3059\u3002\u7279\u306b\u4f7f\u7528\u3057\u306a\u3044\u306e\u3067\u3001retuen\u3092\u5165\u529b\u3057\u307e\u3059\u3002<\/p>\n
? What is your GitHub username? (\u767b\u9332\u3055\u308c\u3066\u3044\u308b\u5834\u5408\u306f\u3042\u306a\u305f\u306e\u30e6\u30fc\u30b6\u30fc\u540d\u304c\u8868\u793a\u3055\u308c\u307e\u3059)<\/pre>\n
Github\u3068\u306e\u9023\u643a\u8a2d\u5b9a\u3067\u3059\u3002\u540d\u524d\u304c\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u5834\u5408\u306f\u305d\u306e\u307e\u307ereturn\u3092\u5165\u529b\u3001
\n\u306a\u3044\u5834\u5408\u306fid\u3092\u5165\u529b\u3057\u3066return\u3092\u5165\u529b\u3057\u307e\u3059\u3002<\/p>\n
? Version control system: (Use arrow keys)\r\n\u276f Git \r\nNone<\/pre>\n
\u3044\u3088\u3044\u3088\u6700\u5f8c\u3067\u3059\u3002\u9577\u304b\u3063\u305f\u3067\u3059\u306d\uff01<\/p>\n
\u30d0\u30fc\u30b8\u30e7\u30f3\u7ba1\u7406\u30b7\u30b9\u30c6\u30e0\u306e\u78ba\u8a8d\u3067\u3059\u3002api\u3068front\u3092\u540c\u6642\u306bGit\u3067\u7ba1\u7406\u3059\u308b\u305f\u3081\u3001
\n\u3053\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u5185\u306b\u306fGit\u306e\u30ea\u30dd\u30b8\u30c8\u30ea\u306f\u4f5c\u308a\u307e\u305b\u3093\u3002None\u306b\u30ab\u30fc\u30bd\u30eb\u3092\u5408\u308f\u305b\u3066return\u3092\u5165\u529b\u3057\u307e\u3059\u3002<\/p>\n
<\/h2>\n
<\/p>\n
\u5b9f\u884c\u7d50\u679c<\/h2>\n
added 1223 packages, and audited 1490 packages in 23s\r\n\r\n107 packages are looking for funding\r\nrun `npm fund` for details\r\n\r\n15 vulnerabilities (2 moderate, 13 high)\r\n\r\n\r\n\ud83c\udf89 Successfully created project front\r\n\r\nTo get started:\r\n\r\ncd front\r\nnpm run dev\r\n\r\nTo build & start for production:\r\n\r\ncd front\r\nnpm run build\r\nnpm run start<\/pre>\n
\u3053\u308c\u3067\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e\u4f5c\u6210\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\u3002<\/p>\n
2:\u30b5\u30fc\u30d0\u30fc\u306e\u8d77\u52d5\u3068\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u306e\u78ba\u8a8d<\/h1>\n
cd front\r\nnpm run dev<\/pre>\n
\u521d\u56de\u8d77\u52d5\u3067\u306f\u30c7\u30fc\u30bf\u53ce\u96c6\u306e\u5354\u529b\u306b\u3064\u3044\u3066\u78ba\u8a8d\u3055\u308c\u308b\u306e\u3067\u3001n\u3092\u5165\u529b\u3057\u3001return\u3092\u62bc\u3057\u307e\u3059\u3002
\nhttp:\/\/localhost:3000\/<\/a><\/p>\n
\u2191\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u2193\u306e\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u308c\u3070OK\u3067\u3059\u3002\"\"<\/p>\n","protected":false},"excerpt":{"rendered":"
1\u304b\u3089\u7d9a\u3044\u3066\u3044\u307e\u3059 \u76ee\u6a19\uff1a\u5fd8\u308c\u305f\u6642\u306b\u3059\u3050\u306b\u601d\u3044\u51fa\u305b\u308b\u3088\u3046\u306b\u3056\u3063\u304f\u308a\u89e3\u8aac\u3059\u308b\u3002 2\u7ae0:Nuxt\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210 (Front) \u30db\u30fc\u30e0\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u79fb\u52d5\u3057\u3001pwd\u3067\u5834\u6240\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002 pwd \/Users\/<\u30e6\u30fc\u30b6 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[27],"tags":[],"class_list":["post-6729","post","type-post","status-publish","format-standard","hentry","category-programming-note"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/posts\/6729","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/comments?post=6729"}],"version-history":[{"count":8,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/posts\/6729\/revisions"}],"predecessor-version":[{"id":6753,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/posts\/6729\/revisions\/6753"}],"wp:attachment":[{"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/media?parent=6729"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/categories?post=6729"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/tags?post=6729"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}