Help us understand the problem. What is going on with this article?

忙しい人向けVue.jsプロジェクト作成

開発環境

Visual Studio Code (Onlineでも良い)
拡張機能 Vetur(便利です。)

叩くコマンド

プロジェクト作成

>vue create <project名>

⇒必要なオプションを選択する(今回はTypeScriptや画面遷移させるRouter等を追加)
※追記 tsc -v でバージョン見るとなぜか古いが、内部的には入ってるっぽい。

>C:\Users\<username>>npm ls -g typescript
C:\Users\<username>\AppData\Roaming\npm
`-- @vue/cli@4.2.3
  `-- @vue/cli-ui@4.2.3
    `-- typescript@3.7.5

image.png

ここで内部的にnpmからモジュール持ってきたり、設定したり全部自動でやってくれている。(テストに出ます!)

開発サーバーの起動(出てきたURLに飛べばVueの初期画面が表示されているはずです)

>npm run serve

本番用ビルド

>npm run build

Vue CLI プラグインが超優秀らしい

やってくれること
 ・npmモジュールの導入
 ・設定ファイル等の追加
 ・Vueインスタンスへのロードetc

例えば HTTP クライアントであるaxiosの導入(APIが作れる)
これだけでasyncとかawaitとかもう使える

>vue add axios

UIをカッコよくしたい場合に使うライブラリ
 ・Vuetify - マテリアルデザイン、コンポーネントが多い。
 ・Element - 管理画面向けコンポーネントが豊富
 ・Buefy - BulmaというCSSフレームワークがベースで軽い
 ・Onsen UI - モバイルアプリ向け

Gitにあげときましょう。

Githubに新規リポジトリを追加
https://qiita.com/sodaihirai/items/caf8d39d314fa53db4db

参考

株式会社ゼンアーキテクツCTO三宅さんのセッション

RZQiita
社内SEの備忘録 Python / Django / Vue.js / TypeScript / AWS / Azure / AI
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away