Vue3/TypeScriptのプロジェクトを作る
Vueのプロジェクト作成において、
TypeScriptを使おうとした時に、
こちらの記事のように、
既存のプロジェクトに追加する形で使おうとしたが、
表示など、一部、うまくいかなかったので、
最初からインストールする形で、
Vue3/TypeScriptのプロジェクトを作成した。
Vue
Vue.jsの公式サイト
https://v3.vuejs.org/guide/installation.html#npm
プロジェクト作成前の準備
$ npm i -g @vue/cliVue3 / TypeScriptのプロジェクト作成
$ vue create sample-project自分でセレクトして入れるを選択。
そして、
以下の選択で、
デフォルトで「TypeScript」が外れているので選択。
Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project:
◉ Choose Vue version
◉ Babel
❯◉ TypeScript
◯ Progressive Web App (PWA) Support
◯ Router
◉ Vuex
◯ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E TestingVue.jsのバージョンを聞かれるので「3.x」を選択
? Choose a version of Vue.js that you want to start the project with
2.x
❯ 3.xそれ以降はデフォルトでも良い（変えても良い）。
そこからインストールが進んで完了。
$ vue create sample-project
:
🎉 Successfully created project automation.
👉 Get started with the following commands:
cd sample-project
npm run serve上記の完了時のメッセージ内のコマンドに沿って、
コマンドを実行する
$ cd sample-project
$ npm run serve
:
DONE Compiled successfully
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.11.23:8080/これで画面表示で、「TypeScript」の表示が出ればオッケー。
画面表示の例
スキルを使って、就職/転職/副業する時のサイト
プログラミングのスキルなどを、自分なりに高めた上で、
自分のスキルをアピールして就職や転職を行い、年収をあげるか、
副業という形で、年収にプラスアルファの稼ぎを増やすことはできます。
まずはできる範囲で取り組むことで、
少しずつ、経験値も増え、自分のスキルが収入につながるのでおすすめです。
