この記事何？
業務でVue+typescriptを用いてアプリ開発を行っているが、そういえば一からアプリ作ったことないなぁということで、一からアプリ作ってみることにした。
始める前に
とりあえず以下のVueの公式ガイドを見る。
インストールページにごちゃごちゃと色々書いてあった。
要は以下の三種類の始め方があるらしい。
-
<script>直接組み込み - npmによるインストール
- cliの利用
-
大規模なシングルページアプリケーション開発のための足場を素早く組むために、Vue.js では オフィシャル CLI を提供してくれる。
-
自分はvue+typescriptでの作成経験しかないので、普通のサイトにvueを導入する書き方には慣れていない。
npmによるインストールとcliの利用、どちらが簡単かわからないが、とりあえずcliの方が簡単そうなのでそちらを使ってみる。
手順
インストールしてみる
とりあえずインストールページの指示に従ってinstall
➜ ~ vue --version
zsh: command not found: vue
➜ ~ npm install -g @vue/cli
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated graphql-extensions@0.15.0: The `graphql-extensions` API has been removed from Apollo Server 3. Use the plugin API instead: https://www.apollographql.com/docs/apollo-server/integrations/plugins/
npm WARN deprecated apollo-tracing@0.15.0: The `apollo-tracing` package is no longer part of Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#tracing for details
npm WARN deprecated apollo-cache-control@0.14.0: The functionality provided by the `apollo-cache-control` package is built in to `apollo-server-core` starting with Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#cachecontrol for details.
npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'
npm WARN deprecated graphql-tools@4.0.8: This package has been deprecated and now it only exports makeExecutableSchema.\nAnd it will no longer receive updates.\nWe recommend you to migrate to scoped packages such as @graphql-tools/schema, @graphql-tools/utils and etc.\nCheck out https://www.graphql-tools.com to learn what package you should use instead
added 944 packages, and audited 945 packages in 1m
65 packages are looking for funding
run `npm fund` for details
23 vulnerabilities (4 moderate, 19 high)
To address issues that do not require attention, run:
npm audit fix
Some issues need review, and may require choosing
a different dependency.
Run `npm audit` for details.
➜ ~ vue --version
@vue/cli 4.5.15
ちゃんとインストールできた。
アプリ作ってみる
➜ ~ vue create hello-world
構成を聞かれるので、好みを答える。
Vue3は使ったことがないので、ちょっと使ってみよう。
そんで少し待ってたら、できました！
Vue CLI v4.5.15
✨ Creating project in /Users/kota-ninomiya/hello-world.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
> fsevents@1.2.13 install /Users/kota-ninomiya/hello-world/node_modules/watchpack-chokidar2/node_modules/fsevents
> node install.js
SOLINK_MODULE(target) Release/.node
CXX(target) Release/obj.target/fse/fsevents.o
SOLINK_MODULE(target) Release/fse.node
> fsevents@1.2.13 install /Users/kota-ninomiya/hello-world/node_modules/webpack-dev-server/node_modules/fsevents
> node install.js
SOLINK_MODULE(target) Release/.node
CXX(target) Release/obj.target/fse/fsevents.o
SOLINK_MODULE(target) Release/fse.node
> yorkie@2.0.0 install /Users/kota-ninomiya/hello-world/node_modules/yorkie
> node bin/install.js
setting up Git hooks
done
> core-js@3.19.0 postinstall /Users/kota-ninomiya/hello-world/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
> ejs@2.7.4 postinstall /Users/kota-ninomiya/hello-world/node_modules/ejs
> node ./postinstall.js
added 1269 packages from 665 contributors in 150.872s
84 packages are looking for funding
run `npm fund` for details
🚀 Invoking generators...
📦 Installing additional dependencies...
added 70 packages from 77 contributors in 40.199s
91 packages are looking for funding
run `npm fund` for details
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project hello-world.
👉 Get started with the following commands:
$ cd hello-world
$ npm run serve
ご丁寧にコマンドまであるので、早速立ち上げてみます！
➜ ~ cd hello-world
➜ hello-world git:(master) npm run serve
> hello-world@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
DONE Compiled successfully in 9385ms 12:25:39 AM
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.0.11:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
http://localhost:8080/
ちなみにファイル構成は以下のような感じ。
簡単すぎて拍子抜け。
typescript の導入
プロジェクトにtypescriptを導入する。
➜ hello-world git:(master) vue add typescript
📦 Installing @vue/cli-plugin-typescript...
+ @vue/cli-plugin-typescript@4.5.15
added 50 packages from 43 contributors in 14.268s
92 packages are looking for funding
run `npm fund` for details
✔ Successfully installed plugin: @vue/cli-plugin-typescript
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Convert all .js files to .ts? Yes
? Allow .js files to be compiled? Yes
? Skip type checking of all declaration files (recommended for apps)? No
🚀 Invoking generator for @vue/cli-plugin-typescript...
📦 Installing additional dependencies...
added 44 packages from 32 contributors in 16.042s
104 packages are looking for funding
run `npm fund` for details
╭───────────────────────────────────────────────────────────────╮
│ │
│ New major version of npm available! 6.14.8 → 8.1.2 │
│ Changelog: https://github.com/npm/cli/releases/tag/v8.1.2 │
│ Run npm install -g npm to update! │
│ │
╰───────────────────────────────────────────────────────────────╯
⚓ Running completion hooks...
✔ Successfully invoked generator for plugin: @vue/cli-plugin-typescript
この状態でみると、ホームページの文字が変わっている！！
最後に
Vue3 + typescriptに関して、vue-property-decoratorが使えないっぽかったり、何を使えるのかがなかなかわかりにくかったのでそこら辺はもう少し調べる必要があったかもしれない。
あと、この記事を書いた後に見たが、以下の記事がめちゃくちゃ整理されててわかりやすかった。
自分の記事の存在価値がない。。。
さらに、どうやらappをcreateするタイミングでcustomを選択すれば、作った瞬間からtypescriptが使える状態でアプリが作成されるらしい。
とりあえず作ってみるのも大事だけど、ちゃんと調べるのも大事だなぁということがわかりました。