大学生/大学院生向け

在宅ワークのお仕事

プルグラミング学習の無料相談も可能良く

プログラミング学習の定額のサブスク

サイト/ブログ作成をコスパ良く

プロフィール

学ぶパンダ

初心者向けにプログラミング学習や

就職・転職に向けた情報を発信

Google Workspceで便利に作業

大学生/大学院生向け

在宅ワークのお仕事

プルグラミング学習の無料相談も可能良く

プログラミング学習の定額のサブスク

サイト/ブログ作成をコスパ良く

Vue3/TypeScriptのプロジェクトを作る

Vueのプロジェクト作成において、

TypeScriptを使おうとした時に、

こちらの記事のように、

既存のプロジェクトに追加する形で使おうとしたが、

表示など、一部、うまくいかなかったので、

最初からインストールする形で、

Vue3/TypeScriptのプロジェクトを作成した。

Vue

Vue.jsの公式サイト

https://v3.vuejs.org/guide/installation.html#npm

プロジェクト作成前の準備

$ npm i -g @vue/cli

Vue3 / 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 Testing

Vue.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」の表示が出ればオッケー。

画面表示の例

Vue3+TypeScriptの初期表示のサンプル

スキルを使って、就職/転職/副業する時のサイト

プログラミングのスキルなどを、自分なりに高めた上で、

自分のスキルをアピールして就職や転職を行い、年収をあげるか、

副業という形で、年収にプラスアルファの稼ぎを増やすことはできます。

まずはできる範囲で取り組むことで、

少しずつ、経験値も増え、自分のスキルが収入につながるのでおすすめです。

ピックアップ

おすすめ記事