出来ればあまり手を加えず公式のやり方に寄せておきたい。
以下の内容はVue2をある程度使用していたことを想定している。
Hello World
いくつか方法はあるが今回はViteで構築する。とりあえず動くところまで。
https://v3.ja.vuejs.org/guide/installation.html
Node.jsをインストール済のこと。
npm init vite@latest [プロジェクト名] --template vue npm init vite@latest HelloVue3 --template vue cd HelloVue3 npm install npm run dev
エディタにVSCode、拡張機能にVolarをインストールすることが推奨されている。
さらに拡張機能の@builtin TypeScript and JavaScript Language Features を無効化すると型チェックが走るようになる
ソースコードを確認してみる
HelloVue3/src/main.js
htmlから読み込まれるjsファイル。少し記述が変わっている。
createApp(App).mount('#app')
HelloVue3/src/App.vue
目新しい記述として<script setup> 構文がある。
従来との違いとしてはscriptを先に記述できるようになり、それに伴い宣言した変数をtemplate内で使用できるようになっている。
<script setup lang="ts">とすることでTypeScriptでの記述が可能（ただし標準だとエディタ上のチェックのみ）
setup以外は従来と変わった部分は見受けられない。
HelloVue3/src/components/HelloWorld.vue
https://v3.ja.vuejs.org/guide/reactivity-fundamentals.html
const count = ref(0)
countが下記のtemplate(html)内で使用できるようになっている（Vue2まではreturnする必要があった）
refを外した場合初期値は設定されるが動的に変更することが出来なくなる。
アプリケーションをビルドするには？
npm run build
とりあえず事前知識としてはこの辺りまで。
後は必要に応じて適宜調べながらやるのが良さそう。
以降はVue3を始める上でいろいろ調べた内容。
何を使ってどうやって開発するか。開発時のオプション
https://v3.ja.vuejs.org/guide/installation.html
CDN or ホスト
サーバに処理を寄せる場合はこっち。
今まで通りVue CLIを使用する
npm install -g @vue/cli vue create [project]
Vue2から手順を変えたくない場合選択肢の一つ。
今後新しい機能が追加されることはないという情報を見かけたがそんなことはなさそう？
Vue2,3を選択可能。
以下のオプションが選択可能。
◯ Babel ◉ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◯ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E TestingPWA対応可能。
状態管理したい場合は
Saas等を使用する場合CSS Pre-processorsを有効化。
等々。
Vite
https://ja.vitejs.dev/
npm init vite@latest [プロジェクト名] --template vue
Vue専用というわけではなくReactも選択可能。
JSXがサポートされている。
Pinia(ルーティング)が利用できる。
Vue3新規機能
https://v3.ja.vuejs.org/guide/migration/introduction.html
Pinia
コンポーネント間の状態管理。
Vuexの代替。
Pinia
Viewとロジックの分離。
Teleport
用途はフルスクリーンのモーダル等。
参考
https://v3.ja.vuejs.org/
https://ja.vitejs.dev/
https://zenn.dev/ymgn____/articles/e7709e88948446
https://zenn.dev/azukiazusa/articles/676d88675e4e74
